{"_id":"@amsterdam/asc-ui","_rev":"124-690b09720346f41eae5f91d0d517b675","name":"@amsterdam/asc-ui","dist-tags":{"canary":"0.35.1-alpha.31","beta":"1.0.0-alpha.0","latest":"0.38.0"},"versions":{"0.24.5-alpha.5":{"name":"@amsterdam/asc-ui","version":"0.24.5-alpha.5","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.24.5-alpha.5","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"08f084507061e66b284d412d01cf7f08749fe3fb","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.24.5-alpha.5.tgz","fileCount":2419,"integrity":"sha512-DVUTuc3p+k3hDvMauaB1v6yx7jyELmFV7qsMRloPmeKCcM7CBRdSd9XYDGllMN5KegQ8l9lv8Fb69+9ZVKP0bA==","signatures":[{"sig":"MEQCICtIwAREPwBeFHfV4mFaldpZSdIAE/PiK0/DNuoAaINAAiBB++OL8qoOuXqZk+mmV6jOSFMEODiaWbcPopseQG5+9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1927288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfacZUCRA9TVsSAnZWagAAWlkP/2rJ7i3JEQBL7Tgk3Ye5\nfRUi4Qis452kRj7mqQ0GnajKN4gh7usf3cOC+b1vMOkBYE2YWzdgjYkWHtqz\n2x+D0UYX5kqMNOkqMVdR1DXAwN6uQDtorPD4e3HX0p3F02JIYPuIb3xXUZgq\n3CMux2xaHVUMfmsfziK2/gGS7LTr2lsy9Oqo2r3ACpZSXUVALGCo8o83XIoe\nr/5Bp+MpIJL0t0DP5gqkZfXLNfkcYunNc/1TBOnz0ri5a6vbxroE1UjmJZG3\nZeWvp6UdQkwJnt04ca1mvxWYbTAsca3EtLCH7+4doOIXN+MDYaaV39frG76+\nkQSqLjVeu+JaRU1P2Qp7p1SuaKJNVdj3Uz8JK+dvFJ4/Pt77ynyVS1hbCc9J\nRAnLrR30u2mnovvu7xnkh0PVbzzOpxgq+wZudn+NPhjXIg9mzkD9B1dkBIzi\nGmiUiNhxer/oL2pyAEMZXx5mPOq7RvP7SEU2NruFf9923EZzcRiabCjjm7l0\ncwhSFs7oFpiPHCw788FirCCFSyKkpvL49eSVdBH/XadxNi1BCDYB4l6uOfHA\nl5GB+QxcRiWn2d/DvghXGMFCY3uhkdzuMfmZgbxUKDe3UFcD9bvUnvDR1sbx\nYiYkWvyPvHyXcv8RT7tI4kij4+L0BSXz/GXNPSUe55lMB/3Ntx3UhHLrvv4p\n01IH\r\n=WcQv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"c6e74b619e62bd77c7c546d4bbb23148562c0e28","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"polished":"^3.6.5","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.24.5-alpha.5+c6e74b61"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.24.5-alpha.5_1600767572450_0.6665976136735274","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@amsterdam/asc-ui","version":"0.25.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.0","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"f64314e227c45d5fd0647655582328c291e9810e","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.0.tgz","fileCount":2701,"integrity":"sha512-0yySpAMPPfr3WNOzcUYTxjEKfzBdr0OkJWCLg37IV9VPKi9S+P2KgNhIoD9XtxD6aFW0dyUicMRvTL5G8vrCow==","signatures":[{"sig":"MEUCIQCpv5PGGLL9InxkLbORNBK23qaAl1NXDCzJUo02mqFWVgIgUZw+Ndyy1DYhOCNZMebVlG1eJnkKJyQIkvv5Hk3sVc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2138614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfacafCRA9TVsSAnZWagAAg6gP/jI8nzvCRgPkYfeMLHLD\nyGC2j6pfgvW+P2Q91VeM+F+QtdD/H8RIXI2TkEzKL+rauwqxcCtnkSLI94PG\n9BtO5y3RGZXa9aS8LLCIAEJDQOPExcgxFyGby2O3fz390o5oJgQ8OeRIjKAc\nCsNs0xTy+h9Fb8rdNevzB+JeAqkAy6Sv6WYdYa5PuSfJ33P+QlkGBsO6Y7Y7\n17q9vlGRXSaNZ4IF72PJw/Cx2kTw642FVSTMrkpaU6qqjvElpgJ2f7hSoiC7\nxSbJuwTHo4Xmmuf8YcQEtYjBIY5UZnjcXlJFSnrvYdyLPokIDh6LxfX58KZJ\ngZ1JHb5EtB3w+ABYsl0XrQvA1F4J/G4vrdc5wVdIsZet9UgCn0yl4nFZB/nh\nzoW+Fe0N3CWJ+tlylXLlZbgWBteUquGiKRHMXF3Ws8Bfhr6h0w6MZc6wvEbl\n2uy8XXXT51XhvwPhDt2SG3ls1Vw8ZPAmNMehrMBU7mQ9FmGmFB6RpNlpCWiU\nMCGoAts2CgB5bMzY+X/VZy2rJgMSBbgU6QdkV8A06Z+sBpYG9kGfMT7K6wyQ\npPoAVFmFZ9p99tJSN5bOshILS6DX+pWkzRHNquvBq0j/F/Ys437housWNx2Z\nmMzo82HPKRT7QmIwS7um4I/jcHkCA7loGQcRfuADx2xC5ORKx68Y7z8jzV15\nP/jq\r\n=QdXk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"7803854d9e214f63befb89951050ce208ff9daa3","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"polished":"^3.6.5","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.0_1600767646501_0.07241056393296241","host":"s3://npm-registry-packages"}},"0.25.1-alpha.3":{"name":"@amsterdam/asc-ui","version":"0.25.1-alpha.3","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.1-alpha.3","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"852b6ef5052e28c83d838aaecc4a97bb969cfcef","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.1-alpha.3.tgz","fileCount":2419,"integrity":"sha512-IYsy9hJN+J9AxXfvGHwQvwnApfdfh4TuFaUvQDps2sDqBphtPRPOMpfx4/TqoaWKBdnLcoSYrlRy2T7NogdW2Q==","signatures":[{"sig":"MEUCIQDqxHePOpedFRZD6+4JpJDB2ZZ0BB+ONBlPaL9hQYpQjgIgd+539e6VXZvihFx/OfwB+tMS51nezSQmipQpJgrfFdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1927720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbfxcCRA9TVsSAnZWagAADlwQAKBCtimZZOr/mnqSiDmz\neDNoMGqy3/xo9NXKaXbsjnZ+TRshHiVl2t0dErjbNL37m/py6tt5iMx9ZFRt\nQnGg+W9rcz1GXWHxsJU8bvUb1clarKHgpIjJxyonpHfqMEgvthdKWiGqStZu\nTfy9HBt0ShIPX0+VjQHAQ7XMxSwU/MXi13NEvM2rbbwTHcBE2XgiTV+DewQl\nb4SvpGVjLyncaEGQg0+IyD0MaYUN3WAD+eeXM4Xv4/BPIipglM3rZQmGgOaS\nk4WaxwEj7DhaJ+Je0+KYQI9Urdcx6Mx+505EwCVTrvg/KGVdxv6X/6kG+fhN\nan0yLwBD45J+Hxx0ZEvaaFP4LrnvBVhv8UDF3wxYFxip9klYdMpmZeYauXfU\nmJtJzI+j1LudxxCXGYRSVv6ZJHaLdy1TWFlQX18C39Q5pOSaV6fcizFtS423\nxwMuLFnRh6SRLubbANoZrU+WVEDoz29Dwf6hKS3YddrKFKQXRHxAzomQkSFN\nGbg4VyY8WS2A/wM7rW4tCPn4BqeD/qrHHPgVfw2WoFPiG3+xPT6ARsDpKsD4\nNbGqK9DGZWNv7zgmU05tpTNmJNQs1xHPtm9cthb5gZ9yEfSmAnlYHICRUwM6\n7PihvnEDVbZJOvdUNvXDjHYgC3wkOVJ2oYow1Nke1XSIOvr3WUawPSmlXkUB\nB1/j\r\n=1SDT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"4ac7dca8d283613b7c8ab44fd1e5fb61d956c99b","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"polished":"^3.6.5","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.1-alpha.3_1601043548047_0.20101898223310521","host":"s3://npm-registry-packages"}},"0.25.1":{"name":"@amsterdam/asc-ui","version":"0.25.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.1","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"44bd94ffd8f59982e8409ac54f298c7252ed9b6b","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.1.tgz","fileCount":2701,"integrity":"sha512-LTbWkeLd3j2/wcyQmB68IMFCTjcyDt/17+HqodiUen5BClplart5nTCFjGijduFdJxYH1fPQHfvrCYmVqpS/GQ==","signatures":[{"sig":"MEYCIQD/vpBXfQlzA1oD1MMcvgctV/JyPRdje321e9VHj6dZqAIhAK1aicJgwiz+vO+zRKyb3/ouimsESqztokO9g6VqkFoh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2139063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcwJjCRA9TVsSAnZWagAAE2AP+waYQ7HwmgHNsrHkkiv/\nKtLAFypMZQlPsQAoSEv1ngWZcVz2lI8rVPDo+LeHy47kWAYckP5yVvLH30fZ\nuOgYgBcwfqO3G8wTh3aYNd8gfz1u1BCOxKC1cXPYuHJt1RZ3FkC7aWbsSRyd\nK4gn8NHEOWYXecTyoj7HYGKzvnUcoV/MexIyUU8nq5u2GyH+Ygnpw/tzUlVf\n2dN/GyAvTq9hT1apzjxmqnQYdURJ1GS8s5j8+mzsyMAKHUAHRJe3Jh7yokOZ\nBxO0jAX13ky1uJZNUUnPv0ozJcs/+evDCsSn3VNJtTvOW38vbeyAGyWivvzm\n5vWcRd9uLznPErfbCHbZyrezOYAZwrkM1K3XbOXw/9w9B93waKExIA3y/UiY\nH/sgu+T9uEc2K+yRlGRjo/9/abRr/ni9f02zML7QUcO0UqZCDxS8glIjsvkr\nAP+6OdUwYvXU6lVAPT2PnS5B7Rp8O4To4L2ZUYnDjiBGqZJp4SDpt82HL9tm\nPHS7wYawxcPjADWEnULGUQKwW2AJtn4cPZA8w1q5E8vmkNHMC5XecHndadVN\ngnMzrP1Lk23G73n0wpz6jGsZ+1wcOPJ5IraqhQJN6hIUou3WUS1ur8/a6xFC\nZNfyYpndwi5RgKf09UsZY+o85FSr17qUEwUkHwVLru0vuO6TgVC1qF6fITbC\n+/o5\r\n=Jxvr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"88b47e20d0115a15878d895f645291e3a190fd6a","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"polished":"^3.6.5","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.1_1601372771022_0.3051281135295876","host":"s3://npm-registry-packages"}},"0.25.2-alpha.10":{"name":"@amsterdam/asc-ui","version":"0.25.2-alpha.10","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.2-alpha.10","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"d3ef187e501d18eef0286f1a889a3c1d686a7b8a","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.2-alpha.10.tgz","fileCount":2130,"integrity":"sha512-oXTTer/vhIpNAPj6sxXIKEDQ+KYw3uMilJ0lOXMgF87R5u7Na9hz+HX1Nqs8ZkUS1yofcOBtyhAefVyY+5Vzxg==","signatures":[{"sig":"MEUCICPu6Vn3YuFTi6GkWzvOkpGY6Sab5t8RQ9cuevvNezU9AiEAw44WHA93Zb8ipdW3C3kg1MBN3Y+GCdWTriHQkNS9XKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1748030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfewoCCRA9TVsSAnZWagAAwykP/jQUnqBwScL81lu9kTGY\nm2UKcSRDF9etlsWwUn/PKfmSoZFF8DCeD0Iujh/7Xqkug/7OQg9sFMcPmBEg\nXNIZUS7Szl4f5nIyYFBr/gVvFEZiXDjhMh+oRVIvgJFpz26TKR6dSpgfog3a\nkbKwvVjft3dlyi7e1QxG+tQFPNv//Fd9AqixU8san1+hx+DiTlrQjPt2A4Ok\n27biscF/88psKc1HEn3/ep0QRj9Y1Bs2bpztIQOxjRZaQNCPnOp6k4c3iBm8\nlwoMz3CMaj61wMDHydUF1vNdc2zHhK0plZXsKCCo+hKUjIlVgKEB+h/6o++h\nLR9l+hV1SIkibl2x1V4RP0LCFOVyKH+FEBRieKLnZ5SVHbaIlHVbCz5AKAq1\nm8fwFnyn9F53QRYUWuecp241tE+j+rwEuMeWGM/7SD4E/KnlXkJXAcTXqJ6H\n4NoELPvdT484Sx8kPqVgHjdaia36Ex8nvmcijWvjSidCUR1P54ntDLMIM6uG\nPZ50mQz0yfWvK1A6P6Ly/HlXuc9eXqnCVAdRE+YpTxkGLG0YcJ/hZMP/zf+q\nPFKEeri5+hc27hxcrGn5kLBM9nr/oQDnBGx9dyFd8151oKzybe+1GdXHUvyY\nVXSk7zJvnQtC6o6hbBSlCUjk8EvHWfWJHVTw5lCD7qK9M51OcEAk/BaIapOB\n7DDu\r\n=T/TW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"ad76ae1aee6231f1cffa2f4d499ca819d9fe8966","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.4.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.4.0","dependencies":{"polished":"^3.6.5","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.2-alpha.10_1601899009808_0.7604709859920498","host":"s3://npm-registry-packages"}},"0.25.2-alpha.14":{"name":"@amsterdam/asc-ui","version":"0.25.2-alpha.14","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.2-alpha.14","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"30e77bf005cfa28562a032d5f6292ff771e1fa3c","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.2-alpha.14.tgz","fileCount":2431,"integrity":"sha512-SbztCrMu397m7n35a4wiRjxSSOJGF1X88YGH/rxLf5Ss8nqpvZAH6HGPndXqv2xeBpIBwXXR0qqT/0MoCnvzjA==","signatures":[{"sig":"MEUCIQD7bfiUu8Z1v83G1rV5DaveX08mp4H1jtRZIt8HNQZMzgIgGn4U0heRWFue49OIe4WbNmMhMu9r1aSlfXzDRxATzv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1938954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe0faCRA9TVsSAnZWagAA+2EQAJEGH4qkfQqIbZsrbXrv\naDz6FG3he78tFgQGDeIm2WJ3eeiCLz+YdHRaaUzVagqNrbStFnb6beHX+YiR\nxSvInXLQ05BxrM3UpfnEwYHm3xAPGnYnO+3jWsRdAnF8wecwGClr6S2UXozF\nzfOUhH9tsNTV4GsYYqNNJdhIc8iSLp7PGdKh14v3dCM2EWq/fKV6deDPtCq5\ntI/scbGPi2H3JXxGUmls+B/2xNVZQmMeVXJ+T7lSYC/57j3u47oBAlPtQxMR\ny7WE+F/MBkvhJjDhpunRd/lJ9FzT2RoavT9SOj87bSMFztmZe6IALt4OTGm2\neacPZkXpZ1D6WYL/Jf0Pry0Ynbem0dgs/NR29f0k4c+KzojsSLOJ3J60nBee\nvEAmKUXf5mBUImPUAXs62wfIQp2vvxrzDKZLXTgrLOk/fG+jfwOQdurFwcOI\nmZhFBTB6IuBEExbYj5kIJILmWM+ZeItc6O4fK2RhcHifZJeTjwgfFz3llVHT\nVvTXXWfrFM7oNdvJLgP0bhUTfIfC7bhX0Nr0H67mgO9iwJ3hpd5G2nR1OCpX\nJM4LhcA1D2p2CoeWDz7ZU4hyuQWzOzAqKguLAM/++BYayCm7j7hGIgBG3UY2\n8eDCohpYCAXeh0ZuxZ0qTAeqzjwwI4GH/+Rl4FsyGAlRhWiz7NpvzabBusfj\n6yK2\r\n=N0Vn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"82289342c40a5a8ea62d193a56f6e8c6a81fe6fe","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.4.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.4.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.2-alpha.14_1601914841535_0.13892639606552537","host":"s3://npm-registry-packages"}},"0.25.2":{"name":"@amsterdam/asc-ui","version":"0.25.2","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.2","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"7e608a01dbe3ff7e68703c7176e2ebe4a28a34af","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.2.tgz","fileCount":2701,"integrity":"sha512-ZbI3H6KpOYfDWib0vnq6jtWjzX43Ubqckahs4qApCdKmmVFpX0X9KL0UldbFmEloDZUvUcpmu+8WeCYTCA13rg==","signatures":[{"sig":"MEQCIEltcoSBEKNVKQXfczE/poXru7GGsdh+MsGXwuMNz5oYAiAiXyFysCGFbiiwJh7iZHSY5LQZXg7IKiQ048R9mY7Q2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2140903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffGXgCRA9TVsSAnZWagAAT6QP/3j7l78tyZVNmMDRhrDD\nyJXn8YHpsOV5m/EH5eL5KzYlUHgAtZYYLYilpu9uiVtSg0mdaQPMFnjh9qr8\nqcy8JN9x7Pb1rL5lTYRNNZdhbdSv15yRNZjpBcLJ+hRIqjlxwhIuh/BrWxkR\ntWc2cu1S9Xza39fy/cI8VtXdK+abnI3HCRrsKBPlvkuBNiSpu0g7pqsROCA8\nMN0y13wpqGENAhmwR+bYluo54fsytZ6bkuN40UyROGdRE8YLy6pA9Ryjn2aN\nfj7wpZcvrf0zSiaL7XArs+uTrQ4ckWwFpGWZcyB0epsTySDKwPZ2F+q/h9i7\n+LGKv/G2qb/EvwzIxO1/35xTyMEmKm9ha+kqqVp+mZVIVwqkESOF6DyidJYB\nPf6g5EQSnZG8EiLFEwX7iMcWfGbPj0oKBZ3HzsRm6cumrP9XQBGop0pM1Kxu\nu7ZTgO83xfymAyUL3BfnKP44+r7lFOjb4Nqt0G2IIwwlr6SMDI1k0yake45w\nkV5smm50816pgmuJldgB0F6PFV+UXvy2vvH0/zAhFEigTHOHXJTTVIpZ6o4U\n7wxfb8kpE2JdBddmIOtXz1yW9/uANOYNeirS6gVty/vaAIZ/sMC+wz4gaiOC\n5Vmn8T5IBZZSUSLplJcoBSL520bcncov/mL2/silHT1KmKnNiJ/KBqmmcACF\nw+Ni\r\n=dawU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"8192589e6bb8937f3238b824758071ad877aaa45","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.13.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.13.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.2_1601988063751_0.24248706410037202","host":"s3://npm-registry-packages"}},"0.25.3-alpha.74":{"name":"@amsterdam/asc-ui","version":"0.25.3-alpha.74","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.3-alpha.74","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"c482d6260bd5d2bcce991d17cd55ab752d862c79","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.3-alpha.74.tgz","fileCount":2419,"integrity":"sha512-cAzUb0PVfycrgIkbXQ/yzs2c0mzH3JnLdg6iqPmh++mu4pTir9dUT2J1uOS8R8ZfWcM5R0wYSdwn+3S8rvb3Dg==","signatures":[{"sig":"MEQCIFyIJITgCbE+drC9gg3OVxQsX0VfjV02dun9RzjZ1rzlAiAedK6RVagT6tYINDBYs5W1+NV76Hb80QaJXAb0SE3nXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1930274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoB6sCRA9TVsSAnZWagAANhoQAKGo5J6ZSckN/P8/nnJp\nbkyAyaIicQ4IG2uYfoLLe5VKWsn5ofa+5uOq7aGu/nSOc3U7bxe9icXBj5mL\n3T6JUxQSoymDnyxCW7iQaocuh4E3QENyTY7pO74p42dbA/chL8FCf0o2bvbL\ni66AypVOZCISWdx5rUItIsweO6N5HjL8El/j8FrcCM0nQ1SxFc3nY0GT1oZ6\nJKT7FZpCKUbj+4Id61qhF4utZE1QJS32IpM5KrsI4sNJor5NEFMFlIZPuYFk\nNNzrCMGsQiAKIBqah7HVj5iT6TO0R7DHm9+eSBfIhpZ04RI6A83QxXAhNgvZ\n32tyG2mAOerD1kT+sRHv2zjn4g4AEFHIk/xIa00D+gb3DIgYrSfQ7dIyx/0B\n2qVtJC9HVkaIW6rvVw3HnZgBI37PJcFeWX6vR6t/Rjf08i8xB8QerLGYnKO0\ncqWFWG7gs5s7pbWn0xKLjEHvefMhC1cI7hyFaGGosBRIrMf3yBYmFN3waff3\n6c19VoQmisVt/SwtzAJ6G/VCGIN8npBqNsulu5rph3OK0eFlKLBH3HTOJvfS\nIvOStpluT3MRMCVlnzjts/y7HKn5jk8aFyhIHps574js1e5O6OKWNvSD+TiH\nIx59BQy+Bpmp2oZpyo7mT7agzCxl+e3KvAx0n2qH1JlaxSExouUHuj/v+fz8\n3ZLo\r\n=LhlN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"dd9fe45d420bf4ae4703d3492c54f88650a2a0f7","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.3-alpha.74_1604329131425_0.4971327220335202","host":"s3://npm-registry-packages"}},"0.25.3-alpha.86":{"name":"@amsterdam/asc-ui","version":"0.25.3-alpha.86","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.3-alpha.86","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"d6c1562a916ab8d8ad7c8947c8376b1f5db0641b","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.3-alpha.86.tgz","fileCount":2419,"integrity":"sha512-rA2b2X1zEXJ0IZeMTVCmxoCGyZ/2Y0wGx2aSSicvwNevVR/HUMTySQ7xV//0e18SUJIzT19BbMAvRUAguW8LXg==","signatures":[{"sig":"MEYCIQDXNWx6IGysf3rup8yQ6Q/abRFoSfLt0faHWjJbl7/79AIhAOVKw+IFajK7myRZ8+JUAH2CbAZmDJXAGZqR5anwBkXa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1930225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfosExCRA9TVsSAnZWagAACToP/j+IjPvSU708Doarf71C\nucq/tT4WJ4ikLBk/8+9xFnwL25rtBVPhHpDROJTe871S6MXIpEbqb7D8AOnk\nv74ip/Ow0B+scQ4NNzE5sxhr0icebXl5Cawtrph3KqN5Cf2lybUrm1DQ6cYA\nOR2wxpAgzjZspFoYXTghT2fBWgUI/rfATnNhYR0A5o5JFLZAwfWh9vfa0gRy\nd2gIfr0ueI4+cPPpjPTY/aqmywBkY2N93b1CSvE0CEnn6rGyFySbBkeGtHgl\nIdRsix1xJxHeSVFr3yOI+rMWW2jNYe2pRHOJmIaVJ3/YFsUDN9jGNpmRuHea\nasSZQPc/FyFqUI8Gq1+02fmHK7E5/GHaD4ww0WpgSuPcktTIk1VTcW5euN/d\npfpct0jhmL7ae4gHJJyoQ/QQ3si083kMh5M8MQshjCX6chZlwx4WDWv+X2QP\n1p8LOKaJhISO0NQ7KiLVlH2MB1Beo0LuQjr/6m7N9D/WiroGwRtoqr1lGRMi\n8j2aFIIh1Z3I/5V7cKCRbOp7a0l71h4CCQm6H7Oe8XUQUdMAGS6DXsMn5eIe\nMwmPmHE2PpTVDYtXhCcihqm0oh0vqtOZG2yql2We9KqFjU22BX5Fqx/PK2D7\nPefZMa7kCT+eJeFl6K8j0n+dPRm/3AAkORDslwJ+O04SLi0l7GoE0MXv5W7Y\nIgEv\r\n=VocN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"f4346faf5cd75330b534ba30aee4d35981435a31","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.3-alpha.86_1604501809118_0.6678708708076593","host":"s3://npm-registry-packages"}},"0.25.3-alpha.90":{"name":"@amsterdam/asc-ui","version":"0.25.3-alpha.90","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.3-alpha.90","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"3ebf08e3c292dbd18a2c82792dd2a5d6a7bd390f","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.3-alpha.90.tgz","fileCount":2419,"integrity":"sha512-LK3eMA7fmG9hhypovLJYFi/BYM8eiLAoQFkt91Dt/Eb8zoUJXyNwvQEETwfs8FskpYBwOeDPQcJQnugsrlTtcQ==","signatures":[{"sig":"MEQCIBpDCWyS8HiGBMnHqcX/BdIKqajvIbZ3AsDGg5aY0rd6AiAeNTVDCKzX04AOFFuVVr/I52BqztjrIvJTTmOnDb3KoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1930670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfotkmCRA9TVsSAnZWagAA7ZAP/izCvpXCfuHmr/StILRp\nj0u6gwQsvGyPTKs6cdC4VWecIavUQWfv24yctSNCiXajhun6XXiDzXu6Ndum\niblo/P9ly8ODMUcZlZ56AlctKYBnHrwPOj+gPZ6qvkjthc5jTo6/7veVRK1f\nWl03RuSpbLNTPptlr6KJRKrn6X2aMwxsYNoAP/nI+QMLF40MpTTSnn8pKpSn\n6x5kPWttD0Q9OLAsdU3q143tZ6Xiv/81I8wthi/zt04EP3hUo1ni91dGww5/\nhRBp0Tzh44DBNW1+1ud5UyHpVUHgPaMd7LVaeApw/jeDizmy1AMKNdk7hEko\nsUHmRQHPAT++iAtBkcvj2PY2DW+m9l/pDV2ckyIVGy9iYLqs7Wl2m/TUzXtK\nDWZKVGedZ7qZX7pyUCKbZOknlLxJIULVI5AI1Z6CiFMlQFnVCAP+J+Com4s7\nUXwJqhtXnq68q8k0GyTVNR8iYKolBkmU6IOhQWl3203eaTRT6ix/bzrPSIHH\nzBmB+tFIv4gM78rZvRkZcVKAtsvEyU7e1Ubst80v8699Mq/fccQh6MUKBRvP\n1NjX000Hiy95tm6wjJoM+k0DY4K95uP7C6+QfuAOklI7KBiYcSKa6WUcjTtd\n4uzYJ1jP0L/0HHbyhBxBUM/ccgswH2y546xRZuNtP7jYkEhQovnNFqG1Lmta\nF/c7\r\n=DfKK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"91bd8a13057546f6875a833c0ea645d0075abc38","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.3-alpha.90_1604507941988_0.146146823523162","host":"s3://npm-registry-packages"}},"0.25.3-alpha.91":{"name":"@amsterdam/asc-ui","version":"0.25.3-alpha.91","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.3-alpha.91","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"439c4bb2df9377a6b30c6c65e85de7a7faf23adb","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.3-alpha.91.tgz","fileCount":2419,"integrity":"sha512-uDQ1IQojweLhqRc+k4NtIb0PbgIl0tNBY5TfH3KzZBgv6jDrl2sk0AQ1ODBSQXJwRFI3X3KVBpR5SbTzcXrs7A==","signatures":[{"sig":"MEUCIQD0ntliRJww4PfUZVj840Wm6i9fOF/PxS8ZM/vjGHAK4QIgM9Zi13LyBZgDqm1ViyJyZWEHNjBzd3zzguWeWdeS7mY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1932528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfot1JCRA9TVsSAnZWagAA348P/iBFuTyIrftT/UJEVEp3\n86IChRx79XJe0KWzQ6CRoTyAYjwbkPqFwfh9cJaGgbNtMd1nDsIBClsT4ebK\n2ns8p0WIRv5aiSDKl3h1V9ang8cbK1Ol1qiH2NSySqHIxhkfSlQjTHKAJk06\nQb37zftxLvWvtU5XMxC6fYPWeZuxFv/YeVgUdV2hFnido7HHJOipQqOnyuUI\nCjtZYRQd/StO8U9z1W35ffYfcttovzWk/i6ufSxAPF8sofVnaF75C7VQUkyS\nzSHkwjCI2TV57tMJAgnmSkicOonbwKT3gk9HaI7maKRErZyv9nDK6AhHgj1T\naACHKezi7jHPskfQ9HadY1Ol4O3xj4fAz2KI0DhHZvFGfkiseNN8MBcgJOMx\ntHS8xvvx4mf9GzwfmXr4A4KAb0HcnLpyx8aCvV2RgmgIwxvWDORR2UJeMw+f\nEj1NzMIjNyufsM3ZGSota6cfJw0RwAWvQ5HekUSuzwS44q+9V9qJTmlKbGsJ\n0NTHCEkltxM3byqGPojT83DP4NgRFlXFoIGKuvZf5fa7OY2Hd02Ac3CUC8SV\nxHKgw3QICwlzgxjlNHv2gLkUwEbZl58kYookYvJkbl3PLl3pHZtLnRd+ISqt\n/bNfToxo6uFpE3pOtQTWPF4C5bBkhhDrPA63tQSSt9Tqy4hVCYZDXPoLixfD\nK2B6\r\n=JB/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"49d6a0a6a44c06d89b305ff41da2805a259578ee","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.3-alpha.91_1604509000663_0.1494757049686226","host":"s3://npm-registry-packages"}},"0.25.3-alpha.92":{"name":"@amsterdam/asc-ui","version":"0.25.3-alpha.92","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.3-alpha.92","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"26f6ef252f9a53ccf10a5b96330c952b44fba337","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.3-alpha.92.tgz","fileCount":2443,"integrity":"sha512-ftpaIVIFOt3Rh4m2YP1+LAVfCoa5wwrgfNQ+LHCRUV3ZTazAMLDmZNQR+AtfRuMnD9sAkUxjBwGNBaUolmmRHw==","signatures":[{"sig":"MEYCIQD44/DtXXCI5xKR2oo54JHc39qcXbEV3Yah/S2jtvCxvwIhAJQeTC0WOgWHR9+Wza/w48rod+DghvmdZCN8kfOozy/q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1947067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo84tCRA9TVsSAnZWagAAPAEP/12n6UqvDkGgv2usX9yw\n1bBoCSHuw4hntcS8ZRKrkuti6thBTx0erTMeGDtvlAI+BwHDcL+r8leQyuZN\n7eTKAw6OSfvIAKa/cT04WqRG4++vZ8p7qkmjS+SSVHe7q1Xh020D4j+k59ND\njaBXgiNlJjZAEa5OnhPJpweD04wyuKNmu3+6kR14uMb4/w2mvuPgOJM1jU/T\nEai38F1gh2ExRfKdyhgLTSIY46a7GE3vZ0b8suPIns3VHD9ghyDwoauxZLg7\n8U37QRIFvyRtgfKb6xhpXxBaZEfyOY3EX+P9PqIvZqvlf2vyneD7HWz/xYWO\nxHkREgbiqILCumSsZ4yF5aWF++dgZTveNvWihJA48GHf1DXGBbK14gi3Dshv\nk0GviqRmt2VShQXjs4Nc7ilrQdIkDpzpcTq8tsI2VrVoEHzqrXoobqtUE1fw\n4BGCfY7gQw8N+yZIB4kV/x+bSCeS+w6tWhAa2uBAdnaXe9kp3kgrtTjPmIfa\nHtTlbdmtb1Lp1Iy3FLt9z5OKXiAbIi8XMvYDnWoSX7wHcX7YJfH/YDtpNzNZ\nbVv0HDBduD1bZTH7dvkRg5DeHZClR4DhVgAk5TS9utR86UDx89vFvVRqHGQC\nJit8VhcTv63HWZQ4RvlLhbS3mOGwJILflt308EEPi6xtcFydyi9kSqu4U5O/\nZDsE\r\n=VWp8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"44029073bd40a4abf2dbb87a7d7f00c0bf96f262","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.3-alpha.92_1604570668662_0.9939136344397739","host":"s3://npm-registry-packages"}},"0.25.3-alpha.93":{"name":"@amsterdam/asc-ui","version":"0.25.3-alpha.93","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.3-alpha.93","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"40a4dcb7de8855a35b476da075e77779543ac325","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.3-alpha.93.tgz","fileCount":2443,"integrity":"sha512-LISuGplsXEgA1F4GVop7Zi+jZr3ErP95vEO0ewDo58e5pnz7V3NlI5cEWo4+EdPwTDJTZGh/3pGAQlJt9ZqCtA==","signatures":[{"sig":"MEYCIQD8yOu2nEITHIz+mvULqvOfhC3/DyK4vk1/9n+m1Mcx9gIhAJZlZyHkx54Z/u4H11zFy553esinLlXz+eCBixp7hjky","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1947724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo95OCRA9TVsSAnZWagAA+qAP/A2Xh8+EqPTb3BocHLJs\n5p90nx9+BoZKZxwH7t6Zh28G+Lq6ySx3fZilmrGHcxGxr/V+3MzlJGr+xULV\nAo+YNZPmERPmNSd/gV1XqWbY2N2SUAYDOpN4morqS2Pf33lp8eYODT8Uyixi\ne83OSTSMnS1AED3Du/xOFssho2eKLWGjrKbk+gqmgOxIW6nPRP88nBwy/k0Q\nINUWHwI25ivQ/UISvqQJEgRtXhzVN6XNN1L/5xyTmF5BR1db8dNjlRV4MykE\nwYjiCKUqEEqNKfTFR3BfgLo1pIIeIRiWrmgRF3wM/wYYAD1QdfTlcW7s0Adr\nBdU4SxMiQZDbxvo6rMlAsmIlDgQptM5W8Tr4JprhFGO0oZdF5O58BonMtWTK\nojFAFMZ9wPxglJUnVbp73+0Xt8sobUn33u8PdA7oOuSxyD7r3diMRrSr6tE/\nVcxp2APsxAc4d6713F+NPHvdWdbAXoPq4b0K9XEOafLznJuKfFZR+qFxOHf3\nR5RAqyxEpzHIuaKxuI7CWVQJW2Wqanwrz23EATFAIJ6adRU2rU8aakD/3462\nw3B/MfxcS/HoKK38PU4U5ZZiR5RaKf5O1a3ytXXkUiGditFHWNpNnUCNoZXq\nVzNWfUYyCf85F6DEbboH+4r2PMvK+KlX70RlP1j7ZW3dYy+3lYSXPZmKugPc\nYngu\r\n=pkRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"b583ab4dc4644bf5838899a445ddd8cc53f1a6ad","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.3-alpha.93_1604574797768_0.8011737128807084","host":"s3://npm-registry-packages"}},"0.25.3-alpha.94":{"name":"@amsterdam/asc-ui","version":"0.25.3-alpha.94","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.25.3-alpha.94","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"2cecfbb30f123a187662d736efb9ee6c3415a2f4","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.25.3-alpha.94.tgz","fileCount":2443,"integrity":"sha512-XosJhXs+bLGkBWL4LF3s9j/rnrs/fB1HrHGefnQQQONGHaD2Jhx2YSIygf5Hh6l1Snyieb+/aYSrFaVcjEn3IA==","signatures":[{"sig":"MEQCIFFTZXMeG5yn24wt8Ig8OC8RZnd5y7O5kmf1AGLI7hfgAiBrC52ya/nn4yGmG9nzf4M40x8/VaJgZLnsHs+05X6ISQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpTHZCRA9TVsSAnZWagAAtFQQAJ6aO4X0U6gCiCohIR76\nWo2DEwawgLbv+BfSvP8rLOKdE8AOAGsSt4gQ/ccq7EnH0e57Jm56G9xdYuoE\nX6x/t3AT74az0yt0DlbqLJBtRB2xnEoWmAGPJAzLUxvBJPHgrxCJge1v6DJd\nijN55r3TiOejYeYi7ftWtK7QELzNvZBxoFn0yTqCzIm7zYnv+b7rk73mZUqz\nByNA53IljrnMJB95/E5lHrlgzGz9eEQ0zkPkmZ3UzjrnUI4Uz0wbnkj4AFE/\niZBBp7i2ddHdYiHIVe5ZlqeYuSHr+EG3D9pWWMbIuQ+fRgMhKwqVUdgn2dLa\n0T/SmadPD/GgAIssJu7RffcuPF8wH00OIaWixxlN7EK6+kQFV9CRXxGQypTw\nbSf8L/xgYi2PtgUJC07Pb3Yl0mfJKanUsNhkFIVktuAf/2MsKI0FsfMVF2OR\nL/MfZHRrF2n0T7xpn7a568qX1u47lKuTge4rATaeX907Di1XZeZPu8Zk1HJm\n1RRpU/ZeRI49PctVZO6qIIsZaKGSn/J8nB0u1EMUR14BrdiFz9bnCEgPHuNV\ne6TSdendqqnJAvyCM+tAnjcWKu3kYw+WpWQOF1BS44WhrjXen+M7rrY7KhdI\n1tsVJdOURwAKcSwxxqNeCqpt3MHZ6LdvleHdzTRzxLqTwMTQoSIcGh9NGjPm\nsy05\r\n=mX5B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"ad720726517e47dd2115d1a1605231b229be06b0","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.25.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.25.3-alpha.94_1604661721198_0.3543357388029549","host":"s3://npm-registry-packages"}},"0.26.0":{"name":"@amsterdam/asc-ui","version":"0.26.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.0","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"7daad0c0a4e7f4bd1bef20b093624f4413ae2e2c","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.0.tgz","fileCount":2443,"integrity":"sha512-Zdob2u+QjCe5Ha/wqiT8A0Pd0kYnNQVt6bueNpUxPKBbmaiXKYob1ushWoCvIOkW57qCGr9MnxGysPrg3agsLw==","signatures":[{"sig":"MEYCIQDFryzYyEDHojVHMrZr5SoqBYO9tbaIqHxFgFqVHJ5HzwIhAM7ZdX6cldI+gOasoHaNCrTc6LHNEFtLJiBzlKEilVVK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950105,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpTkxCRA9TVsSAnZWagAAitYP/iI/x0CGI9G6LnP8/X3G\nHxcsewK3w8fnfNt1SvrhMJLPOKBrXWxC61qo28Lw93AKiHPXLdUfoyuzzKk7\n+y8ZWN6YFnTEBVfxlAFPHp5dtSdFGx8huSDcGDu9PFf273pXARBC8Zri7FEl\nL/4g+RB+Xw/0ab4Yg9TJ0fyTd04WGcT0l5pHl6RqN+urmhFJhtDG6brWbuS2\n56MD9/hL9fZc0ouR3EFLAPn43UsIaTCUOThzIG1wVvzoUvQivEnhqfWkuD99\nEnSSANVpS+GycK+s6LRjbWNDSTkK3ipUoV0GOS5LfUr5yCHmiPoTW1CIIj25\nshxjqwlvXWhAIehsCX5xLeNYv2NEYGjPloQYKX3MNNxVnSVIF8QCtfT6T50F\ny9mSlIM/mHrdLABg0MOEQG8S8mURgAQ680HtVeehJcJbzsujX6FnRv/e9Nqf\nr0TipHPsnRBtGeta8Jz6bwxO8Ibunn/5ETUwvuG5CWyrnVmEnOu7FuLF/nan\nwRGjC5bhQW9UNxt/apNuAu9NAv/bG4MY6LddTrRQ3coBChUBeLnfeZ6XXteH\nc0tmCfijAwiWMLUFZaHSwoC8Yu7i/PMZOpUCGxmxpgdc7sQcxJc+N0KpnUz6\nr8pbX8YZBQXSFDWQ6M6Sw/p3zB3vUFNFD+OzNWQR4G2/iD8wLZQeGgajttaJ\nT1qS\r\n=xk7l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"84c8ee06474fbf5d67f08dba711067da0e14326a","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.0_1604663600743_0.5648461965924989","host":"s3://npm-registry-packages"}},"0.26.1":{"name":"@amsterdam/asc-ui","version":"0.26.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.1","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"83c1b87e39364a3b6f07923dbb1d83f4642b6021","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.1.tgz","fileCount":2443,"integrity":"sha512-QlYMpdafrBaGBFvIxYmDBO+1fL1lVNOrdKLoxj27CNShA9V0MYPbYWxSK5oXSL5eXN+756rXekz46SgCkodQlw==","signatures":[{"sig":"MEUCIQDqowQfgnmaBemksKue0xZGLzNznVciI6shmM2wohasowIgfGaXrf3bWzCHD1IQzUpeiOn2uL/NN4SWQaJjH8qSDg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrBCaCRA9TVsSAnZWagAASmcP/jS/YgfchhYEwR+CZ3hk\n2o/AXAVn76Ri7X3B3Ev2W0RE8rdFW98JPBxbJB3opsltRWlKPqpDMKGDxl4B\nhA5P9ml/vKdwieL2uH03yWQIBcBPdVt/NpwqCoSRBOEISS19Wn3PD0LnEG4n\nMQ4Ux/esLIcMP07bgp0xJmAkcAxs+olf45eOULFUcsC+/i5cL9Qt2a6Yo1L2\n3g5jl4KdHefH7ZwrjrzxQg6OAnaRmqZjDyo6X+OZvx2ewSf0njk/pZ55y12t\nfMOUtDb/bLgF3PLa1NDqR30PSz8uDQWyypNMoaZKyDQf3PQGVFiKhxXXBJR3\n8JO4kOaZaalbpt27p3BgT/VbCfJo5FH8QL2lBpjdLzifw9OoCj0S9iqGRk0f\nFMmlYW5AkT3zMok4izquZXcAwks4qjLjeyqI4G0xFQiUEwaECjHMfBF5c/sO\npxV44Vfx2EBChSMm1ePaGaewrYJr62C4BPJnHCf5PqwxwBPhcBrHSVfe9i3x\nOvNNrinMHfDyx6ilPsqIHeXSnvq6L7e1erD4h1Q/N8hdfqo9fsXsSa17FNLz\n1cnopwqymyT2zSfEgTAdBIGh4LTe2Pj+JST7+prZgJKa6zftFwMkvGyTwSaD\nc6M+G8DLgRfiwXfTVAdS1evifHBLMlq2K4IZdpmsgD9WggosuqvHEm62q8Mw\ncB/P\r\n=qs4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"d1ec7a750b39f354b5c2d98ad6420fa1b42a8dfd","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.1_1605111962111_0.589718250350856","host":"s3://npm-registry-packages"}},"0.26.1-alpha.11":{"name":"@amsterdam/asc-ui","version":"0.26.1-alpha.11","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.1-alpha.11","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"c8570e17e7f517d47f82a41ad4576c47c90445a5","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.1-alpha.11.tgz","fileCount":2443,"integrity":"sha512-zrMPFr9dFifLieqPqA2kgjhE7H/uhzndIsHraSqLUcUmoArqsg7fiY/aqR8Of1hE9UnrHbQfcIQN9s68B6boGg==","signatures":[{"sig":"MEYCIQCll88HiZpjQ8Ltmc02fykXu78YEYtDwVrXpHM4F7HG+gIhAPRKRO6f6emOmFEvaNhgHPn8QjQP4Dm2quNeT03ZDgmu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1949836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrBCkCRA9TVsSAnZWagAAAZgP/0G8xtbLgw8S8JNdaCRR\njr8mmrQOBQvEAg2xzUcZfACuQFZy8hwE42ykHx/REp9DQajum3kRQz2oWh5k\nsBpuYQGsAdKglBgU2l/qjv4TE3wZufApGaUuf83rJDua+OjbT5efndPDNb8R\nx3kUMArPOPmUucQbws+gAZnlSf2v3t6+1SHrFtCToV7RNbwoHlPcR+JLpqmc\nssluHhziPMyzX22KYDp0kNYOfk7/B4ziF3qttZQ4HeHZ0MGjNFY8o6w0oYbn\n6O+UIwwYOydIoWBvNjwGZ39/LYqwIMEYNBeFruH9bY1Tk2eOQ7OvO2nvPjUb\nig9OyQVLpCPbu1n7EtjBrmSyPr8Q2dGvwKMx6ZigY1DM6viFkOig8yomJ1JX\n6c9xeaj1wP6GtLcTRM8HSwnCfFzEpnSHtv0wcS1TA/P60Oi7Wgi4c09xr8DY\nw37FnhUHW5U+VTAR8L79jVC8FXJfCzz709m8nml6KocamyZVNHmRAmFyP2Ud\n2jO4vPNtReiZaP/bzyBaKcHzFUVR4vWED3xN7nX5ScvatYufBo83kt8qou9S\nQgdS9IH7ugAowgslX9rNxTuO6php8ctYag0+jkcoHGPFz2RXR0KJywXWw8aA\nXLfTblz2VL3eGYBCmyDViH0s9u8rUB10CwztkmYYuHMKm9QuD9wNJCccTxnY\namrH\r\n=hMLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"d583f3969f7e3bd2cff4123466d4f9dec9dfa1a1","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.1-alpha.11_1605111971980_0.901727488699545","host":"s3://npm-registry-packages"}},"0.26.2-alpha.36":{"name":"@amsterdam/asc-ui","version":"0.26.2-alpha.36","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.2-alpha.36","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"665c65e7f1ac0142bcec5e212b3fc5317e00c3e1","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.2-alpha.36.tgz","fileCount":2443,"integrity":"sha512-OHfIvzpJWjOpq+9pHqxAd0LQp9Qcb+/zJSa0KSyXbp2i4jGLdqigNOLtycSYkiCPQyuHMu0SSry2pOgWEe9lOg==","signatures":[{"sig":"MEUCIEXxGTXsJ3SDTZs3z7HuD8/8gzWzjgDzpALef8UG/GIqAiEA9m8KY8Zq99LRnaRc1j7TZ7B33W5yOT4CTQv9RnXsiQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvURzCRA9TVsSAnZWagAA3uQP/2GJsZj1luzVbR/hDm6F\nRIdW6/PdF04eQTJ8SQsqbVPxfbjYA2uF4yZnBJgjZrLifRIX35GyYDXoEjI9\nT2FiSPTh0chllgN3E2nQqlnzKFk78FoV+4xdTIuPw448x2/QZXsJl+2fKxUq\n/empTsr94jpiFeFPLgds1vFq/TNmuVAl9mS4Zs2qetxtCO53IHQfEQ1X6qBj\n367Gxl45EysiJg7rWK9srTLAGxul3LLe0oetMbjr9P62+Y2nc0dSYPnhkhcu\nyGgQkyNq8vZlJkVc4djwzL/PJCX/M6SztkdUJ4bq879bC9bRLh9/V7Avngo3\nLIYIINFe/n62T2ahpnhJBb715XAgnjmAbNHNWfPe0Q0JIwpwr67DhhYf+38C\ntMf1ZNwrjEIhDSj1Lhq9UxE/kjhxKIQkLqDXB+M1hpIlV5bDYO+sWcBMUeat\ntb6xmo1ydD04bobNu9ANL/NViJB/AvsFDeUzXgP/9UJqQBjzND8eNwHwFly3\nZH0LKWyWcEeyKy5hMxTrNd1Ut4Gvze5L8i9p/V32hN0qL+N+Yg4wUoqUyWKy\n/c3/W7pXrqW2Y+4Vj7MucWeBm8GwM6YoupUVfdpoFTT6zjpxB+hmk/UjUTJw\n5N/Kk10uCtT3rF4UYF9C6PS/acwy4uL41JjjgkRWvN2wyIydmSvPK86lqMKt\n/un8\r\n=yeH8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"ba61aa33c1f8303128ce1d0db286c50fc238ce30","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.2-alpha.36_1606239346740_0.024588734669223067","host":"s3://npm-registry-packages"}},"0.26.2-alpha.45":{"name":"@amsterdam/asc-ui","version":"0.26.2-alpha.45","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.2-alpha.45","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"f4d9d3b042483c926232ba53a2c5045652a7938a","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.2-alpha.45.tgz","fileCount":2443,"integrity":"sha512-MrdJKtnXo8wDBxBdp1MGF6++ZQDwHvRpmbfi7kuZh/irD4mE0TopvRthPdRvAIfBNCkWYsNnvL1CKCIYuEeDrQ==","signatures":[{"sig":"MEYCIQC+lMqVA13D6BC1eW4yf2vPaw3cVEqEg/fOB2EWXUhXagIhAOowZMCMvrX/LWQKALOPj6RP6MOjHcOvytnuAaXwubPU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1950590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvkSDCRA9TVsSAnZWagAA7Z0P/3lTdRWuV51O4wX4vYpC\nP0V+q6JaeoWP4I/YirA5WjSPclPMchC4cTOCJrhT7ytkX1qaXHHxByRJs7WK\nDxIVG2uxlXM0jSStiZfwuogmHJ4IfEqRm7LF84DsYTKLpAG56V9ch5fhYIw2\nyza0n9GNUkjaMJQxFb7b/w0gVLAMuBJNfquZuyjgIQOGA89//J63cvGaiHAC\nxV0Vx2EKrrgM7sdvlaB/m/rpVQxiGhY89nstQGZC+PKVTKKCxds2zUB08jjk\nROOgBovdsaIBKQnwBwRge9J3Tr5Hf6WcYZ6S/aBtrcr4XWZdrFuWV7+A2GhU\nfGZoSMlOr6CZ1A8HRS7+swphtWFa7N8ezRtMC3htRSP7DeFKKG7/G3xvRM72\nCB5SdkGFUjmImFRrdEDUG1rOYbJDaLs+o/LgvmviKOM66HEaM7KCkZZWd8yM\nbyy4atTPGwFBQAHp81tTpb3DmFwqcrsfsD1FAYNlJWj5AtBrDiLrSQXgJZYX\nyXafdHbXwflfH9C/vxrgB9csX32wlFKwbnr2/IKB1D8el6QppgbkILDYpHbX\nsxusbNL2OmZNuRr321EHEiIyXpTrMDvcLCnIZYEPI8oyLAa3YRv6z8uUzWyj\nbggtUE0YRB0sLQS6GWo+2gNw36PgYi4FZ+ORX9B4MXF7xKLpk0fRxpLbokWC\n0S8F\r\n=rIy7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"0746a7b0db30636cb6889df746c5e6c0d251ff99","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.2-alpha.45_1606304899175_0.6776730434341565","host":"s3://npm-registry-packages"}},"0.26.2-alpha.46":{"name":"@amsterdam/asc-ui","version":"0.26.2-alpha.46","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.2-alpha.46","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"2e734770acf856ec459deeded9985cbb1875b1f3","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.2-alpha.46.tgz","fileCount":2443,"integrity":"sha512-kKU2qGpHoogrC2c9k+X5ejvXyTzgHrJq/yC+LN5SFcEuKtN0yqrEuGVE2ORusswH3njhPg4KDy0T7WwmKvmYvQ==","signatures":[{"sig":"MEQCIGfIB7SwE2/4iDXZXfb0oj0nD0FlwNgfm6o7r44UjOgvAiBl3wkVKzr/ORkf3UqzfvI9doF+Hxt/fFTiToNBrhiO1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1951748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvmndCRA9TVsSAnZWagAApZEP/jXklr0ceKwFFC4FcAJ8\noOUcAlyB4fArN+0DOmkK1/FdZbRWta4mkDM8MAr+fe2YkrrHyFyKWnDVwIwi\ntrTiyIuvyQ/h3tK6wQQksUxaSRhKzA1Al4TA8aiK1M6xBp0RCCG2jvH8G/eU\nuK3OXxz71Nkvc3MK/M0A3/d398iVgdJFhmhYcysffIgr9hP612BgxJB1ftgF\nSVCM0uNCjNTfPw85hfsqwZI3ecSPC4Yzyv8s+mqJZ3rt8b0KMIGY3+nDia9g\nqjKWYfMZNiWvaY24f5+Ctky5K+1c73GuPwIJ0neRKz+OGpCX1sjIhB3aHrfp\nmwffioxbKynkjoVTcIa05qTvc7awdk30Mx25SKj8rWNZIOgmuvsdOyCCBtpD\nY9lrY4aDIJZD6QoLpCU+PYa+824Uz8GN84/XPst887nPIaR7IhS4Lz5mk0uR\ndg9coxrCMEukkWcpr1hjp3RMluPlrde0qz31WGFwlbBkoxEtmArYipfi8vUE\nT85yX4w4amdBqCdSMf6t8Q4j0mu8gW6b/5GX33QXD3QqZgmF5LpVmZGhqn5e\nz6Kx4gu8UCgJjvFZZq1+gtrWSzymwg70sVjdgLvTYcV/cU3khLlG1YITGspW\n4sIlDhARg6dHZEa+sZZymvCHK1gx9kVmzByb7H4nhDCH34lEEDE3xZXweWo6\ndLSM\r\n=PNma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"42f3aa1e28f85f6d56af97d5c1ea64dac41261b6","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.2-alpha.46_1606314460946_0.5477253891262528","host":"s3://npm-registry-packages"}},"0.26.2-alpha.72":{"name":"@amsterdam/asc-ui","version":"0.26.2-alpha.72","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.2-alpha.72","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"719476876f8e556abcf8805187067dc36b901630","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.2-alpha.72.tgz","fileCount":2443,"integrity":"sha512-i7ewb1jG5J6lcwn8WJLDyoFZjZTqLMJ6sIm7jda6Cadi+JoC52jYbZHSC3bvsoCN+ZI7M8IS1YfWq2a892biwQ==","signatures":[{"sig":"MEYCIQDCD7qgVRXivaXUZXMyoqC8jPhV0YvsbflSVyiTRwQEMQIhALeRGDrhfVVtiHro+mMVrVl6T+H2tUx7z+d4LzInlbmm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx2wFCRA9TVsSAnZWagAA2k8QAIlvjPLLu6WWkZXOc1RX\nBZKkLXBvR/XU2mgqw5O4HvdrIGSvtb35pEX1vZwMAv1W5foCN84A2gfYZ/v/\n0/USPYDqBwIL2xqN7AFt37ifvZZCh/cfzGn1yzHP6/m2QQz0A7YI1eBUNqTE\nM3UXFs/Jclp9OKwtHzj+tIgaqG0TnKaV/XDIaAS61qlUe9dpbkEqux3eYWvl\nhvUQVsdrIyhJC1m8uehgfoVLCcC8AnftTr+XhNdfHNewplZ4v8Bq+QZS5jtu\nmR0LXvO3InJWy1nSrgjFKRZFPg1fsONrsWCsrxKWSdAClCfNNkHNlgmJr2hm\nhP3R2yTL1o9e2RlZCysTdSHmDkYvruU896x3/U4ZfMJ4tD7b/eiyds+Tzk7H\n1PgJIgQ9jaEXnWp0BJu/KMo4GJ3O56VfY92ZAOZF7SuKleZA94JyjvpZ5IGa\nNy2VuJnCcMc2G5SBChBJxwmSrSayqg7WmMxIzpO4gBh8nq9yex9lMj2+65Mx\nowsWoTx7Uat8/EydCVx7NLxF4yZ6bdypvpbbmXlpf5p0ZlyHhq7kjN2hFHe/\nTqoWLZuTekcgDPKLZE8KYjpmINVD+lM0gyoJtgdoMlaiup9vWuATUH41FavZ\nRyp9HCHsvDbKihLt5S8ibzGp20iHo3S5vy+AkTlsCY6QQ5cZjdQeeEgZlb1M\nAtuj\r\n=nLyj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"05cb81d5491f4f5ea5255408511eb9af1d73d0fb","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.2-alpha.72_1606904837071_0.9563600060419708","host":"s3://npm-registry-packages"}},"0.26.2-alpha.73":{"name":"@amsterdam/asc-ui","version":"0.26.2-alpha.73","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.2-alpha.73","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"c27a5320863f726af22a7bb4ea282b32aa44211d","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.2-alpha.73.tgz","fileCount":2443,"integrity":"sha512-7HLAoMDG+u+bFQIC/+fQ6AvDko87z1TJ/1DO+YzrAkxs6OoAZGE7JjB+0iwfntkrjZuhOabyRe1caRA0KzeXbQ==","signatures":[{"sig":"MEUCIQCDfhTX7SyVIL7XyG53PATSnbE+vJaPN7QIJfzoKDfBuwIgQkNQqVFdikDklKWVsHD3+L5M3nk8M2xtmKQORo0zHDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx3wACRA9TVsSAnZWagAAADMQAJlyHVMpdYJFXRfQ7b8a\nIYSz5gc9J8EIXjx455hFk+RuuhqTd08WdQL35W8T0I6r5nDaWINUIVay2Yry\nvkHhySzVNNmTPJFEEFLBBkwou4OILkEZOkjEpGEAPHAhlK1lvvFEG+BN4WcJ\nJXwVU2XnbwTdaPvEqtuYl7YM84X7YX4qkZRNZ6qF2BKeujMAJuRG5mFyhMzt\nWotya1iYSjzYcRwYbtfBZicnM8tujE4hXTNI3+mvZaTm6tSs+CxlK2QEtZY5\nQUTblL9CqRqCwl38rLorTPKRTkDRfwyLL7cGHsLnytBDyR8Kx5I1guIShJqJ\nGkdSt3aGJa0OopL1zKkGQwY3uZn9wyt1c3rGnJ2xFKBRrZeanTNVnka833YA\nSgCTinSbN/7vul0AG+FmqRufCghztc4JeEeR908N8Ca5QVGOwC2lJfdXojti\nk+H89f/wz142Ij6l/YG/u7FcFKI7mO2VKjakA/liv1Ekj0V3tyc5LWJurWBs\n/yOkx59+jF4xttcWfzDKJxQbIXD42QYgKTjJGf1v4LppjZe/R9bhxniXN3ji\ndCbaama0jnyS7sGkKf16L7+Zw3XbDuHBJmclV5VwiB8wVaAZPFyw0gIGKXjU\nxd0Dn6zok9Gew8gxswtavG+nnlUFIpyWN8V67d9CO3h7uK/+GuMlSdfnpNJS\nG7Ns\r\n=rktl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"d20476aa6c2cf3bac952b53ad9bb5f6ea21dcd1b","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.2-alpha.73_1606908928135_0.6127182357673422","host":"s3://npm-registry-packages"}},"0.26.2-alpha.0":{"name":"@amsterdam/asc-ui","version":"0.26.2-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.2-alpha.0","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"5a530352180ac78468a8c9fa7841bb60081b1ce3","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.2-alpha.0.tgz","fileCount":2443,"integrity":"sha512-LDX3cUH32HQ6DBJ1dn4p/qh7doD4Ju5iWYVZdr6oKopru9pcDv90G758MWQ5YvhTWnpn1cIq3uxGgzwYU9ojbA==","signatures":[{"sig":"MEUCIQCscFQUDW3s4F3OXKBEAvS/j7MfBFidkoZwooj7kyvqEgIgdPbiH0A+SFxIZHkKbw0P2aJ3ueb+4Y2qenEUbqFffGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfziC7CRA9TVsSAnZWagAAgHUP/33fx3r/oeNZHiMy+5RJ\n+MwXayXKnMrdf26f4S04W3FXs6tyVnb6fPOaxwwkdSucCJr93bk7jXE0cEby\nzpvknL3/FC2ggEa2b1z0P9j830PYCL6A5jMugyneubnwpdITXisgmBZnYL3U\nJLVqoCqDiWVnJSaPWtLM5aVHwK2/ljj7cM6yvxHWsQHiw5LQiZKO38KUA5GQ\njEEmLCGe/aQ4sR14UoMs9ssSmKdSONgy0SL9FPZno3u7w3oJu5aiN45QG30c\ndnawx18QgxjtN9emsUT7RAtvrW3MH9fcefsjjQuChWbuv4a+5bo9/RXQOYnR\nDqJqfOgK8o+THQv+1q4/77En0F/4IoWMDCGGWx/OOozt1iUfAon+seQfHcO6\niUVCu9znaXP+jdupfYJnAP+lQvEN8mMzpU/KALtY4ASgRZX/xEdPUbDYKmiJ\nJFN5KfXX7yBNX8HHg8aMfF1868N4fFn9RKZEdoKa8U6jpoV0zQX7wUxwY/9s\nRYydAwdGL6UxFAlEjZXeBhkoP3+iAbAomE5HQk4ldVnjV5xX2+X6wQ5WuE59\nYhmzj9hp4rQSu6Na8LSI+xfESwnpRuNZFacUdaQ98IGGnkojjH7AVW/539FC\nS1VgGSJGQFdnkCFL1QLmsxErXpdKKyMwfyNqKTwMBGs8aYtKMkFxWSDjkLdw\ne26/\r\n=G3V1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"c1bb64cf19163ce53d513b520c06ce03f8d0d1f6","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.1+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.1","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.2-alpha.0+c1bb64c"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.2-alpha.0_1607344314865_0.13909653987803772","host":"s3://npm-registry-packages"}},"0.26.2":{"name":"@amsterdam/asc-ui","version":"0.26.2","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.2","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"edf6b6ba188bbcb3bc0894265253a30bf7c33c69","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.2.tgz","fileCount":2443,"integrity":"sha512-DIFFMkOTM9PZT0WfXGwLv68xEA95NgAqXeiX8//E53eXdTCjIrSaIlugLO70g+BtK2gPgHDxdw69qgxMsWxwyA==","signatures":[{"sig":"MEQCIEGzjCheKDbgmUYtIMW4bjSMux6YZL/4yqePYcvjYJOvAiBkTIY01qOY8qA4kNI7nUa7C2pQ/zuWimOCx3Udjzk92g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzkxqCRA9TVsSAnZWagAAiYIQAKO8/tQOVAzMwPr6RdJD\n1V8LmzsHbIeFz50h00aGVgQdXiaXYYU/WGgR/YEvDbIFzK4LMET2wecz7EhS\nifjJvlqRGCaroyKnStoXGVt3XVqLoe7vfGnS3BMJFYZWXMgKtZHG7VlFUD0f\no5AUQCHawLv/bp5rkBLrps+3HSil3O5msar5zTx6W2RgvCO8zkjRDaZXdSLY\n9Vat0aOLka861hxbZUtsfC0VbbTZifMnQwsamwn7jjbNpHRBLRKINUQnjsH6\nJf6VXJJ7NNNLJP/JN4oBkpZ4DnhbG5h8Ud6Fi3dopQgAq1kPPEaI5H53VbVR\nZSDWtXal5G3TAtNSLivy/CslV+rtLMx5ybRxSurtgLv2VEBU9zUjyGwePExs\nbzLYl9ZJ/OIWlt8qtvGtMquFC58qpzHSt9hnNqwuf9qqci7APO7U9h0uRgtF\nwUN1rQxIQPqGx5Fr1/YrQezJRnBDAdjk+wF7QAUcSKCPq10gj/DW4JOpEQQ4\nb0mNSF0RxqngHI6r3bAPRTywzEIed/WmNlReu0wvkSOstQO3eRbAAqgBgRhM\nH2cLt72ZO82k4AVlQlBWS/U7+Q1wWK38+qGTInzAb1PnZtG/pPZleni4R8Po\nCyB80G6i82zLN7paMx53/smCgxlzm9vqQ1WSeUM2jB7oR7MvnXY2uvxp9Xwl\nYc/S\r\n=2jeq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"c0608d759fec760d49c9ca632ddf8de8b4c23756","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.1+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.1","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.2_1607355497922_0.2997559020985854","host":"s3://npm-registry-packages"}},"0.26.3-alpha.0":{"name":"@amsterdam/asc-ui","version":"0.26.3-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.26.3-alpha.0","maintainers":[{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"c86da3634e346ca1454621f49764f83c1d85f2b3","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.26.3-alpha.0.tgz","fileCount":2443,"integrity":"sha512-s8KvaC5fAF4BwAzzXtzkf4+hiiYEPQH+0J88DT4iHvO2YRQjmTPQCAojOco8pmJwDZGb5ZFIKO268NQDfzeXoA==","signatures":[{"sig":"MEUCIQCpVYWasIhNE6DpRl7r3P+qfBsxIfa36YcKqAhiKSRLYQIgQdR05BuM2JXbRjKvnfH2tvNteTtEvRuR5AIwHBEIZnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1953414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzk0YCRA9TVsSAnZWagAA80IP/31hm2h7A2Ebd/xkMcog\n65Q0oJSzuLxVAdi6kV2AH+dX4UpzTewnDWmtIy5BJCumKsA6DLWASueRacsi\nf5vmaQNnSOohv+Ojnr8ym3IG/iUrczCHVazWL398VJGtnydj8+G9iO8KdZMM\nnLwHbvNhAa7W/sjTbvtGw+Rqssm23BpASoisFUTTVVd+Z9yBkRnQtve5IDbN\nUm9u+use94SOaJB4nTy7fV9clu1148fODn6hJ5SyTUUpfKsrybHoNw3pMdFk\nBefvI7RRazY83azigig/X7WfjBzzPWLmLr5a7K7l9/vYQo0+oPhRicSNSSww\nobf3QykqBGXnzaQP0GB2Y4ZtaFPGr4c+WZDvlykFxUxSnHSAEjVWhD5ABUxx\n2++UWil63S/dzDqJfxesSem484YqEbj8hwTv/czuQ26HXopK3FnUb+wclqLh\nB4d1lv8i+fg1/B24v5BrKx4eRduSTNu5ZtMmdCkGJJjTr0HzT//tT6IR4UPV\n1jTrjXdeVgkblEyhttL7gW5eti2hzS9KZ81G+pPNK+cH5omcixK06X/gwLtv\nS7dkv/t8SqHP5kLeT63YewiLwqWsouCXknKDwMigdLv34BnO5bC5Z6rQxXKm\nqvTb8FWt+7a0bZKc1YQ/Hs9dAJmxjlyhSuTfsofdReLMyDMZLtXABMKTO6gr\nRW6J\r\n=JiAK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"c0608d759fec760d49c9ca632ddf8de8b4c23756","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.1+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.1","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.26.3-alpha.0+c0608d7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":">=16.8.6","react-dom":">=16.8.6","styled-components":">=4.4.1"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.26.3-alpha.0_1607355671649_0.7304579709532897","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@amsterdam/asc-ui","version":"0.27.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.0","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"b545df98e9cc6c59f918a2a484515dd74b14214c","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.0.tgz","fileCount":2443,"integrity":"sha512-vfNSxWPqH+22w03SYpsqT7aVrSykBd03xW6oGu8Rl7Q3I9YXPTc5C1Vp7HezgU+L1vHG01NVaPRCjm8orfaEmg==","signatures":[{"sig":"MEYCIQCzo12kFbLLf54YPhSNk+zJG+W9dhlPNdBFg5/rAf4kdQIhAKmzzPvJhIGhwXs5dIoKcD99XTMn/RBAxda16lOZeqmw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf5HMqCRA9TVsSAnZWagAAEhkQAJdNA4cgMuiztpelOutu\nk0E7pzPpZCEvnxIpqYrvctRRibUGMXFgPGFocLroAyC/cwdfTHQgs5idHWih\nPIc7mLaHJajYLE7qJXcnt2kIq2yjXcIqucuAhkcnh204b6lfaGiITc+TQaOL\nps0NcZqjyAD7p4SUm9uQXcWats2y6o8OShNALjzSEPxMNt94cYuDkVhHFLJP\nP837hdRmiIwxaEEhUr7PHpWwNogKh9staTz7bCR5oQ++Nn1JMbQAhDe8EOpf\nx3OlmqaSmuR95vMNGpS6Ae1i9KwCcDPV9v8amfue1NRIWzaHIerCSAZiVNNH\nNpTX9JDnZDA8udlgzfcfQEgzs4plwX+p5oCKG9QjdI112byedSA1Wyhgwvun\nqBgGigq7yiSinkkV63RCBN1wmho/XCrgRJFStahbIKEMxJnfE8C+DslQmy1w\nkeKIYfCthBhsUrXR9PTVrClXf9v6BoBpQjah4Q2nSq+SFpxx/VVMbVs1HFVr\nRe4vx3PIYJTSS3aLYkmRfKrdTIiO31xbismzJelq6NxPJ4JV/IOz9mZBdzcE\nNQtiZ4bu+AIv+PYbEh1TBVLzOhnm3dgoksGDz5ENQcPqFxlSBnlRQgZIkqRZ\nZNl2A2vz69Ag92t/3lJVnbKLr539zWh9AkS+MeR16uK74JpLOmlQQZwJllzA\nHlL1\r\n=HJXp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"8221f189fc2de14f9d354d83f3c14fa3c5049174","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.3+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.3","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.0_1608807209742_0.2081392366980488","host":"s3://npm-registry-packages"}},"0.27.1-alpha.0":{"name":"@amsterdam/asc-ui","version":"0.27.1-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.1-alpha.0","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"npm@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"d656c81aa5e1412d38ea44f588c63972af7cfc05","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.1-alpha.0.tgz","fileCount":2443,"integrity":"sha512-htwZNN0wzzeOlp/UQpzePxLkXNeeERR5tN2lwUU0C+kTDFBpJh/CvLxq5fmm13Qyq5QpMDorbMSSWu8pWicLJw==","signatures":[{"sig":"MEUCIH3BZhDlTAyq9+RygRJO66NtEmekUkDoG+3V7AL4rxO0AiEAhrQ5B0lR7uWTv3IPwK1aOReNexKH0SieQbDjVpm6uHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1954834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf5HOzCRA9TVsSAnZWagAAxUEQAI4PPlcxH5em31q+RRmK\n8thZDIIiBLzfE6FOnnpL/iz9uuoFz0hr3ikGkLm51HiVM1eR5KCBEPqzc/N2\npPdQunxjlwjIZcrMoxguO01xCtrf+MK2ejvJP6pYCr6YR2f8Z5+Wjcvaj8Kg\nb7o2mx3gI+T9BDutMcapsAyiF5Nnr5sSuua1CFHm1RlnEt2gKzPgEN8tuBq9\nyymtoVAv27MYqYFkZ8ScyvZzT5ewSD20pOvEqpcrZjtTDpGyAwLrIRG9TYwv\nysC/lQofEtUbBWdfPJNY1kZfR6tXFYsoY5Piq+7GIqvMKmoGry2ghN0ndYhO\n2Jo7PgPWU/twc8R7uJgc4GykCXKGe7HNGaIUP0VWfY5bLNrEQLoIMVcsv/P0\n/3ejwiiisIg9fFJ0Ef9gNoGR8bc6+3A8G/yfE1oF7XwJR44Df4UWJ/YaD//4\nn6KLRqvGglU7q43UKnfhYvD0RUYnifBXtPBkdTuxOsb/qUkLugELo5+25jRI\nCP1R47ow2cTh6nq353ltfDvrQiY3+Injdap08TWWHDOxGY9rAixff4X278ur\nUjAp3YPbw+ap16V3bwAiOEfEzUd4KFn4vd22ZjmfHBziLSvxEKY59Dw0TmPc\nY9Y7+hDVz5neYdkgm7zJSexGY8D1oeDEZHkoJvlSfk+fT2+fxBtVOU9tHTzF\n7J7l\r\n=oCJl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"8221f189fc2de14f9d354d83f3c14fa3c5049174","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.1+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.1","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.27.1-alpha.0+8221f18"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.1-alpha.0_1608807346495_0.5192765824413152","host":"s3://npm-registry-packages"}},"0.27.1-alpha.58":{"name":"@amsterdam/asc-ui","version":"0.27.1-alpha.58","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.1-alpha.58","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"f695b2deba85c3ba59de5f3b753a6c44dcd4e751","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.1-alpha.58.tgz","fileCount":2427,"integrity":"sha512-i2iHpyJuoOYlE4AaOhiHRHTveHjN/3V+Z7wpWmwH2PR+fAl7n2Jt65DbTgjMQPisE3dFlBU7H8tDlOKCIpHG9w==","signatures":[{"sig":"MEQCIGuRspwgPoeqq9YNQGFCWVsQJ2UJYWn1bCIFV7pWgpvtAiBtfGGTLDlYwAr//YXM6LdbtzN/fiuMooJx3WeVf+2Umw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1940369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOODqCRA9TVsSAnZWagAAAW4P/0cJYPTH7iJrmnE3+Xmy\nvZyM0Jb+r6im+tbHetjNLgxdB8fgMnxUkZCSsJVREorv95RZqFYbWIylleP9\nDLauq3huMQTBkl6cOoH40p5ppOJB4DxAunN1oPScU/AXoPR/jPitChYVrLxR\nHduic5RF0osKZn9AiUVRaUCFI0tHC5p8hEOZDsdoge7sV1vfqyLsprF9O7sa\nqtFecWdQnpOejMTbzqvb60ZFHDFUTf5DjGCLdataLIvEcOq333UGtoz+5NdU\n8aJSM2yJL21TZddjYhJkTQ94XM6xaYmupvHFFk1dGCnh9yJElKnjYo5SfYtB\nXffiOqZli9PlTxx2eQGm1w0aEiuX0iBLmL/peV6B7kYK8lWYxkiCe699j3qb\nc2HQo5c3dYL8gYdBHJjAHkm1bWfDZ+she2UG2oUf+Wh+JkDGutFUGXaSixR3\nraiuZxU1WnIKan3TxdLOOLhJHiAcLcE3jpey3RL/sxAi/LDFp4nXFHzcS7jQ\npB6e4htb6Vtl25BI5PM7JymgsOJCUA7XuAUXoS8D59AJvsuomnuQlZKHIVkz\nOa5vhYPgg2MfnhytZsi0zyTK36DUU9qi0GdvPLPjcBAITNLQLH3RzwgG//0O\nx0QapMwI6SQ0Qn2kHM0rutXMhJYZtM4wsFwpG2s3nOO9NKcBrNsymT2bAapR\n7ju/\r\n=sFdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"e76f8242a7766f0827420e83140df7b1e84ba137","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.5+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.5","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.1-alpha.58_1614340329660_0.5063848585992401","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@amsterdam/asc-ui","version":"0.28.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.28.0","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"1b0576f3b5f2bbbedaef596f52ee5b922c87e30d","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.28.0.tgz","fileCount":2439,"integrity":"sha512-9268lWQtNMkoQ3EanrHeAwB7WfOIUO8ba20nAM1R0mGwJ6/ZKD1hpPfsLckecCAZlR0NmcN9aTRoiyaf9LGxOg==","signatures":[{"sig":"MEYCIQDnPoC2BXfPCni3ZJQ+1s28gbz2frCkLhSxobbIzu37wQIhAIi4EQjQvvodX568taf7d0miwycfNo6Be34/p6ZWFBaX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1948580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOOO+CRA9TVsSAnZWagAAV50P+QAZw106MZb4u7oWCSVE\n6IlMCAJVRu5DwZkWs3zC0F9K/9RWsA2GqgrMmwgycKlq0TA8XRMU9fpumtZN\n3P61Xm4Tg/OBqt3itQ7HdbjwdItTsbkTVq5MjX7mIpv3p18QoVp0m3nhiGqp\nhIsD62Z1Ukl/IMu3Vg/H0JkmS9FWHXkgByRdw/th+JPTZjMXxmUCZA/ufE9L\ndxj+70yxYarhSu6uM81DiiA8QohiNF8lZEDSBvYa11khi2w0apIqNNJ+Rw3I\nIaiyHGCyzwtQFtx6s2jnlNZVFdQE9E7vWfgLrvg2zxFA4w43ihH2UrJbQiUV\nYBvpHH42nIgeo/i350FwxcrVGsmbEP2AfeiguQOMXBV/+oW4SZQiwEXAWGur\n9WHbAeYuGwxFSijmLJptwUWuBFUHyqeN7YfW4Ay+ErnCx8vt3txNxpWKisou\nuCNvHOZ2y0fQcdP8rx9TuWciTVtAMG8hIs/yNffnOiRPgmIrxcjbSPPykkv1\nDa5WmlAqy3FXK0RJ9zCMvjOX5Ate4hbv9OJESIXJeDovRWbecjkIOHHX8FVc\nUPoLl106R8im7j7SkzmjgK1ER89GahUpu79DvT1X6Ko279IwknGH2/OO9ukV\nqfCNykz0osYva4dGi7rrhc6jXIUlhbhbMUSU0TrAZ9s65DJt6q5Pb462rdVD\nRj/d\r\n=2rCt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"d20aa54824412107d762227e9663c07e22a333d8","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.4+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.4","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.28.0_1614341054012_0.25584694737703706","host":"s3://npm-registry-packages"}},"0.27.1-alpha.60":{"name":"@amsterdam/asc-ui","version":"0.27.1-alpha.60","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.1-alpha.60","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"e7d006f0a9f2e8b474bfe56cafe3789330fc378c","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.1-alpha.60.tgz","fileCount":2427,"integrity":"sha512-4RzgcVRF/PdzYTqkxmxaVY3Brs1f9+vaKj65Wa678Lbrv4SXqiRuE5mA+SWDBj8dpGQhryV1dLzwqgqIp08Wfw==","signatures":[{"sig":"MEQCIBSJsj/Dlx2N10gXWsxCYk0AUXvVEYzBBEcZrn/jHq18AiBS8c5EMGv4NXcJ3KAstMx+DSBDsNayr2wzosSr0C/z5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1940387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOOTnCRA9TVsSAnZWagAASvoP/iFjZDCWcqEi+PcrC8od\nC4Rcrc8m01ZdVtLrVQ6sn4T2rr/XTdPD6qx8pIQBirPDqRC0Z6cjo3UeEdOr\nxgDrFydGxmesEOK6TaVfjrgVccgDZSZAWPA44+Rqc5yFpK1vJgOpqs4/RKo8\nNOqCD+pP7t03msAwSZy3rP5XRp470GMtZAf1oZYZ+4dJKd4hgUwue73Xeh4r\nuEjTOXRYkQFdBktiu1QescJQ7sK2TauHsLqVeasYpRcizNVdoyCmfpe3flo/\nqD2wTi+1813ZG8IiONk9rd4tQkFY6d6pfJOHkYCH9C6nUwKjtpiMbyq/jsuO\ntNQsCsO04cCGof+F1QI9watkvUEMQpwR4635DgPUbrLL0v5AChf61jeGEKys\npTdXXntBdSMap7QufM0yGeX1FZ3oXB0fvRXqwZqvZJVpXJMAszsO1Pmeou7p\nJNgRGJh4kYZJI1FnBCQKCKIADhdcjSbBi7phS/2Zbh+2L9+EbqlCxOX4TFoO\nnnX4Ts0EBDu7iL4ll/LOageoK0ypbcCbLP5NY4XeaKagMByhdCUIZbbbJIL4\nn0xRyFsq6PtpyKf9s0f6uSgoCSkkJU18SGm/FJe8ESF2odJrhY//EWoRIx2x\nYXLqlATmVyq+G+QRFcIaTNiPs+CUtZpYe8QVc/86rtA0Ym5247SACxB1KuRS\nN7xS\r\n=PPlL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"61ea21f9a7917ac27d66b0576360b82bc357010b","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.5+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.5","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.27.1-alpha.60+61ea21f9"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.1-alpha.60_1614341351534_0.7681792742323235","host":"s3://npm-registry-packages"}},"0.27.1-alpha.70":{"name":"@amsterdam/asc-ui","version":"0.27.1-alpha.70","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.1-alpha.70","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"201b3504628bb4b78fcf4390150bf6b4e5a744c0","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.1-alpha.70.tgz","fileCount":2427,"integrity":"sha512-aAN+vji12h7FVZ/xByLIqjxjlkm1RgTnN9X1UBsSHVh0f9mImc9LeAM2/UczEw/d5lR1Vx680l7I8efso2BIPA==","signatures":[{"sig":"MEYCIQCvCBowu67yr6umTF2SezRIzXNjDhrDyPUofe25DV1VxQIhAOI2m8cLQepf9khnQAHo/jCrCyjPqzVMbwUFPeFesa3l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP2E7CRA9TVsSAnZWagAA+lUQAInX9rZOSE/TOTW3AWiC\n25mJ0yQ5aOTB41N7uEEoKpLAV80d0USXkDSS6MeBfGUSKe7Yldi8GII+L/9P\nOhIrfPs1gU0cFqidIzaDj+zOT2NTZ5tV31uGossl1SWApGhOGiNT57v9d+KQ\n2ukPE/eCoHvGFgZOrMsedlXSDka0E51kvD2wrOlcY9kc4mPf8Swo0Tg0lPF/\njdve6anPnaP4KizxhasesmFxUaY0FqCChqd/M0GNE75huH6n0TUiGTTKquls\nMvLGPY+M2g9YcTMwsKHHjpBivmoH7wzpBLG8drSJQJaCEqrE1uaXfRlS7DXc\nkQ+auGl/QHSuIsIOLkgC6lQMyj3EPMl138B+21lQJ72mtrVIn9ykGW196lI1\nHmXpDDiPu0bcRNf3O1EV1InlcrHfFSS/qjLrUyEywmdnNa1cdUrEBiCjlzXn\nRlSKhRENSLak6tjQunRf3Mgh93zuU31IDiO1kSNjZQ6yPBTXU/21NE0rR8li\nAcY+9iYF61DHqBrJHDdjgS8fZbRRlDeA6F4P5UCaSro/J04NsK/dbtFMp8f2\nHbvBLkP98+DkCs43hGh/tO7wij24pyibeqRjPekGpUrJcUQf3E5qqzODmiA3\nJvxNGDlihmgo453qMmqYpE2r1Xglv2TF0CNQufknB3WjVhx9AjoIoJw/uq4R\nHcTj\r\n=2mFB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"0ebd0368c86a3087d996af40d4aa433b045941f1","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.15.5+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.5","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.1-alpha.70_1614766394653_0.4085140436220618","host":"s3://npm-registry-packages"}},"0.27.1-alpha.77":{"name":"@amsterdam/asc-ui","version":"0.27.1-alpha.77","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.1-alpha.77","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"2bef56df9d75d37adf219d320c50adde0782203a","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.1-alpha.77.tgz","fileCount":2427,"integrity":"sha512-w1QL1H8TT/f/5bCtGfGo1/tsFD+0QOPTlnc26p4by8OHLywxHSBba7wy5RKEDIJtjeYnBrSl+5m/x22wB+nMFw==","signatures":[{"sig":"MEUCIQDYRCArPQOpJ0soOwhBIhnTqraFqvdFld8mflAUCkClvgIgGVezoop57aH560RWh8C9NXx4vQWUjfgGWXY54dxaQ/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1941608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR0iLCRA9TVsSAnZWagAAMfsP/2hezcp0Cu60jQdTQAU+\nph6VchvPTM7KTiWrOzQhv4g8T6nLMjUbQIHdZUyJ4jf+71PTyM0Tj/Nb0ce8\naVlotVWc9M7X1LN1GSmIxIRaLGtfzRSqce0YP/2TZ23QMGeXWNnTQHoHn5Tr\nb7wnAzPjWZsGuBStWf+Q1J/knUPX064qJ4DwHXB0+V0hetTd4V7FePyvJDYF\nQouoblwWikq02GDnWgao4CU0huNzkIW7c+Wqk2zlGGpkOrARtnvI0suF4iOv\nZSOStX8R/zn4a+RD6VNjwI2LtsQhA0+1rzeDr5gjEIHCRZXwmUPodhOttQUm\nSdqL2/zemTtMuBG88sIEa66ZFZZslBd1lW3lfFxhIUqIblIfF42Fcwm0o8K1\ncXH9ahu2kjGvS7MRAwHkde7uW+ripb8YgXL4wrVtBc5G4FC7RNF+/4gbd2u5\n12q5umi0C9f0v0mpGRCp5P2XjB+x8rfENMAgOIBckf3ARAqzZiYjjldsaXBs\ncp2QWT4HPeoX5haNQtbergVZRBbtw2KfvSxYVME265RDB8zLPzJXN6e+JGEO\nU6MLfYem+5QTSkaKQV8xKvgDD3LwqiueeiOXPOhawN3/gWgnpfRN5XprqKaF\nIvIRs2upw+7U7OVmlo16wer+o7KScG/gPwb/f+5CsJlj0kXWmvUXQaOOy+YM\n4gY1\r\n=ajnA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"2748db3c4c56d9808eab68d165b79317ae6bf583","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.16.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.1-alpha.77_1615284363079_0.26942528227227314","host":"s3://npm-registry-packages"}},"0.27.1-alpha.79":{"name":"@amsterdam/asc-ui","version":"0.27.1-alpha.79","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.1-alpha.79","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"60808f4c62567cfcbb33f9afd6872f391d194dcd","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.1-alpha.79.tgz","fileCount":2427,"integrity":"sha512-xWRezlOlGOfeEuUEdvrGdoWS2rg3HiNDvdUt3Tkyx5UeNsT40cxcHU8dQxf6z7JSdNypUMAdDdx0Q8gB6bYC2w==","signatures":[{"sig":"MEYCIQDG+YitadkbuzDYgH27MiFmiqQLjIXyHn6BEYu5pj0lKAIhAPgHtFO0FNfdMQAJL1JdhuhRplsN+ZNHr9ZMGCeumDRs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1937124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSNkHCRA9TVsSAnZWagAAhyAP/0bdhs0lq+IuOet31B3a\nz/3XRzSrd8lBHY9uuc4Huv/BtwonLutm3HkutVvyn/Itao1h9MHJ0KQJdCAZ\nxmVFaL+nFQWRo/Tnl2DCMLxL+xjd9aUwztSewElQZKrElEHP2Kkcn0MP6Zy/\nXK/VX9yq3FnJ2QFfuDCzh0DLFui5KIB2MxrysBbW45Pu+9FcuUl4i8e1D8v0\n6HvT+dTyp3ZfB+BTVTDIPPt4GUrEJrTk0/qn9GN4YdBJEYkisiyxVH8j4t0m\nMS+tTepV9LagjVN4TyrVrsAC+dsQcdds0ZxynCFN9R+ZUfo2WZo40niET9jI\na72fhneZ0jPMKQ+Fqo45qRYhUj0sdQvAlE+/W0/1Pl7rdCA+4osdZ6eJQ7Yr\nP1s3rPIBXIYDHaw85tG5bvkRrrTax5b2Z01CGfE67K1SAwkJG02ic8K/ZXfl\nMu75SmTSUqHi5Qon61FUBvKreWhmwgzN64yRGVyQiL5Zd7x5+6n8vKkLSYyB\nTU4nQBNBFWH9uLC3yzjslc7iDkfNxoj+4wpV66OizhHSGEkNHBTvVvTcBQRc\nLtJ/EQt9H0XAxddzbrtc42a88OgwBM8xJ8RKo8tmBGHBVObLGsIQlh9Ma6nL\nZWyBE22jFwyPdBz0k9Z7+bOrIfeSFbiq9dS26hBlxwzTzK+P0sv2JHuszQUf\n3y8b\r\n=xzK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"43ca77742eb03d6b31e6be910c7b673a746bbfd8","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.16.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.1-alpha.79_1615386886467_0.41593809319239505","host":"s3://npm-registry-packages"}},"0.27.1-alpha.86":{"name":"@amsterdam/asc-ui","version":"0.27.1-alpha.86","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.1-alpha.86","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"c0a47bae607dc6116b62555afdfa8a409e506a4a","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.1-alpha.86.tgz","fileCount":2439,"integrity":"sha512-t3PwTv3ItQJfV+Ou5QmJeYfzNBlE084Pa8zpuBldBJgAyyV/y4DoMy2yo/MkgDHpvkxojx/8ismpoF4lmZrCSA==","signatures":[{"sig":"MEQCIA9S9YuTx9OrZ7DgksAHjcRQNHCum4VIztTzutgLC4abAiAh+O7apjsLr/xMcsC4MRbJXDmUbqD/hWGB1BQUYhESFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUHZJCRA9TVsSAnZWagAA3YUP/j2dobr/McmuomM+dDbj\nmCrGxk9IoyFiFzda5FRxi4qa0eeMnlfl7V8Yc92LJPLoJsl4yHH2wEuFbCwZ\nQHBvrALuipWkt3AftjaWISQweHm++2eZ6ef6dcLyJd5QuH+/7ahlBrCSXA2A\n6j14lYE6al3QicCgt3OR1D5VsErhbUXh17F33nJY6zC9Chb1s1Wo2QdV5FI/\nkfIwYAnSYp7SdW54Kk1qBMArnhch/EoLkLZGm86hiEwI2TfQQfZs68aRz+hz\nj43ncJkKxTYrUCJ8nwCH3Q/1+44KFAYHLAGTzZn+b7g+uWVEFvFA5ypd/QkD\nk9Dn4UEBJCBhsGZlDKjV6yjt6ESQFnlEd14dVhBlRjLJURiE3iIcqC+gEls5\njVgdZgHBpoUcRZu1RVIlxax3SmRUtg0tGGPlR3O7YBZ1aVAoQZwD3tMcczRN\nin/YpqO1+F331taePK8u/tcm3xJ2yXzRPklBPZ+ZEB6lFKwQRkOT6cwyXqUc\njZ6onPTLIRangUo0AithWWHXyg4NuZmVVGObxaFT+LnqqJ833FKDZnT9KqHp\nBv4SL5mvTJB0VmAwUC8DSWbe5B2AX35KR1HFPyPe4p3fOMEp29ZshAxtORmq\nEG97FJ+3hygsDHwRG0rubaWZINNt0bs+9Sy6qc94gGjd1WIHEiFfzgYK57uL\nAeFW\r\n=ztOk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"cc6b14647b3d5f422eb80914fa70b97f0c6375d7","typings":"lib/index.d.ts","_npmUser":{"name":"robinpiets","email":"robinpiets@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.5.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.5.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.1-alpha.86_1615885897207_0.7950175322350981","host":"s3://npm-registry-packages"}},"0.27.1-alpha.88":{"name":"@amsterdam/asc-ui","version":"0.27.1-alpha.88","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.27.1-alpha.88","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"ae9fb5bbae0e72f959eb1d004a20aeafa879eb53","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.27.1-alpha.88.tgz","fileCount":2439,"integrity":"sha512-vEE7jhh+BDXLOaK/QRs0759Vqaws3DvQ/OVfKxLSYdmNx1wTecIkKQdGuDmLMt5x4bE1id6jKoGsYHTWkZBH3w==","signatures":[{"sig":"MEQCIAgSJSN7Nvvg4NTrpqSYYWW2yA81t5N3IHUuM0H3nrZuAiBnn0QYxX+RNBIlbyg7GQ9cnSn7HjY0Wa4vJvrSjO5zTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUg4/CRA9TVsSAnZWagAAoLIP/2iMIsJrz45R4KnEEeWJ\nC50KaUByynTXqB56EMODbkqoWmjN2uvlUtFW+fb6HaZ+3KnM2tVkR7iwnfGO\nzr2PXM82fVcXwfZ/QQ922AmD497tJD5tkC6iABlZzuPtA17bRP5IrBG2kfnK\ndQO9s63ZCcU+BJYCKEGAqfg7D5lNQcIjNGGcN9JW+ShvKqytHJsWOX+Yl20M\n6eoV98zTFkmzgt8AIEsRG2Z7uFT8rlXNzsgR7xLBvlb0arLqWrZwTBvVMEt7\nhUUjky0Uwtmzxbmcz3+/Z/9+IlH4LPGOnbAnUb1fweCKM0Paqq1ZEqRPAE2H\n+xjBaxSHyqKfj4rshlwulH1XvP9VqHynFwfuqpcQZglchLEnvoTPrHy1hETW\n8xSLtJcq/oC7IKCoQBJGHUOT4YjMBeDFDrc0lktMqnNWI/uNaO8F/J15gwTa\nHykza2Y1lxAQfbYjHScguVeYoAzHqqrk4/lYPLM4z12LXRCYxRwq8S2futJa\n2xX268lnVS3EPzAImY749nIKWUOB2ZRVVmd2hu6Za1ctB6sCqyX7s0Ca4ezB\n3O83vYMk7Z1h2iREZc7o3qJwibYe7ib3YOGJMIhDYaRhli0WTbPrml45IWmk\ndRCJHRzaf/vE8hlOpEY2BZO3b+Bac0JnOyY9xlIsmzghQpwDYetx6ar53DCE\nAefA\r\n=xQGK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"9045beda15ba03e7df3350fd5ab9e2346a0238e4","typings":"lib/index.d.ts","_npmUser":{"name":"robinpiets","email":"robinpiets@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.5.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.5.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.27.1-alpha.88_1615990334303_0.9538588338450593","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@amsterdam/asc-ui","version":"0.29.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.0","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"b787f0ac7be1f8d0b82b25f856215ed0675442c3","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.0.tgz","fileCount":2439,"integrity":"sha512-xtV0e9rvTd9JtlwTOim2YAJNAWwsX12k6W0IggTNjCt3uFVKJgMsLcHL/rhk0ZBzLlSSi7ediLNe5YMAxXG92g==","signatures":[{"sig":"MEQCIB6j/X3MdC7Zi/5J6NeIoy6T0IsZ99OIqlbq64JhKro+AiAzyGC5dcMNlWE3CSk25H35Ev608Fg21NhnmtWFcGhw4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUh7UCRA9TVsSAnZWagAAfgwP+gLDOS9kQNtL342eAnFb\nz8FjEZJgjj+3dENkU2rrrOHgmlol9GI0S0OxSvp+vKpRuaabHM/YxrtnbKkV\nPKTfZsT0iahM5WmydlLOj2ycI2oYlr2CS3/WBZJN6Qvc5OYFm8rLiVurerbQ\nvM+MsZfv8F7/6ZRzr8p1OYOKMbteyYTLE5FDcC3l0pCg/frfNhdhvqbvPUaE\nXTruyNs8MHOm5LMviMvSWv6ynTJ2yBRKQ7BrIKiczDbxdbfSEIniHjmyqcvM\n2hOnREtK3IJywrmWWNqkIVZkWP17ACvTRQVTa4cSYd+KiVN3jrNa3WVh01iN\nPPknFxZj/xynxNXBS+qTcfCcDWUdkxXsFwbFQHoCi8cOL3XqmHRCkTMCMNbC\npqW+ATj8OkACEJPEB6tGgwbk/NXlOosPd4eqMGCiuzEQ9KRNBxmOw6ZrsVOL\nedPu1VXVhi7evs5lXRMJRKvwLSj69Xk9qgiG9xmjNmfvVYUZBXy14PZa2OAU\nSB1V+jljYqGx9eoDxWqkb1IfKWvmR4qmFkwP30WBRDna6hdP6HYGaKT4f+/G\nJkZB/Dsf3YpLCkfFOGWAaoLtnalrdEoU6hbRx677NWVdfBLMiKjvx+y94TBX\nVZJGaPPsRbDO3/32hIydZHzTEUjX5UGipvGQrqFWGbVZYAoDpBpNmzmS4qQB\nJfAN\r\n=iQ2F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"100e660bb79790f2416231b7278955288b8ba37c","typings":"lib/index.d.ts","_npmUser":{"name":"robinpiets","email":"robinpiets@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.5.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.5.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.0_1615994580233_0.0067231372607832185","host":"s3://npm-registry-packages"}},"0.29.1-alpha.1":{"name":"@amsterdam/asc-ui","version":"0.29.1-alpha.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.1-alpha.1","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"02384b3391cde2c60cfc19a42e52bbdbee6faa82","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.1-alpha.1.tgz","fileCount":2439,"integrity":"sha512-a1VoIg1e//lzYoTktmRNDFXeX669xOf15chDlJ1pgd7+Po5XrvzJUKB0vaF6/1b8xk6CNzWiyKHQ1UaVgtaaLg==","signatures":[{"sig":"MEUCICQdnU3DrgwzJyHKeSHosv8TSW6qs7khBbAJv02rPcM3AiEAtY/ZwL6N48Zdeph3Fix6oPfylLauu5uAxLbySnd67cU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUiqBCRA9TVsSAnZWagAAx2EP/RqOF60Pp89DZ3a5Q3cA\nWaNCFZU4jUuvJNiCrHSlwH/sYmUBXK1EntkqaRkE+1MrQlAMFihfXCdEdF6B\nXddharVC9ABdF70yyBaAJyLuRCzLohhFPmfZ11jAiu2pXyJDHFLNR0kh0m9a\npz3QTgcVR9HkaM75k0h0QrqUMPJE0Z92RjG1h6SG/cCBpG2uOmHlIauVWIzJ\n7KFEBsaXvuKk5qD82eD6yeyH36vCr6tbEpVjoeyGi7cb/tftO2wkAjNv180D\nj4x3jwo8yE1tsu4BWC9gRIN0geJtpuGn+ZsCS747ykYBeKcF6yBg0DsWDRdt\ndFy58nOmEyl4lDiEf72WUrn7ItDNLncNV58blWMwbpG+bcWw+iK87btjxnXV\nax5D5S3TJX/FCmD9neP+G/rhiYQEDZLyRCybOc3+XpGqE1OvlMQJgEhdqyiP\nJqwxx+bXqOzSbE4ltDcT2960pnnNovDbLMqBi9hyQKMamEeEG0H219fc2sz6\nzJIBVPvA0SLeubt8pVhBCzQoekjPqO1uF6KqUdkjLYVOphEbJ90/kVP2vKJj\n/ofFrFG6luzJp00sIDoSchc9MMsiS2poTlrcbNtF4KqrnrkZeowNYdIBCxzn\nioGjbeLjkiX4iAH5DQvUpQq8pc2R+AsT55nfwBzhZHFOupSTYgMqJttBnlAa\nhBK2\r\n=ys3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"4eecc4b37a08822337a49eb5fe598907b9d7245d","typings":"lib/index.d.ts","_npmUser":{"name":"robinpiets","email":"robinpiets@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.5.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.5.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.1-alpha.1+4eecc4b3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.1-alpha.1_1615997569146_0.5562908876532042","host":"s3://npm-registry-packages"}},"0.29.1":{"name":"@amsterdam/asc-ui","version":"0.29.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.1","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"3ccaba38bfd3699b8342f90ce754e4bfc8264629","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.1.tgz","fileCount":2439,"integrity":"sha512-oR7/601Jy16QJjJEVDd9ffPBZ6l8LhhuYLWJEyMGMikSEKRc3rEX08w5NEcuuKZLPwFcEsU6HzxC1PeCyFakpA==","signatures":[{"sig":"MEUCIQD3IDd0qUpIDeV3poa9t0qLZo2E+fqWyx2SZ+MLG+zXWgIgKX53EhOIsncS+eJ14orbWelxhrWAmbMKww/GSIOysNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUi0OCRA9TVsSAnZWagAA7OMP/2fOjUnFylVqC9mlZjM1\nnLcH7sRYLvrnGXumoI2+dGGHbxiGsIRgCZOBmWgjTk3NDUIXtHSK9o446dV6\nKmPgXDkrCmojBXEnKQT4LzwtwIINcDUor+PG6zd0dluM0Q9Xs8b0y7QI1lWL\nbd6N194EUeYENOQgt930WbDveOnUXZITngFSwMGBLRTUYHVFT67tGzPgOqqv\nuIdrGqCDXUIRxuo3rJGx1Sri5lrtUzqI/JKrqITlrdBwK21ldkj9SxZXkx3R\nOw8l+zOmXQH/sz5enkTwuzJJId386gG/Hlkexl+iwL6zrKfrQaaZ+NSMQH8P\nQXfUsChw9ErGXQfRfSUWdNNjfBYORKn9oD9K5X4ZeYurYJlrngd8BtZFN2Yt\neo4gSxCdvKAeOgf6YJHs6pqHJJvZ5lmBER2be8e5RrD/Cs13Lyu6rGU/462I\nOzDqFytzDit4CzX2WM0ZwKzn9MPhmPkciP7+qe+1sruhqrgHBO4Lc0QnClXC\nAZ4iN2F5P5M4ifT2njQQ4KVjWuMRRTrKfwsydoJzNghIH8W4Ozj4jcsb3sB+\nejRceFSvdfZ1/Xa+wHlM4a4zFl8H/eIWWJuIy7o5aMzAi4yOCHaBB4OParQk\nDrvUA1tKE05YpdrhrXtOrLMzd77ZINCb//htG8lQf1i4pw8VqTnyupaB4cDR\nhQAx\r\n=Udzw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"175bfe91abdcb145dce841341bef6ec2ff5b65cb","typings":"lib/index.d.ts","_npmUser":{"name":"robinpiets","email":"robinpiets@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.5.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.5.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.1_1615998221846_0.8665663885126158","host":"s3://npm-registry-packages"}},"0.29.2-alpha.0":{"name":"@amsterdam/asc-ui","version":"0.29.2-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.2-alpha.0","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"94e8b62c1fd804f595fa3a921469325db3c47d91","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.2-alpha.0.tgz","fileCount":2427,"integrity":"sha512-8L9Cuvxh80wLxLBkIMUDIf3ZZKjIHX+ot8bJjsDlYNUVSWn0IGO4PX0XG7oVwd9BYXxQfl054yXeHkhdMv6+ww==","signatures":[{"sig":"MEUCIQCmOHDdyTZ6hmnDaKy66WIVSwBElLrXa1ovqVhr1c20OgIgFsOIK68gC2pGI4EIghq90e+jhDJTsyTvLOJRP8W2SPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1937954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUi8LCRA9TVsSAnZWagAAdTIQAIXji7OxbRWILDVopTB6\nHsIYt2BXrS+J0nZr+3RMQcVJ0UO+YFa92VVRpQ3b062+Eeq5oVbHpiVcPzK+\nZjTZ2ETM4ZZsH3aLIVRhrNh3e4M0GM8TTLZurTZiKag1NlUGRRfrPy4A071O\n0hhQ7++pdBXeI87xqCk+0ByfmEB7Wfbm8KwMONIaKmsGnoDKdM6gXSRaxNww\nUS95DNn5OFJCT9qs+fV69RJkdHxwmY7fKSiFuI3Ia1z4+I2QbXxzgrV/i3hX\ngIs++hHrFnPvR5TzqxYwqv7hJMhT63QIlcU16R2OUAhPJPzdBTSit1MeY4Y/\nIKFsocu4H/Ssdwdw81rDXpu1u1CFllsC0sri79veH/aWENFi0nluVtKsyToq\nCdy57ktgINCu+UVkNeYyFopQYnCJZkgIA14v5xpWeXrPkASCIykntvGOD30Z\nEt42dVj39uOFkA4laF3FQe4UmK5NVs0nPWVm+s+bu2ii6eBqNPHAYJJXTobB\nsNH1gSWVjvXI8YgMV45CXX/u0HgNl4tY7dX8et3straHVh5IHzePYWnkkjyW\nt9L4Yd1ZVGMxL1uWRILe4iJVzsDGNPjOneo4NocwQJ2FUg/sc1ZLw7UWnZ5r\nc/z41fQR4ZnRsBHL80g2ercV7YTDVVx0zRG9ilsEs5kkb0apMQ7H2P8n9R+u\nEzCD\r\n=b6+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"9d2584ec81ec83396379b18634c34e275412978c","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.16.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.2-alpha.0+9d2584ec"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.2-alpha.0_1615998730735_0.7827005059369077","host":"s3://npm-registry-packages"}},"0.29.2":{"name":"@amsterdam/asc-ui","version":"0.29.2","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.2","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"727c35db34a4856039c869a4d1750648808fa224","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.2.tgz","fileCount":2439,"integrity":"sha512-Rb7tytf+vV9FhErrLmYUES5pQhujSn+76LhoIyA2W9nF0QTDW+GcNEVqcTwoqBMfyKhoBSzn3cJmBZHeDJjGFQ==","signatures":[{"sig":"MEYCIQDx8CnhCryOZjiq6hqoVARmJsFEW1RNOcnQrIoNapTmnwIhALT8JIumAeA92UQ+YKewoWQFmwiR5ejPGIGZDZLxnUmV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1946889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUjVKCRA9TVsSAnZWagAAIpEQAJC9c8c3Y7tnypNy1rR1\nAGu647/CK4yOsU9YCUizgn9A5vueAUGC6EI7N/uBYUKEThzfNhskONRYEhMQ\nfbElWIgInIDZXL1kKd05D0iOr5A52vic3g9fQhUpa9Bgf+/EMEi4kbCrZlw6\nDtKxL+SW49TPa4Iel9X0ySRoJZI10/gMf5NMc61ukmS/fo/O89lgGrTPdO1V\n4tGCV6/wo8bDxwjGKZMZ7bTTMnTPRHatGlU8lIjBFOfAC0sJ43rugygT0l81\ndtpC5DeNPgS/W9BfkX6O/1sba4eyR3TC8qwvAkRf43+52cBrmh7V5A1V+3VO\nePQb7kcPp2Tl85gJomXOa+bYLNrKOj0AGEhl9M+6faUVxYUKtJkTqjX+k5nG\n0tHGO2jEokUoyNJEFJ3LiU/oGMlPpBSk6YJb8kV6/42p7/pUZq21dfy+rLQK\nzbRTdEJcK4J4U63A854ktDktLiK/QFu3+QIOTUOImwckrTB7uK5JA15M29Ld\nvJDcOmTm5orktpD6MSDsM1ykO7utg91M73xkpsiqrk41rslnzePwjvNPqzup\n13i/VWWVe0hlcau6T2Fsy8WEN7/G0VsFUjBbKcjUiZq4llwfWTrLqv66Gjqn\nQDwwctFFyscIRJHuA2Aezd+ehwoDdq6mp5oq/4zwo53nIFQxcKFB0x6tkG1f\nac4E\r\n=+MAC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"e0d664d8033806cec94c832e4f67b660e50aaebe","typings":"lib/index.d.ts","_npmUser":{"name":"robinpiets","email":"robinpiets@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.5.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.5.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.2_1616000329760_0.5980637214203395","host":"s3://npm-registry-packages"}},"0.29.3-alpha.10":{"name":"@amsterdam/asc-ui","version":"0.29.3-alpha.10","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.3-alpha.10","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"2a133be7d1c694462143740438fb205e32491e47","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.3-alpha.10.tgz","fileCount":2427,"integrity":"sha512-R8NmhbhE2Dh99otiqTWnRL0q/SmRff5/ghpKuc2YkrROH9s1jOECmNkuQTs13SWg1s7g1KarpjajJ8d7Odc7rQ==","signatures":[{"sig":"MEUCIQCdaqTttnHJVqFgrBIYb9EIDDIeMV3DwfNO/VZFtnNP7AIgBNTDO+ECDTgpt+Ptv7O+ZOzKjCrPjKtsOnVmxLVts7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1821521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWfcgCRA9TVsSAnZWagAA58YP/AjzO8WqPq1uzQWi9qW7\nQVOQFN/XbvX3HRtEKuO9gI3dcpyPS/9Xkyp3TmskEWt6ZdMhznoFuDKBsYwi\nIGFJAfYlTLiTYCXOpROBBT70cwYizFdtLc2RfdRikZ03v6fwFzUu9hgc1Lgq\nC2k2KaF4Egh2v38q6qz81g3/8qfL0aJNDjMBlbY1jCqnNWzDOHlu4AuskaEZ\nReuzpalNTCfAiug5JG4dy5v357JVLGmlelC3/RFQX/ZslhhrMoa+s+o0pCVG\nfa6g2kh+SJOU+brVzUYw+xiYwxLQPqQS2Uz9LfGO9vxUT4tsOSBAJytKzRg+\n6HnEZ8h3BGOVsMVg/655Oz2MROiKA6AKbGSCtuMBjO47xEHK0FLlepHUqaQp\nCqY/j7hhtggcX7dy5n3iAwA7bUAZZt4W/dxM0Qu0BO7bGHpLkHC6a9QrNQqe\n4+HXA4iPu6LB5b81GORJrHBtILqVMcG9CWt/WW12voySnKPm6MouSw9zAshL\n/Off5bf4i6WbKa6hR0CBQNfo5m/L95kUq6AJVdObUwtCHFXQ8lsHpGnjlm0u\nB3jHwM85OL1gInWkn0cHzQcOjKSZxY+o+/SFMWiiaB6xvNnBuSH0GT4RjtjI\niTldsB4td6HjDQM0tkdbVoy24I6svBqSPJTdDbQRVs7G7JSp2jDjSRTsMzxJ\nHL66\r\n=N5qd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"5b7a907ba6b0090cfb195d308738a7db02f3aa1c","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/3.22.1/node@v14.16.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.3-alpha.10_1616508704015_0.22860711758019625","host":"s3://npm-registry-packages"}},"0.29.3-alpha.22":{"name":"@amsterdam/asc-ui","version":"0.29.3-alpha.22","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.3-alpha.22","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"2e11ed64ae5e8e8a8ef2fd66467b1dca8d918c80","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.3-alpha.22.tgz","fileCount":2427,"integrity":"sha512-x31zg9wMmi+kZfJ1A0RPrQNID9bjxKCG/Dxa2bsZXonDDVlMg1IYOBI7r4Mtob1pbtxoCPxfE5Aoqt5hlxJFyA==","signatures":[{"sig":"MEUCIQD7A++vDGxPVUS/wBH8Z9sNhrERSuDN9VNRpp2V1NCpfQIgNwmmgLGuT9rBr6oLvpWd/NKXRV4gA924cUiPjUFS2qQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1823511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbX6lCRA9TVsSAnZWagAAaDgQAJqg12OxohmK6XyfOHmj\nKzKlV6gvt17rtrwSU2QuoK/NYfiE88toIdCMf/hJNjNivW8+iwkO/vWm9TdM\ngCxngANUx+Mgw054NHP7ECA0IV3oQgBtV+JvNWPLIHc1mhAIpc6Wk5BAYF4y\nywf5h7IVV2QMHTh5P8sELo6iY5NFgQhHOkjUmp1hzD/ueJ/z3F43zlI2o0Qs\ny02zemLzzp1thK4DHJ6d9Mi0Kx5kW8PEe4gMdnHE6H3UPxrUjUF1aHvJ7YhH\n2DR5vh2h7/+9TvQpfcnldFYFClGvbuP7IPQMYkcVPoSTZtJZkVeugUDk0ssR\nHUF1XbMUa4ONMFAv22EWry7KO382Luyl2cbwdA859z4OZyQOLPOr6/pE/Qwj\nWbuyJngv/8XxQuqZBZiIdRteAuKAvqDX3x86+oeoEO/RYCM/oFDqE4QR2TKW\nQPvUeNskSFtFBmXdLr5EKVknGnyjcBnziYCOju4wh8vMUUK5+b5w/cTCSrI6\nBuDnwk8hL3lHNIG1+YT1qMaTOgyvvwfIq+v3AWXnEzkb2KkdZ2EkNXNiXAVQ\n4da7e0/FOqygq7T91P1wJSDYZJt82SytZJAwY6Lz8A/aAdVEp4NAdrFUinPx\na3S1VH0j37GW9VNtWeLoytPC4OShiUSTzAFN0yIPAXvO5ngrEfB8Gmtvfj4J\nCsSm\r\n=nYs/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"645ab7b2c621874385adec20287923ceb140e70b","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.3-alpha.22_1617788580958_0.8531861760858794","host":"s3://npm-registry-packages"}},"0.29.3-alpha.23":{"name":"@amsterdam/asc-ui","version":"0.29.3-alpha.23","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.3-alpha.23","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"a1a08a652be61937fff8ac7305c8ab6d07d0fb67","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.3-alpha.23.tgz","fileCount":2457,"integrity":"sha512-dU5I2mFPFT2zO8FWsOVTTFKq1AGuO73Vb1qndT3OAtw19d1OOCxFZSJW/BTQYaVzOOunQ6mrt0VmXB0KnYMQOQ==","signatures":[{"sig":"MEQCIGu7LweQgwCDdBmxhxVVMOuO3O9Qwxi04ZKZm012AxF4AiBlrnOamIUnxOWySFwdyqYEqegqdhuZN0eXc8S0868zjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1866356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbZiiCRA9TVsSAnZWagAApHoP/jIpdCGLmmvyCW1CMCaL\nvYZfKNr0e6g4kyJP6FpPzlErUdBBlXq39wQ414QrXa0Z7YiIBQVo3EZNm1aQ\nnTY+/hzo06dBO1FRluAdy0nshIPhktK+KgzdxZLoRzvTzwTTGGc8MJqgYMm4\nPngg9LIUHhW2RwVenw7aLq7tZSTudDF29O25d9RcQvKelUSHYd5aO1p6IJNd\nCqzHI09E/qxaszYSESRJOPrFRwHj3WQidko4S48oDlvbXyMd8BjkPEU7kD5j\neItHh2tFSfMOFlxAGZchjTU6mYwckwiuDg+9ZjdaexewpsiYpNQvuwXAB3X5\nzSSVyLPyHcmrtoD0+R2YML65MdNJAL4aJq+tKffnzUILeN+B9STB93caN6ru\naC1MNCVPaKDTrkg4tw6FldtDF7UTR/8/WrDHMZXKZHl6elT3FqQwPzFKXqD9\neiaFSDjJ4iqejsfjlEgu7vwnBTEYksoBK1lpf+nbI6HPlR87buU6Ul8bPAwS\njtfwHl/VoYIAzRILk8gkf5+B/2SA44zmtzt0SkqNu1j4CoC9QnioyO2nvFkq\nVPHLSc8N4rJ64TEslhmMFkhA77eAf1GqW03Q/d3NuqpND/gcFihiTLlbGN5f\nvUEZGMiShA/Qx/GqLPwSAP45mWUK23JbkqvS86ELdYqH/vHaIUPCQsmVQbCE\nXO9e\r\n=pb5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"5a8dcb13322d4401ed13c866ff3d6274a89598b2","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v14.15.3+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.15.3","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.3-alpha.23_1617795233818_0.40108164722246653","host":"s3://npm-registry-packages"}},"0.29.3-alpha.26":{"name":"@amsterdam/asc-ui","version":"0.29.3-alpha.26","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.3-alpha.26","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"643541a96851413e3debd3abc266d0b185a04cab","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.3-alpha.26.tgz","fileCount":2451,"integrity":"sha512-KvRZVfLCBB2R1xcSVdGvfbFUAmk81oczpHaQlLu/bqr0dsmfPgvpnXjRkssAY/eYq1+7IMcqGquveONy8inWLg==","signatures":[{"sig":"MEQCIEAJ6lv5uywBJ6FLKaT4PB6ennzxfjkIQnS2dviu1wwzAiBoJjh+bDe+d2DRo2ymZtN9AIoPxqG+wWqyiBzz/gGk0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1835415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbr7ACRA9TVsSAnZWagAAYZQP/2beWFc3pJ3RU7e+oBji\na75KicdSjqTTGkow71/aRxysoJ7wIzk19u9vTlhbNU29kJTkbZ6ZEehLZ2DE\nyHhC8MPYm7VxyhHNDwm9lvEBlgFtINwjs/uU87ja/thZp/y3dYg67usdByTy\n8tENBuTUYHXCvcElkkcRyALNXNa+5oo6xvBQYOdypZm/PhHrYl8zl3ll8YZP\nrzRq2sol/lJT0j3QvNXYzWZMIJhQGj8e2WrYDQYnWymK0i6xBLEbCLW6oWF6\n1T4ssDp6SWp4CJRR27MVKK0/2txTWzVSkuQzPfTGlyGKGN2/SorY2wmen68B\nNd1JGrVcOTnmh2QsMcy8jpe8P+Wc4dBLQgMMMlHY65BuEKYuU2Tl6Rc8GM6T\nOxTKPMfS+JyPfOXPhMVl/Emqw1KyovqZC5esArp9mIJ1F9mRMWXTOOSzzZO8\nmefMBNTLdezUFmrBqhOLUp0L0b4ZKu7nK1UMX5/zoquib7EJ5S1mog79G8kO\nLC91DHAqjikDNddNqiwPoV2AQAVS4C6ets9T4aUvsHD/q+9a0oKJ4bvQTrqA\nqPmQCrui6ydShUaB7RgPqWJHFTur/tHg8fLzlJ3vOWYUjnYHib9cttMF2+9C\nEjf+nuqT+719oAFowWWMeEG6OL91s/BY/991R/nhQReQ9TIYuLwN1lJ+ft7j\nabZT\r\n=JneY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"ed41cdb2926b95e2d2ca5c447c3ad73acb54bf32","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.3-alpha.26_1617870528161_0.6550266309253037","host":"s3://npm-registry-packages"}},"0.29.3-alpha.27":{"name":"@amsterdam/asc-ui","version":"0.29.3-alpha.27","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.3-alpha.27","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"d299b1dbcf69e9b777d7938912a5c26cbea466a2","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.3-alpha.27.tgz","fileCount":2451,"integrity":"sha512-/4HwNvN85v1Oc+VO3URIGHG3S+Fc1iz09VPo3wYugh0t5PmOd/iZzlHHT9RGfp97WOyrASZTkX9U2WEhYYCLdw==","signatures":[{"sig":"MEQCIBaYx7ilFV1nLA6ZA08F3Vpa0ND02Qk4TyzxiN5jYizsAiBMSF4uPDt7i569t5OeDwFwaJLKzuvXLGLsekF/HwSdwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1835415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcDzfCRA9TVsSAnZWagAA+8EP/RdsciQsKKeIkJJVdCzz\n5gNJPnKFCxH7Fpl/gg80MIPWG1Xj/gdq08AA16zsgv6pIdE3iXeCi48flCKb\nXAqP/8JSR4PEISUdJpkzxDnEFqawMfIFdt/e4dFjUTwYaX4268Q/PIeNKdgz\nuBXuN7H9DQHn5qKDSSa0zmcka3l3PJqCCXCFx98xsJmIJTC8T8GuBezCGa2S\ncJ+a186Q9rTWdGaD7fkcVS4M/+9qcKc9AJG8zT2vfclY+8YGTBMl5Dmf4CuO\n3HR1GwD8get22Cq2Gi31zTV3iiPTWuO5CXXvtHW6BflXm03aRPfxvC1pg2BT\ntsdTNBHLTMaDElvidiQULDFLazAtQ4nISNb2gNrvzjESk6mvlFCb5Fh/wZ0l\n0nDKGpP1j0A+9L7Wf/st928xOw4ySwUgpZKRtfY1kxztsLOC9VVrYDH5gkWZ\n3Kx8706cz1O00X+oAbG92VXnFHRKTSwbaRYoG4Z7g+T+4MG0ymaZYVBrbGWL\nwTpXbfdXBYcoDX6zduV/bweQOBfAnb+qy7zd7z8KuK1cbRQC9vgx04CBe0xN\nL7UrOmGFdhnrOTL7ea8QcaOVeVUrclpmWb+l+tXlA5Bsdbqng8y3yBtrClzq\n+evyTVbx70K/7VgwW67Diex93afKQpcAFP0VYYDI/wdz7plxIv+n/YDmDbZe\nvBtj\r\n=UGR4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"60790c6f943fb904fbc659383e527281e58866ca","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v14.16.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.3-alpha.27_1617968350829_0.7455300525884767","host":"s3://npm-registry-packages"}},"0.29.3-alpha.43":{"name":"@amsterdam/asc-ui","version":"0.29.3-alpha.43","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.3-alpha.43","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"59c538c8b5da981ba4a13fe2ae5e071994aca31a","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.3-alpha.43.tgz","fileCount":2451,"integrity":"sha512-nthtxcweClaWCvQYZyikuqaNrHws6eJT0OJK9RzxU5DsDbuaeUgPWZdWbiQAus4lhs+lMxQPtgUBy4VKQXJhpQ==","signatures":[{"sig":"MEUCIQC3kIpzisijFT+q31/SvSDaAoi8nG26NTu7bsXiVrEy/AIgPci9JOggNWTk6SkLr3svgfhZomG9up4xCX+uK+AFGR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1835433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghqxgCRA9TVsSAnZWagAAuMMP/12GxkwzgrGoTsuwUd6P\nKk3JDMOUCVw66/BHgB4R8JhE9/ggmkyEqfJLZrPG2gYTP3AEuX2cu5ujR19g\nPVMAjHLr8TT0zJJYUYvspCybZgl+C8vVBeIpgimEpRUS92kFUn3qvK26GcCO\nYyYaA8h015jhC1wOsH0tXZ9wt39BOhX1aFmS1PjXFHXtQ5++AMnQ4xEfgpa4\nN07t2hdKy4hUqkQ644NOS1segjw1ObToMZ2oI7JDx5TFcPv+xj0R/12NvgID\nZQaLsgtDPKtkSmrMmlCoeMt8N9hjgsvIRkPxxRqg3h+6GYd40nxyPqCSMRYQ\nYbZK9dB30aKcS/4P7oWbpYrMVtmaVsjKEha8LunIRf62YCu9f3XfUalNNN6W\nzSe96Ak1B0U0dgC+gHu4wLzxZKNr+eGnaTiNp+997/cPXTEI9j/+aDdQkCty\numusZeVQud4IHgvUD2DucHboXA9icfeiGC0HE+uotwLKfJlLbmooZt6cZoDd\nr1N2pduhnO0DfjY5NlM9cGC2SEBjf/uR+L6U5vB191fj6OGsIw9yIcGmF4C+\nBDaziBr4cLLNLpzL5xHWSg8kYh9oRpNAqhO8kosbP2ptVSkGpQ7i9cAkmugd\ntzM7u6hp1192cClPUYYuqEAavURzb54bwztPors3mrbLQD04YvJESikfxyIl\nOhNu\r\n=zqcd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"d2aa15ebe4881406746293d5472629140b58c7d6","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.0.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.0.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3-alpha.43+d2aa15eb"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.3-alpha.43_1619438688159_0.09727700651102489","host":"s3://npm-registry-packages"}},"0.29.3":{"name":"@amsterdam/asc-ui","version":"0.29.3","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.3","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"d9ea4156b7f9cce8cd0baa874702a9a62a9ffe72","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.3.tgz","fileCount":2499,"integrity":"sha512-mUOVRxTx88BMrfgENDU1A6mjgpWKGnFvEKfKqkDFUr32FF+MSy0kuaIc4pqhG30LGRD2MqRnYYMZvnbzQajx4g==","signatures":[{"sig":"MEUCIQCPrdVY9fftvDYa2htGZU1CcjULVeJQNLAgLQJ8rQKRjAIgDoEoYoa0CQqOXnOLs6HW8sOjR5tB7R3VPbwEGs/aViU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1869769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiWE0CRA9TVsSAnZWagAAh+0P/jIBdgHCPWDJt4PkfNU/\nCocEJuEMrF4LcbDeTHrWiWzeaQhvcsKjEvOYmtNvE+lTtuc6mxOmP4jrtGaz\nsnOPjLxvtudN744rTD1H+Q5lqJqqm53wH+3+MbN4oM/cPOPwRIn0+u3JXfcp\nVpBkIuL0chidn5NZyeXkvkEBFIfsjjX6l2363kzbPe2W5ivWLw302D44ZyY0\nIZuWCeTh2ig6Dfr7cQ6BUpW0JADiQnEKiaBfOZPp185VPvBZNfE8ki2hS/4z\ngM0z16ZugpiImQ+h2QGSiBKApw/obCXW7HWnenKJcy1/IPHUfYjFXKeHDmmL\nLHcW05/I5dmPhvL0lA1wNtP7Zn3j6m8gjBaCQPA8VmsUzBT4rFvmHiZ89qRG\no9CmlDR2eA45Hc1xEUWZFYtvDj7StW2n6gX+2Bj9/H6bSMHEanaaxN7Xj1Mg\ndLCI5Rf2H1hPGC2+okSjtUK/+VSgHWwp15ZEjSOHmwepIt0EdOnbKOpaVCPY\n50V61Vr4dYynn443YbLtLTJEy3mN8OkWUO46NvjrW+qR79Hg8y8yH9EarHF4\nVUi2QM3tRMPzuRo0UShHYpQL92uptOEpF8WF6+BaUu1YQCJDHry5rOKqBra0\nbktR3frZdpXv5623zNuIU2E1FgaJwOASF5clHqPiZ4v1yVULdd6OfQ35FXPL\nr5eF\r\n=uq7R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"31a22831eeb2230e137c5de66c1d0a6b9a7a9612","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.0.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.0.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.3_1619616052333_0.2662859759431797","host":"s3://npm-registry-packages"}},"0.29.4-alpha.1":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.1","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"c6b85c09eac1caa0c3f5b2010920bae00fb4e821","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.1.tgz","fileCount":2451,"integrity":"sha512-xVeegoq0QXMx3apdoVuJjoGwe5weKVIikNPCE3tQ8Fk722i85fWzi2abcuMFO4QQA6Z7uRcoWOagV/rbOuM57w==","signatures":[{"sig":"MEYCIQChbS7847fhlfbFf5tqBHE3QhfbLco86puMm7EYHdWuZwIhAPWmtqSraeNgde5U7IRM7rbOwPFUaN0tqPz/HnQ56eni","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1838715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjSgCCRA9TVsSAnZWagAANmsQAJpQsQ6A7B1zmi/jt0EW\novcqfmBpNVphQxij2qA7snk4Mj8HK6eHXlEGQ/oBxN1xEFBUpWd234YVp9aG\n9LFHsYtzlBxu0StVScuoDY1iisPGaUoP+GOFdtJTA8Q0irRCxxzdG7C8yDrm\nlPt9hq4ozUe9SpQxh/Utg3oV1FOhWoi05o662lybV0BzP6dFaJz5Fw/gcQZ6\nH2HSj6V1OGpp8H+SP7N/p7DEFZ4dVuodSgiAqHIP009w41K+q4hK78HL3/2t\nTrsuKN3iEaLiXRLNFsUSAsEQL7vx6mxBhxhy1d/c79AqiSODqchInj1blUm2\n6FvgppUAiH3W2nu6HsVMg7Kzr3171bx3O02M/agw8N1xIfSpjFOPyzRz4WF+\ntSjdEXCXderkQaezeA85ejaiD84w6OycU/zlkQZ3sW2Ny2ewIX7lI9Wupn3J\nKUp+Jk531Jdj8Q8FXqo4AUXc31uyMrowS1dvOjupgZIehr+WZO6mwpI8cHaG\nOvterEegF6nXSuofAlyOf6E/Q4jIHiv+Gk29SD8b55tbyV4L1X4KD/pXBP0y\nSzvIo4y17M63la82YIK+D0gP+7b81BPJc7EptzyfCYXqgezhbwulybHzKqXU\ndKsrhivxR8YoZeI8QFq6eiznLSRVLfM0UraxsE1cp/PfuV78zLwtTE9D0jS/\nuGDd\r\n=tYC4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"fad3815271b30469f0c771e11d147bfcdb9743e9","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.0.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.0.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.1_1619863553934_0.3376665584766927","host":"s3://npm-registry-packages"}},"0.29.4-alpha.7":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.7","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.7","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"32adcf1e54c21b9e47146b68284cb35be3746956","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.7.tgz","fileCount":2451,"integrity":"sha512-AFs9KgJ1nhgLE53V2xpVKiPzIodhBIRg7TpQDyHmIqa/AotBrQm9/jvwkl/W+QnwDTx4fhAhxmyqqlmyeQ3TLA==","signatures":[{"sig":"MEUCIH3FMRtvJIOi/ppfFFjJljAMsTkAS0XdRY47mTu9VX4IAiEA02LEnGb2/LisEkXb9ds9qkQR4t8k3ogTG1bYeI5euFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1838875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk9YUCRA9TVsSAnZWagAA3EgP/0E5gN7k8+I/I5dxF0be\nrFXBQLS5E8ChFE0fo4U/pp+EN4QzNxRQCnKHKByFJJcu9ofI+H/Zi7Q0nvuI\nQA2QDqRr7bepT5ObAVOI9xN0Rws/g4YEDME0sxmUUHHMoPsxcMrhiJeG015i\nIvxOlNJJ6yHaY0FMDCR4G5sV32H+DvYFvSbEgvNQAdXM6SHhX5qNkWojWkXr\ntRIMUz4XX3M5734enu53XtSFTLsG/SHbdqs0qio33r5x529fSm6b3LpXwa5H\nzGGA/7kFzZsLF9E0pt+atPnYaqa/Dgeu4tRKeruAHMyliFO2kVyzt9B5Fys5\niTGIKt8iGzGllr1caByQGFxC0qXdDmvDEK7lhPNrQCwRRSwP+8p1t4Qlv4j0\nq9JLlKgTIbx0UBhUjeUhHMf5aeqFOSxfVN+gMboz9Fj/d7NErlFLHh0FSqmx\nOoSuUgyl9n0CyejYy/2Oq2QasKw15b/RCwAuiVeCkHD8X4sGEHqLNZK4WsWK\nobhUc0kqw6zydti8QmcY0cC9iJyd0ir0R1LHkN3oOFMfojo47lfmd4OPAYGC\n1iyf+j38gMzZwAT9NYmJzrsnVzm4a/4uIElitGlSuw2o9EeVs/mv1UtPOm1M\nwcsSMuI+/OZq5oBFBKHPPh0yJRn1JEIzrMCR1FvJgu+cFslGk/yItxUsyb4l\nfKxx\r\n=GO2c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"b9992fbc959116f5d261766166173ee8674ba80c","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.1.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.1.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.7_1620301332070_0.22044859481383483","host":"s3://npm-registry-packages"}},"0.29.4-alpha.15":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.15","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.15","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"6197da41fef6e37662420c879ad632c7d38f5985","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.15.tgz","fileCount":2451,"integrity":"sha512-xcPwsGTbrQm8/PDly/I3v0xGvyw7T7EfilPXda9Nl993cWUgNAJkS/U/PDT6JtFfvS24CQWxRROVy88z+SGhKw==","signatures":[{"sig":"MEQCIEb3nTYZ8trrUI9fRL5fBz+diAW4Kc/wtsltvEE/D2wSAiBgKSg5KM+fQk698AtWGjcXqc7sIZ9y3juUey517ajRSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1838876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmk95CRA9TVsSAnZWagAAihAP/j+aliXdJZR8bbbScehF\nWoZIZ6wEHHr4atpXO0FLt6qJK/Qqx82dDLQ8VCSEfKkVbMWGqIctHl6k4G27\npMx30LgU1WcV/8bR8zBDVv4pvPCUJtit5eYap2GfT79D/Q69buxfIbY/toHm\nRpFyOWZu6GP+Jj2Mgt4ogGj1/iKoqLROkNM3zk/engm3l6EJm+WCp73Fd1y4\nc5Z1frn9m03OD0lYZge4As2LS0f9SqJVc4r2Af6S/YepGRDnJKzmapSt2Pui\nqoUQq70z2WJzg6z2HDeB1sC8GW+yGGOgYFfqjZrDRPLjwLYjPdVstTChVvDG\nZM1pTqA0k6Xq31+oEj+HdKL7tuG3eSK4CUSgnYlK8LLKsqkQnWluu0ue4oCI\nxH8Uc58gCurWkVoJbKQxJr/DWj3YALRwjJ7wbTjgpYawN218qNue8t0jZxbc\nNd/gTk4LNEFYJCAFK29/z/M+W05i2mtTPvgwBDmbuObSNrdxLp51dt/GR7PO\neLKKOJqo1htZSss0OvTxIJ+3/YAtMyFgRUpfDr0FoDUmp9Rs4QexsbX0S7kw\nDfI3d/Qc4FrJuzNhOVr2WwJ1CjBNi/eSTx6QYizXPbiEA+Qot/+c0X7GYMul\n9rJ8Z0nwKtO+3DJztmntkcX49AM4GFtrsVFpThZ7OuaJ0NpMIhdhopsDGaXj\n32su\r\n=qohb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"a14bf5bd7d7f73c134bb40e82cf5e5abb1cc64c3","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.1.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.1.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.15_1620725624422_0.5872289287668482","host":"s3://npm-registry-packages"}},"0.29.4-alpha.20":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.20","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.20","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"d6aa3f5529f35840f11af089a26561410b66670f","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.20.tgz","fileCount":2435,"integrity":"sha512-gzxTXBO/4HFWoNbjOKjXZLlKHzte8hlbNvaEiNuPSwyNW0XqA9/6LRPEIOgK2mjVa4eGhdCmhrZ9k/G2Yq1Paw==","signatures":[{"sig":"MEUCIQC7YfpCqPWPXtEyAne6wvfp0BOt6MRsEKaVl5282iu4pQIgOi8c129BYGX4AloDZULTrNaavFT77EWxAfrsmDW6YDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1822223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm5MCCRA9TVsSAnZWagAAxnAP/R5DMtG88g6TS8D3Wk3Q\nkplfQnNgxHptWOKjeFNGkYp1s7gO1gMn3DADo8NZMqzDAJ3u0qj/8Eot6ea8\nUE4+BBw86+7Y+iop2Y2cHHFdgg/TiP+3ah9Z3hiM7TzjnQfV2fQsFl2tDsdn\nJSerdD2w+5siQj8KdpZG63sGbkap8fg/X8HZ9e4oS7UmdXodYC0AH988TtMP\nLVgKmLra51tSCZjF1+thbVXWeTnzzulexW8xS+GhqOt+WgrDjOa56TCYda9U\nrs3yCp5agghLkZZQ14su3nkkEnka+rAFMrHPiXWLHYFnsO46KmtF2ktpRDZ0\n2xIhU81lgJZWJq3G/Ji5Ud9oKuna0Y04XnEgoVDJp32vQCdApSe2/X2pm+Zj\nhSm1dpuoXCRiKEGScDB5GAeSPPdPC3cHeZgeeIx2g6jJMGQwgF0NdfesWaU3\n8hmItTlxbn5y5wGzfd6tM61/HHBBzRYUrUzYgYJXvex2bQawgBz5nX8RkH4b\nPy+wGhF+oMOpfBQzO9tzTjM6vfDAHZ56jc9hSaDDm2UVXURVjBCX8cBGV9ut\nwQY8llAWQ8rx89GMdWKAnthp6Ra9XDDH1+aMCVIkDfKEmEqfvk4HMmtUuUFH\n8MdRXhA/04UN3UjnWorNgCnTvqETQWkWr1ZsM9tGE8ZxQSt55wEZalDMPVE+\nwI6B\r\n=6LDm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"f45e5b8342a8c010a3a29ba91775d9f5d5272c96","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.1.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.1.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.20_1620808450206_0.6666968801237019","host":"s3://npm-registry-packages"}},"0.29.4-alpha.17":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.17","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.17","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"44860d6fe5f70ca2a5e9e33e8bc0148e08265f32","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.17.tgz","fileCount":2435,"integrity":"sha512-LMPzeP7gyLkTpvoPezZ8KYN+u9BMlzSW4hJNqDt+fbl6Mj3T8qrnnizwXtMrDRRCcjL0bUr9EbPeVFOhv+YhjQ==","signatures":[{"sig":"MEUCIF/EGJkc0EzwLlkGf2yfgFMkPElcbdvdHII/JLvVw/5AAiEAvWCl07DE1fLFR3IZx4lOioRBy5Fvcux+I6z6v/He8O4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1822223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm5ViCRA9TVsSAnZWagAA/ocP/iYCAeUZdvFtWgieZGZW\nNa0mZ//z8JP1EDQ4bwZCErBnb6+H78RMTAXjrKM0ol7fSIeXHLaoNbsvb98f\nM0jdcOkPd2PzkvBTvTjX/jFMGJB6m8Gx1aS5Khj5RrameKHjfsg55zYcQ15m\nEs0qJaDQmZ3tRLXHh6t8QY3Q8ewbxAnFCpdeT1BWNlQKPtr3XOaZiA3UCsrC\nSvT1ZJOYYFd1zDa/JhDOrzSJt4h4GmSUf0rvCOrs6lcM+dfgNGp7i+5logen\nZ3BhUa+fpvnCAizMITQa6t7Ey9dElgX6vawW6OmhcbvnXd3q82Kj7NJe8G2H\n2JwNfFHy4jTlH2XkNv+UiWpq5dFyHB/l4WCHEvGfeS+W0f1PQ0b/cRRytGN4\nJd+g2zKjtxqLm5ZwncW5gkLvBpfUHnSRezLpo+YtLr4z6MjzSJTOQoMqFAfa\nOuJyIFIcXD89WnysX+lGxXgd/qkbq/qbtryEWsf49SxotFArqkhNSk5ljRsZ\nwoB6EN2Mv9D8S/XZCdAsLEH+jG0Q6FCnOikOKyyHTfY12edwHNdMTWGeskSw\njIn8zP0tcBKNvXYGbXVH92hnCPJRNCDuuw/IxLDscNAp7XrLbDEjEJCkKwJG\no8dKwc0GFoFZptrpIeSVNlKw5ncxgevGCL0TFneZDy+stPXxZ07cJcbYuQBr\nB96s\r\n=DZMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"e50c6e8e688ae537916392a990daf468109e2842","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.1.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.1.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.17_1620809057762_0.8317611046315012","host":"s3://npm-registry-packages"}},"0.29.4-alpha.18":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.18","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.18","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"cdb2064036a66624d12a099946e8e96c1db01927","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.18.tgz","fileCount":2435,"integrity":"sha512-wQbWbzV1GD88pxLC5GfCceAiH4ac29x+a9IRksBg7zNtgkK20APppChd5JJH8UL3O7DmOeADO0CfvXdT/sB9og==","signatures":[{"sig":"MEYCIQDC4gYVvOIX2NNGDP4muUR9qeNZ+GhMaxRH62fr8jX8YQIhANUCwYfI3sdw0HaS26bL178VVQt7yY1PDgxg+ql4Xw/n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1822241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm5fHCRA9TVsSAnZWagAAiicP/0pInXhOyjUzUBLSRMfb\npTz7ES7+suR3XlzjmttxS6eonAwzuC6PYo73mLL8RvWRvdzdw6Wb49oLEml9\nLjpbhzdsZR6ajYj/OOZL4UnGOTPw7ngZ31vlIypLyr48BgfD/ZwCLfrC1CYT\nCO00xItPO1xPnRPrjDtSSCV4jeFmz4FwxIXcp+T2tJChXceNP6zMWpo9Lc8o\njKwLHy42a0Jh/Hij6l5iLk1D9V7+Qb3dHbU7x9s+o+Eys7LuRRGCNxMX1gCj\nz7TlSSr/IG5QARjjw5NsXtVPAMed7TOsChKLeOYyczpNWHG+jWufTZpuFvja\n69LtzQpK0YAwjW7rZZ+pz3uMlU6XmdBYTpatPXomW8ZiECl0aVW59B1hYAuX\nXLRWTUOatuviD0X2VHPvEzG+EmChR2dnspBToWk5l8V7EbH0wm0k3rr40iDa\ntF70fvW601zsAJuKTweN0kh3lTeQthYYp96BUW2zTwuIAXSMPT5QRo5rrosF\nNpklaRjG7uIQUaYuGuGgf3ZYBRoQTdJH+H5xgG3FuB74lTZfzG0o48IyjX9R\nb7rX5qxZptQHZD4AYp0uh9rdlfAqiYkYStE+A8fQXXZS0+IWQE8GoKNwTNsQ\noPtXdhSVGMKmJCKC2/tlkmk+l3IzGGdnZ8JAO48Ab22HsquSEvimzGozVAtp\n/S7z\r\n=BbTa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"0b38487cc1203a674884f60008155d37e21397dc","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.1.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.1.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.4-alpha.18+0b38487c"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^16.14.0 || ^17.0.1","react-dom":"^16.14.0 || ^17.0.1","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.18_1620809670598_0.2658879306045756","host":"s3://npm-registry-packages"}},"0.29.4-alpha.21":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.21","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.21","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"df661c41489945cba5301c8c8a77a18b91348e40","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.21.tgz","fileCount":2435,"integrity":"sha512-cdOUz6zNNa8XvFGv8q/xfdmqRbGUIjJEXK8GeEk8opl6LDJeppp1c32qh85Paah9ggYdWSzkFhezSfof3ZKFnA==","signatures":[{"sig":"MEUCIQCC1Ltn9O+j/xGci827tkaJ+ClAFBOfUgTQJ48RG73DmwIgKcb3YFw6QLJtJIcK3CgWuLSSxCooT/araQSEpbSQFng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1822217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm52ACRA9TVsSAnZWagAA3UEQAJrPJGVpygCpD+y3hVu1\n7MGsZe8qgMHkVt/EbYQchFbYfMbnqE1jDWSmVh3sF3FOgg/ebQHivIfBlG17\nrXkWyJM29xPBVJSw2U6PnonXTTcM8acviy0Ef/uCDY61okL7Fy8xd7ntndY6\nm42dX6UmPTjSJ3Q6LR9rTIqo0n8Xs/lwevU+PS+IDWmryO9cgfVAhuSY9de+\nXJneOKIQ5tm/1n5bUGMIwOcnYWcZEA5b3uKu0MPBx22jc67LXwFmtFyrodRb\nbt3DXY+DqKkNdDqwm9nOoCwvHLbKizk1p1RcMmrbKvw7C8GXHmYPix3AWm5b\n9ufNWrzv91UN22mlQGIeDxS+fVSIjZ/238Nc1ZHh+Lvqy9tUrzfTihOfULtk\n3XCAI4dYilRoZQWPT7GGheOclW+H6Krs4QwqL8ZBvr5hf9g6OtmIRxhn4V53\nYTyRmTg7e3nkMsozF1CcWHJGn9H3nrpFAf9eQ6bpHb56MU1TNykLkv5PX4Bq\nnZskNqrTEPApbEqT/ZAm4o5ObEBISZaWmFIXuw7PgS5OYwvJ9b/6+hWfPvcu\nhmRuLBNyOA1sQik6o1towOcgl17ac1oXR4I4xYihCMwUtmG5pRvN0LG46f5z\nJJcn98+HXJj5SonG4G2Kh6Z9gcJpzek+EPREkzH2hLSWxybTe0HQ97JWYAM6\nMjdL\r\n=1fVe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"f359c2878889ddac8a1819a20f32cac9b0f8a950","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.1.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.1.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.4-alpha.21+f359c287"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.21_1620811135600_0.9775328398992214","host":"s3://npm-registry-packages"}},"0.29.4-alpha.29":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.29","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.29","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"9b5adf28df6f168329e798b0a815df7be4170138","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.29.tgz","fileCount":2435,"integrity":"sha512-0rY5cGN6R8EzrzEboKx5QgamylPKLzezWWLXFIKkzOGcsZ2yV040MaxoZPOlfO6hsd2Hkb+rLn/V3LlyeKyDew==","signatures":[{"sig":"MEQCID4r1vhkSVYbIN54dxcUHNVRNds8sDjLebOft+V/jNsTAiAyOhEp9w7+29evwZU+4WdvD0+PEkmZTxvmLVcpH6JjLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1823244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoi4mCRA9TVsSAnZWagAAoB8P/jz+zJ5QKyGmA64jOiS7\nkdXU/fLXB7Bqnw2kYXMl2M46Ky3C5+B9wVAJStgW55Mr+RzHhnTYV//EdNR8\ntKA9M29660xHaAAvez38IwlRn10fGoHGkm4z2VpPFU2iQz/Be+cyGHS/b8QA\nqGWj6YmWEW6vgYwDMAGKdr5vD6dl0zukR9Mxc2C3C2AHjxR5/mHgpU1o6s2B\nPSzIwuRT7cNsJ1/ag/eydJERl1a1RvFRQ4qMfslHT2Eo36DBEf0JPNQqGYk4\n9xpK5+f9DoaUP42a3LRY4ncnM1hBrWuqpOXw3pCarsXXQ1aNxQo5ejncEXwG\nqJ9+odn+9hKWfbP5QyKe/8kTnlD7F/iS82E261CAGPbOc3rfCv4ohzvRbQtD\nY8OuvegqDLm+b0cgLd9zTjb8xgcSLXSSinqcPRPgKTEsvl7FSM/QtR8zXegr\nSOPuEq7GX6kasr0JnHMcm/AldHIt/JwFl+QbU/KOnnVJ+WGXAkeYMkF86Nct\nbBGXKS/nhZYjoDzrvRxaGNyMhjhNt6tkfL1JjUbu6n70mBBGWaEG6HUtcQSe\nV+Um52mP8W9nKmb69EPUGAJbnxB6RdoUzXeRyzARbAY5t2hgllhi4uWwu1Tt\nvuTvkgeWvwf1XecDMU69vTkSLC5qCev3Lx8fUDWjf05WotUlNrRBJKjsA1nY\ne5cK\r\n=xnG+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"6c954605e9f2b3a8b6aa3bba5b64d34fe7de3a76","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.1.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.1.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.29_1621241381806_0.007805191241144094","host":"s3://npm-registry-packages"}},"0.29.4-alpha.30":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.30","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.30","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"robinpiets","email":"robinpiets@gmail.com"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"dda452211287041a0783c4e92a730e94a7bb9acf","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.30.tgz","fileCount":2435,"integrity":"sha512-a7i1Ro+6w+Q60t40rd2wVm/Th5GMtYEvkdoYb0Xenv+NyxQMV5S2R5Uz0GAP2Zzk4e3LiQH54eGQ7iBghL/B2A==","signatures":[{"sig":"MEYCIQC1F+OtUTnjXarVV97mbHowLZuaY4+1lgDLT0Tk+tqQKgIhAJcVsXmpSZ70ACTT/BwSCbZE7S9d3D5GILGRZgIMfKy+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1823337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoi44CRA9TVsSAnZWagAAHQAQAIy9pa1+D3IjX4sfYA0U\nyykWo9Hpmy0iaXtJChgAEpB7JZzLrZma4urB8+TSriqMQ5ZX2Vs6ndGljdbJ\nGkNXZ2kzbHC1++HNyifEhju66UHuPZlO9mPd8sipBm5y7gB14TeJ8cqMl9Uz\nFyKVtM1lkIOwMi3fdl5TniGGT/cmzaC+XDBPv+TYpnPaQDi1R0NGD8Qvrmqn\ng6BzmR7g2cWP3mWCXtd9QO9cH2OiFHxfLiyMdwLmoEdHNAJV5sIP9wcp9JTP\nJYoYNC4VR7QgysihI4ydo9cMeFHoEciQT46dTfoWyTKFhnVdnkbi+Ds20xp2\nCCOul7R4yieOtDt33iiK//VgAEhyfCa18iEybGO3HPxRFceIIV0xp29HXE7n\nUs4rL0LO5GW+aqI5/Z3E6LgBB763lJBi6ZodK42CDI8a6mGFNSDjDZn6lfwC\n410RMk8NAP62XI/9V63ofYAHIQMGeb7WGn5kfp57GGT0y0b/LE2SSv61S1Yd\nrdg7Rmwf8fdW/Fy/xLv9DsAqPx7gaAvqOXktQaLg1ZaRWbAkG5FM1JlJpPjk\n2bups8zqIn0cy5CU6oWCxYlcjUsvWPZVYMc+qZaQAeMC5KSQELFVcM5nwBnM\n3euGe1cGtqGqF4PLDyiT2g24ZttK/98xxOLw81nBUG0K+aAfnxzfaXu2dGn9\n4HIM\r\n=4DA6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"2045e17cae5c8ee8896fcc01ce35641b8b371a9c","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.1.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.1.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.30_1621241399704_0.8005217263143458","host":"s3://npm-registry-packages"}},"0.29.4-alpha.43":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.43","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.43","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"1f2dc41ec926bde8bbe2eb552843a94659991abf","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.43.tgz","fileCount":2435,"integrity":"sha512-J+/ajTex/I57cHy5ImVhDLz/N4Z74c7CkrXmMaOzuPxOJZCf9McOYWupnA3WOGIjuUM1eFeYorH7CgNu08cEPg==","signatures":[{"sig":"MEUCIQCyJxNmpILtAyffkxwDamE2WFEmkcuvb88dBMw5pdtPKgIgCId0o/Yn2Zue4EiOKFTjqXdl/7d/d3HImI3zSZAZ1kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1823502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrZTCRA9TVsSAnZWagAA2UsP/AoHNkE+vi5GAQMjB4pv\nnDWE4tEdazIOEjeZLI+h19TwtUmWdNFa2bXc7ks7afXMyOu7+OKmrRP1I65B\nveufsX3ggiFdEA1+hxvQYMROtDLVbYyGbTpP1gAQrIE26TNTJjtFXU++S+b2\ndOskTbf/1P/6amkzjjw+aFWndCwaW+6VeZCamnPy56ktwqOdY+4/6s6eUkmL\nonNbqENo43aD/BPGJPnycDSmKOEQk6/+mrHEfewn/nwlrHAElALFZJMNptcX\nmkub8QuEW+FCzUaIGfOI3VNgLPwqzlqCnGdA3Va2p1MeZTKjRaA9QRfXgcZH\nV6/kB7ZhKcLIKp7MNyGaz5SSVSdIsNScB+0Ju9XbYbNVqTLkBKLEsJfQ83IV\nS6gaCkkPT1KpQPwI8IdS/sm5Dp/74Y1uoWKI5NJyfR9Kyx0VlJwb/96gQ7uR\np/0wCeBlR8DInrp3gGuL5o+WMYsDxHb7R07EwMJBti4QnjTX/4HZjYWEVDEm\nHrwTx2bdE3I7RVmwU5CUO6IkHrGnNirvJWcAPexpvmx7HmzmSSgm4kosoOZ8\nUp5G1lvCfLs751vV5iQ9PEtln0IzH7WBKkBZdims3atNqla5C+soiLuKFCr6\nZ4c0OhQScrQ0YZSRrRP4OYnEVQl4INZqIVbbmCOOjqP5qw+faGPu88ues8VD\nUMJ8\r\n=Bwo6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"1ead36d4b415cf7d97d3f65ed1e6eb56d39b8130","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.2.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.2.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.43_1622586963268_0.09675766111314155","host":"s3://npm-registry-packages"}},"0.29.4-alpha.44":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.44","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.44","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"2668d530b9d21c8897ac8ef0378de43d6225da27","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.44.tgz","fileCount":2435,"integrity":"sha512-HcZB4Xst+dMCN91EX2r23EPqBGCfOGHnsY3N66UgK+FY8ihDGezMbaTA+4wasGQ+8VBSVO2RfCOlsL7Spgy7AA==","signatures":[{"sig":"MEUCIQDb92Kw0frV1y0B73ohvTLbENSgDVw1n+Eq9qrKKbGXyAIgcyIYV+N34MeOwBEzZ1t+DwzlD/uf3yW89QEN7+FFrac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1823440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguJejCRA9TVsSAnZWagAA7AYQAIz/n+fp+PhFX4CmfzLu\nQkIRg/o6MXkiAs5MqJtw6ZQFSUTQHLTGZDQRIP2XwdZm2NgnG/ovPh2I7eJ3\nReuSJzEqGoI/S1C5xsc9KJ3BoYiWlRamHQHqm6rBfqCim4kByZeue6Vov53K\n44rs2YtsoM1qOEc/Y5sbp1srVG8YQOC9mFLEn57t1lFBTrxIQ3kxw7z9wcbv\nMfk4lEL689/uRU3xaJO5ldrPQZ9ljbtA11Pce6tSkycWMq0vBucAuaxxKqp1\nLNN/V1VKxLWX39SGpnhZ10dIdV0Xj2tV6U6UGxyvMvjsR2CiRO1eWvg/t7CI\ncSGH5GZ4WM5UBWqSqtx0JDIYSB8BjSZIWV3wBeOWCYEIKRhALphtZXl4JUwB\nugb7rEZB17ssO95+e6iDxGCg0xc/sCIdZ0/3BmsG5Ggf6Jn7PB/Y5h1e+JXf\nJmKd+9o49Uf/xl0DruMVCixUAB1eUVKzJo0REQ/6FW7j37gy1/BzhXtoRyZr\nqR9/K073PjvXbiic6I+yyLx1u5oL7Oqi4ynSicubH6b5LsFYNiOOweJ30kmp\nlzm3nb8n3nPuEc30F4RcyOmx45co5byuMFhpr2sAgBH0CUGiVazmSmjHsCR0\nKfwhlyOrk0/776n+yw6FAY1iUAAXACs3ZrF/v4fQ8Ky50hJO4eLsMC04KjlU\n3UvX\r\n=bsuF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"beba3c7bb89add74da1e7cdd097be00de0588a25","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.2.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.2.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.44_1622710179376_0.9711663745791033","host":"s3://npm-registry-packages"}},"0.29.4-alpha.49":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.49","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.49","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"0c16c5918748f84826f116c658a32a065294a5a4","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.49.tgz","fileCount":2435,"integrity":"sha512-j13mEgMkOpAyepmIHRE2luViAeua7ac5HJiHS+O7hrernxDDh1gQDiM165wv+4tHcRajA8MpcqTC0kP0Lcf1KA==","signatures":[{"sig":"MEQCIDYs0GGsrZ01oWNS+yxRZA6nDb5XxDLj2vzRxTL3kveIAiBYrpxtCwAuAiUkos9ygEUFYJZUnQgWwyliZMFcpZjplQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1823440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgveKICRA9TVsSAnZWagAAkvwP+QB8jRaSDimyQlMAbFyF\n06HIlt+4JChAtc0BLpwaivc3PVM4UettGl187jcQFmcIi5ceshZbh7uglZ+U\nnaT97hWU/gUz4RNMRO1p5UzwPU1/4cafmOqJIwF8e2wUDizeJEZw03OntINq\n9pcwagauPJvtNsilxKtYZlmU398Vm6hHgHpFaaURoJF257XyaN/4IQZamY+I\nA/+khBfyYG3INnyFuVw1WLiodTkJz8h474tJxdTldlZqIlY3kyyFqvLgDRnA\nr5HptMIDlmWDzKEy6JypGKJEHOpjBi/Q+hrQzc217mVenuPgeVAXb2i/xZL9\nqg77Wh4xmqjimV16KcP2FQXIfx+1oCZl0cJ8zHFeEg6ztKy7ZSgtbII/cI8B\nh5Ud/4XRVIiNPgjYknS68+ZZJmp/9PytF1kbHQxrzEcUiZDGi/uC9XuULVck\ngisdwpQHfsfHf/ZL8aUtbIZ8p99mAa1T99Aw/PIUh6wmCUlN3E8aCx+mGj0b\np2o4klWE50ZNLvwATQUjiyalSStSEvMqycjdRoicOLOYp4KZ0sqK939SPXTS\nTAMvTM4pQ8WVKS3T3xj09YedBSjIPhGj8X4/x9RQfcc/t3biYP3Ql0q541FB\nLUtgQGMiCmATl/bZfCQsOgQtadO0BxK7aqJz0qZXYt3LxmsQjcXhhAhSQIoJ\n844b\r\n=ZzOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"7f208b05e971e4af8a24e78c2aff765242d39464","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.49_1623057031860_0.4642577235835359","host":"s3://npm-registry-packages"}},"0.29.4-alpha.54":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.54","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.54","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"cdb8c95c6efbceb6fc068eeba8f46689b14efebb","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.54.tgz","fileCount":2435,"integrity":"sha512-WAmCQ7Ges1G0IJwmNqR8AMeI3kM0l/xMsqbsxZ52nF6M8pMcZMU1S/Nw1BYc9M9PB2pW4Js3Tr//lKozS4uVzA==","signatures":[{"sig":"MEQCIBeE0/RxpkortmmmIk3nUoAgCgupfwuvkxQxDcQaYrvcAiB1qIsxpi6PzlzAbZ1tS7Dx5dfSEoX+X7TQYPqe1+jJHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1823443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxyaCCRA9TVsSAnZWagAA/5UP/Rkq8pe9zoPyOqKFdVB+\nk4KN/TQzuPLWxOB0tdJusgDL5nffRMNO0IyPavp9bS3O8aHuoLG6vF8wkkTY\n4vDLDwe1bf8gKEVQviOHlDwVgmkfce2GYc5g5Uej6/S8FDsWTBKBE+5iJXWt\nR85r6mG65d92Jxa7JFsdb6eFj2OiAa5R7MQ1eTp56NNhTpDkN99FN50vN/me\nypfUoJkxVdB7ysU2bz2/0VBTObpa3G+w3IRBdPTXixZ73fK2PF71dY4GXiSK\nAY2mYGwFeoA9mVcuGBAfHU5Q0P6xZMRe/01OIEWN6CrNN+k69W5q2ygqM66l\nuN/lVLe7pNODhAhCMFXRtB/jCGRbhoYS8pofKvaiKXSZcKXap1tFHWCeHrDP\nNZD4H+W6R9l1VTmPjBN5Uf6Si0BeA88LK1EcPZohhDOodrXvXQDVquj9YvSK\nsPMs5ZP8iiRKAruSwTMJcFKyALD9O7cetylMOPcxnuHUqX6A4+DjY2zlDP5m\n3hvOeXtts4rd3rO/iZCHSFITIzhAn1+TJo9sSG9CSW/M9EdY0VSu0lnLJbZX\nOnTIq8WapKTchrhZ/xYVA+YYnK5DDhXeepssIgoPcz4CMApiRSpxKZayPrWO\nJwX4SxSWJkt5SjxHqbVCwxzNiau+kRmZKuCHBNzPLK1vW3Hn4j+aF2IFAg+F\nuJqA\r\n=0wG1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"c7d6c170666b7b80a88949028e9e5cbd76d866a4","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.54_1623664258150_0.1773638687958896","host":"s3://npm-registry-packages"}},"0.29.4-alpha.55":{"name":"@amsterdam/asc-ui","version":"0.29.4-alpha.55","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.29.4-alpha.55","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"e60a3f4e8d0f4ebb3239529f7886eace6058a6a8","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.29.4-alpha.55.tgz","fileCount":2507,"integrity":"sha512-4wEqLIqOM4L2Az//8R4Xp3surV0g5XaO9Dr1kfo1sGYX9WwPbhdVeITSsrkTLVmN8LIZadszHO7df3FvEY1FpA==","signatures":[{"sig":"MEUCIE7Ag1EHszjkbqbUjbDy25F4q1sph1NVE96C66ZL1cQoAiEA39LL/Y7ra0bbDrgCvLmlQHsgUiIaOjxp9O8hCuAtwgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1896443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgydfuCRA9TVsSAnZWagAAnU4P/RX44lUsBpyTRo4kRK8I\nmG7O1WXcrRoYTDZfwYOJX405jbUJKCh3v2Psu0hm4LP/+jxSxvRXrXGody/2\nbTrtthKXc4xkRdolK9t/z4DN10J+vOwMmx0nbOgIY90ZEbDZArW1752JqXud\n8+aGsrDt7EUT1H4+mVppWjYgr+ywuZZpANbXvAqrHB+NDgC2/TmLtGki1R3Y\nzKwtMB3Ca14I3QRzJboPnm5xH8O0CXecJ+9xDlrD0myCCoW+Qd9YmUDpJo60\nQ1wqFVTQnGVE+4Z//x7DzD6wU2KSTbzdP5A+Rdk93p3wr8djtmSkjAurL/GV\naSUUMtlqq3PrjRS+NCYNDQKJ0WaA2qYjbkmsZxi/jnCokmw6nn7tuYPZUYf5\nfGj3243zWFbWFW/sd56LAIrly7v9ipKWHzWQ+NqnSkKtHSIZvR5KtYtSOfqR\nwF2QhWTSvT6m2S4TVu0ZbGD+NKNlWnLGT4Gu4nVZD/Aum2+AgFM7+3Sb3CSk\naUoOOeAHDKZDlsGQ1G3k13GtakbLOZRgIVPFD9tgbpFyc71Czl5B2zAR1xLR\npKUUu5oMElaLKAipjuEdumq2vBO7hMx8r1qw8J99kSa8GH1UJWBK2ak/h1am\nYiP4PuPDivRULCTCF1IyIKieZV4tRAVM3sZn6v33Xj0u+2e6y4NdUNUTDNUc\nL3gr\r\n=+MH/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"28f61a6b54849c2a6975a518eb58d9aada5c4f6a","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.29.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.29.4-alpha.55_1623840750367_0.462125209368069","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@amsterdam/asc-ui","version":"0.30.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.30.0","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"2f9bf0fa58bee75cc09881f6391134439cb52921","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.30.0.tgz","fileCount":2506,"integrity":"sha512-HcH+NMlFDMazPyC+OkK1l5mX0qKuUwDTTMG9DOHlKR23Fce1b95/XexjF4i/Ay5h/ZuqH9HTrSaM4j+Z3zQazw==","signatures":[{"sig":"MEYCIQDJxsGAhBRQMihv8CckVtsVSqL4D5RuZn/sG8rY8aHH+wIhAM64I66AcrzFrbFE8vXpdqvgMS4wm3RCVfMfQKBAaUkE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1880845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyixDCRA9TVsSAnZWagAALTsQAI0GsmOnggthPSkAfvpn\nQG2kaKots13FmdvyKjF2vKn5rQNNtSd4pavwzvTc3xKXXc6yNSH8Qx/RpuHq\nj+n9OtSBXMqH0LIHEuWXvZ/ZrgkdDCQD+p5NgWOqU1o1Z3fKSyicV60iJMEp\nBcRAFkSyJ5ahEBDwLl649kre4g8qmYBjjMczBt8cicPluAkg+7jL+P87odu9\nZ61hevw53prAb1AOmg5JsH3KQfQVMG6MhRWHhe++nYX8kJ8eI86EgKJ+e3fL\ns5E1VkAo7Tq0h64qJDbSCZaVQ8aK1Zdaaadjftci+WTo7Ss0VAkbR/0RrMzZ\nkRTPy3GV0CkFQqajlQkzr/Cxuul1XNCeOEdxhBTxejcdc5TNiYAdi0HbukvP\ncACEd2SQxDdaLCY6+4Z+i+Xt2ABi58yL0JxsTyVaJ+w58EBD/VUhRN7FKK4h\nUURwy2QJuSMK5ZiAyxtBNhNh8BDhwg6IqaAQVsGLWNWu6ZPm4qkXR34mHcEN\nxj5eljvXpKQ0GlV7uSEzx4YXdsDyxrO/U4xMrUbgRhwc74xQXHNCQpYJOZph\n/UZrdBhk+uRO/junpUAXp2udbORFmjHAAUhTvOE+6tSQco0HX6jPwHcjqbCn\nAoPuZ8l3q1/DtH8+xuiNAB8SzqMtOKUkOpLMhKs5jgtim6H+21kM60tRs2nr\nJeiR\r\n=Tvg3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"645ab7b2c621874385adec20287923ceb140e70b","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"7.15.1","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.30.0_1623862339042_0.3418776990948731","host":"s3://npm-registry-packages"}},"0.30.1-alpha.0":{"name":"@amsterdam/asc-ui","version":"0.30.1-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.30.1-alpha.0","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"9a2fce2351eab2b26b492481d8adb06707d0e321","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.30.1-alpha.0.tgz","fileCount":2507,"integrity":"sha512-EzYx7QumsBjp11J0Vec9FWq6XIKXW6bzgYLNU7wLJ8ONDu+vsBP6dXL1GbjjJ8GZVd749EiWxxRfw0XkSOmP2w==","signatures":[{"sig":"MEYCIQD/tVn34s5s7GTPHhVwpiOSUe8U0zd7L5JVNJ9x9kWtGAIhALPHRit/S7zlTJPMk324bOA2Nb2+ZCrmDkD7EBTviCmP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1899997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzJCcCRA9TVsSAnZWagAA2wsQAKCh0k4rbjENftZBMEVC\n3eLCDQQD7z9035MuBMiSDrO0Tpv8nZ525KJ5I7wWz2d/85j0apo7EvjS+Q65\nlGhcC2hLIFQrwKTk2q19JMw+NTmfFpxPxZ/Bm7Y+KCJpE6nUheVkfI2dFwha\nWegj/56Ke1qyF+Js2zRMy1bkVvFST/gnzIfpKKBZV2+SwZujgc5e08aCgFJl\nRscS5Qao0J4HJjYAUPU/OOgkilhmmzunigsA9phPoFNkcxvq64YXS9nr3EqI\nN4DFrpVaN+cgII4nSaW2+GdXD5Z3TQMg/fgetBthvKsCbHCjgADxaikAtbqz\nAhsYj6OKEPMEFRu/95w69edhJlnW96lj3SOBhLexoHiYo1J0aEWzCMVXVlxN\nwltn9fnpureNx0m2i+Yb5QzoasME/YschHLWy+hifFd5dZ7Ic3bGk4lxALCP\ncybECMIo5wR05zfwU3YJ0g1JkiGIqKGPbxGyncW9UE43q1inMHWvl26/1EYv\n/UsM993PJTnUsbsb8rsm5iC8bOENOic9wJJvJ+Be8tGR+mI26C6nshFbR+hi\nSH7yLtkIvxuKQqr1vQ3NIi3KCHtzC/mfqEHp/eES9tpEaxFjeY1BamwuDSZH\nlcc+bh6iwEfXrHg6l5WGqYPNFySwl2cwXbJAYonUwnalD+BGRW6hCS5fV4N1\nwrN6\r\n=cpLZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"1f898a4015248abf467226c95cc522c9b010a755","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.30.1-alpha.0_1624019100326_0.22986378226535686","host":"s3://npm-registry-packages"}},"0.30.1-alpha.1":{"name":"@amsterdam/asc-ui","version":"0.30.1-alpha.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.30.1-alpha.1","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"3392af47529ecabdbec69b8d295bb87fd1e9b482","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.30.1-alpha.1.tgz","fileCount":2507,"integrity":"sha512-Ch2XD2AYZ/DilXK0NPuCPU+y1qvvjfTnl5VNlyUVS+LEzkpNATs+a89a+8d56PeWG8O9nsMvKAmshIVVDx0azg==","signatures":[{"sig":"MEQCIBF4/3mF0PBKBWHPIePdiF2O/ra3RFQAQk6J3qrxp4oeAiAxQh7VGyGPtjKWphk88P6h4gKh/7zm05tEu6TXjs9WBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1900093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0EQmCRA9TVsSAnZWagAAJakP/jIbbhO0MXTIYWk07iqb\nt7ABWk4s61P31VGrDew/N+8PXvAtFrFLvd3cP4lPLe2Lz5YJeJXgpil55N3Y\nduXnWAnu55VQZ5lBkvbiu0P7UoX4VjqNoABp4Pi7b8h70ta16/MTlKxfSiww\nYr7HVnncYmOSvzdXRNP0dLbcY5kOmHYN+RBLteClVDTkoiAtOaEdGb0KOWgh\nkOv+JmWSHVAA7COCjfauL54ATrpAlydUoK59Kcxr4/ufleuItXRn94zAiv+N\naud4lUNwLTTfRf0rtqD8+ZJeZNXjvZCazafbPrzs8c+5ZQi/nrW3x1e0nOdC\nQ1KmFua6sJKheKgzFOuGp3C8N2bDuFv7xiF/0bYzUQqWlGrRui+dj6oAgMDh\n8oMhBEu9HwuBKsScqecZM8yVyRFE2rFO0GzHJk/n5cnjM9wGFff4hWr0wJ+y\nWSpRUyGUO4/JczMuRdEBEvLE6mFakX9KRaxOm+0IHB/oo9MrzFV2p7ipY7Zt\nW39zGSgqdtaIiYSM2FoDWfGlGINIdVEftZjlJXQEHkM9hbSHdn/PFJ4iJNxO\nGYlpCRw3WfZc2gUwQsoVLu88ryECF7nJMzEN07OlyGALNmjCKmhKSMauyFYs\n8Y0nd0eASYg1uVpijWkmUk2heFIPJtlrNpkdy9D8+EUJPJzrQHpl3qYM6vJ3\nexgd\r\n=11zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"d462e1488fe79e71fc36f173334333da475ec128","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.0.1","deepmerge":"^4.2.2","react-uid":"^2.3.0","classnames":"^2.2.6","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0","styled-components":"^5.1.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.30.1-alpha.1_1624261669442_0.06872998524669072","host":"s3://npm-registry-packages"}},"0.30.1-alpha.20":{"name":"@amsterdam/asc-ui","version":"0.30.1-alpha.20","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.30.1-alpha.20","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"b8abf2474c40c5e36e31fb3bb6a252eaf665905e","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.30.1-alpha.20.tgz","fileCount":2507,"integrity":"sha512-oS6dcueI4XQMHh20cSB9BA92Sih5OFvpjVQwguulQsjRiGvwBf3xPNey6TB52g9H6KjMuweguSaYWAFcKL0WPg==","signatures":[{"sig":"MEUCIQCMLsvpG/s55kBNpnHTDkvzbaLdyjCyeTEe/qwgqHlmRgIgDR/gFCDElBjSneCAEbZ+coqiPhj9EFCNViatkwTd6q4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1897735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0a5/CRA9TVsSAnZWagAAwVEP/2HxWk1MRHsToS8l8G/t\nbhb8FgYGixGwyfU1jWyp+xHXFIeBbSLVK7vFbtEX/jR1tOlagOu3SpZFaGJD\nRhifqFGJv4KyYTR2HV3E0cdvgyKLpB2MOYZaeyMfkfdEjb4gA62SSWkTINFj\neq335z3SlF2QDyjgUFfRsCYH78LmRCaXIBTMp4iJA3OBS5Ow8qNgWgYnTgCj\nPCqXQ5HI8CuuSgqeq+Uy56S6+VVGu6F+Y2aKvcJTlCg2V6BaLkDy3lLbiSBa\nSsLc8W5Uqavi6dWPfGB3/BHWK+nT+l9XzrT0W9wIEtSUx0L8Fo5olgcInFWO\n5wSvi9umpRO+p/++3a6SqAcR9q5C/ydRFjdnKDILZ86AHp1nARw7z30Nf8Pn\nx1Q0VSl2JTNj/uE18lws2Pb6DE+lsVUdd72Pq06YkI8x2ssarMl3c6OHMwGT\nZ9xqpSnhxm0Cl4sq8TdZpg3G0CCDww4cKY8UZRVQ0sdHMsgcMQNWWXiEroAE\nidBvwIq3opwxl1pT8ZNpT6n3tPcxAScAzqgsKbEa8dCExtbgqsB8wDjg0o/J\noGIWNqPtih5ye2oSJ5mhd+QOpMX5ucy5e7GdMF4+1PxH9NhHUQsQcRhUTSbC\nBZSL39C+1iDDnD96+4Ubc1ccIupOvjzQ5oURS5ZYGxBhc3VoqBkl3ZSDeSnE\nxwRH\r\n=hvbD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"55045c7b9b52f888da0b1fe94b401b2ba681bce9","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.30.1-alpha.20+55045c7b"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.30.1-alpha.20_1624354431095_0.07631984572797723","host":"s3://npm-registry-packages"}},"0.30.1-alpha.21":{"name":"@amsterdam/asc-ui","version":"0.30.1-alpha.21","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.30.1-alpha.21","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"d35b1e0a302cfa00622e8a5ee90cdfda96ac8504","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.30.1-alpha.21.tgz","fileCount":2507,"integrity":"sha512-Qbvn7upZLTemG9QpzZoIoQ0Ala9gzaZrwpw2QIWMJLwmNELFAypT+yIgEL59NRq/ihHZVNi7GAr1Deld4EEdMQ==","signatures":[{"sig":"MEQCIB0HrgyMPSPDi2H26moU/BSNidk5E7B9WGNHWHFGWd0UAiBPL/V009CABzXiz72aB1WTTsopdRIdt20w2UomN9X9Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1899115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0banCRA9TVsSAnZWagAACFQP/13aEJT/OTA0BmqTKmwI\ndQqX1cpwyciEvHyZxfQGzgBn9skFk/Jc8jMyRUzisGr/abw9QSvCp8tM3+GN\nuAuoE8rxR6XykirHehvvaS0x1+rJvTsGKRUJkri4P86Iv+yzoo2/k1SJ94kQ\ndD+erzDE5mZFuOUYbz1aE/H2aKCKargCT8XRv+484H8sFhOzv1X27G/lBYv3\nTi5tJlOGx8032MWtKna82H8ejiRF/xJFWOImkyOaTuYM0W2PU5xAWwG8Nxu7\nfq/YI8UOA0I1yBwccWpX8JTYfGZhmYPZ13ZyS4Y0ARHqgr1HQ8+k2ZiQKy9b\nCBcIjgc+oOkUtke54EwtfEbJf9TIEg4DugsIObHI22wn1rrioLmQyXu6eyfK\nWttD2mT/gcrqIK48p/tkDSaPCzzrKyyw6swXQVUTK/xJa2ocF02lVX5uEtVz\nMFiMGbPcsT4YvkfI2X8oyy45IuC9oVY0M3Mub5uFEpLXI3oQrXn/FLtJ8SZq\nNT/tYA00WnaWxfblu0kjexbUMdsPLYtXLt6QJI5NGNJt/Z/gfE5Shp95gSkJ\nge/GrI29eZyUfV9A+eKVTJk3C94biYNHcVSfhIPt/2hUErjhZQ9ge88ftbYC\nGel9qNBBtnWOw536C/xBy/KbcFNhB9FIcjWeGUkzMPuMsAB/KSCYFJhBvVYc\ndJqi\r\n=Flxw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"aa2fd580aef17d6f6410c6783f998339e5040ba9","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.30.1-alpha.21_1624356518347_0.800907856714278","host":"s3://npm-registry-packages"}},"0.30.1-alpha.22":{"name":"@amsterdam/asc-ui","version":"0.30.1-alpha.22","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.30.1-alpha.22","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"34bf60a38f2cbf33b146eae62a8d9b1026992bcb","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.30.1-alpha.22.tgz","fileCount":2531,"integrity":"sha512-ZwuRMe0PP+ol/RLVmq+UYazsX5kzreRXd6nQxAWGVQgYDldwpAAdT6RQbxQg3lc74nEKFEzS1g2o7Cucz3x1Zw==","signatures":[{"sig":"MEUCIHzW2NzZUTXkr5JWutkAnWXYSr0BLvyzJOljeQ7fhbsaAiEA8TasHCtvp8wBH4VkzbuMnER2VOB8VzjtDsYw52Rrhtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1915634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2YwMCRA9TVsSAnZWagAAIPAQAIwTPb/ot7j2JlPLWk+p\n4/3OcJNOJsf7i1VZy/KSyizoRzBiPJm+haVsQVkOmPieWRVS3RRcc4po7agF\nAB/lLtaejs0z2cZONj77tlzEosMtMjZnub1EHvwzw91QGe2XNQXX9HqmbLYH\nssXb/+POw9Yg2qBKCRScmnCEaWh0K4Ze9Bs3Et8WvnD3u/ZLei01vUmpgvDa\nLMAv9nTYQn40wLn86MiTYB3+sEmRpNgYKxo5FVEJcCudF+liX6rlHXO5GSTP\nPP21p5u2kyiXtER1eSAVWwkmw3qSf+TinvXGIxk8kNTxqpmd+CrYtyxRdSSt\nipakUJPxOv9lsoWwU6dvzmN04Bp9rW2jgTrJ4eJQY40iinD6ojQ0MrhzKrlL\n8H1a68UzDecqeUE4fikL/BiOgu/1YRPB98Y1FYnRsH1aDFGpMQcimzT5udJ7\nJlvMQLr7RRH5NVN/FqFee5+D/zvIlSpTJxfg1jsi+7IgVCKugoUc7ew5sbWQ\n9caknJ99e1Nz+IqMvT6pR9TjhATfUgoJ34zEzVKJEISmko1JV2kAN0tB1AYk\n02XTqU6dyAluWhMz5FkK16bcNan5Yj27pUnFNf5wSo6e3N9G00Bu9U3gc3fw\nayb6Qnd2PNNTVx9Pf039GPqV9ngImR/JktVdGKAWZYSJ3JvsIVtkhSfyEO9t\ncVXg\r\n=Ouza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"c39c75c328a009919f2e6296236822c5b90345d1","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.4.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.4.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.30.1-alpha.22_1624869899957_0.10009082408458991","host":"s3://npm-registry-packages"}},"0.30.1-alpha.28":{"name":"@amsterdam/asc-ui","version":"0.30.1-alpha.28","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.30.1-alpha.28","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"6d98351b1474248518858a682040f295d07b2fef","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.30.1-alpha.28.tgz","fileCount":2531,"integrity":"sha512-qvMDs+z9rC6+YO1B9dX3F+ROYGbg+rGsOHq0gx4OPr+9JXMAzSMNjY8j8yPS3BLCs82+DzfUVSxWOqwmhJUqZQ==","signatures":[{"sig":"MEYCIQDXsPvf/1hqsXDNEL0C93tTlpn9vGcFCWHAfKDuavkwAAIhAMMBaOCU2UHZiNdekd758hh4dgaCBNQZ3mhLKECndvM9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1921252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3DJsCRA9TVsSAnZWagAAg/IP/jLqUo009gW21jn3Lfyk\nkn1Bc+7Bz1QIdGVtGsrdFwNs2b0T3GFUtmeC1clUO6k6H8uENlkjYbSOUODe\n8F8qiblAngtn1Fua46ple+K1tnibEKuRUlJzm0/j5f37pfo2MpyEL+rBDUG3\nszhFIRDLDyIaikdYyjOhh9O5kvBvqoAXLNot3ZNp/vWDr1xATwMGHM8lYwvV\nA6w8YwUPckRJ7lx1Z29/mgVJaQzjQcMrfn5oCegakOFblm2r2USuJgBG3kfa\nLM+MyGeXHXBthwx7hhDgdXDD1MWUiT6KGZbH+OoIjeTAsZI2hXazo89evRSH\n/NxCukj7pK6ApNSbLCL9WIw9qvgqaYCzHLEXuxIP0pKA83lhP/UYiS2yI1pw\nVnBSVUGPPoS2b78UJGiPy/JFNkYEcbNG0zvkkIK0lJ2wWgCxIFfYgP+DRhV0\nwFeEPHoP+T2iDuQdVJJZ7Q7OwA4siMROoT9ZVzqK+W+UeG8J8zQuQ/JP1OjK\n0JIDxEPDVnmEVAQtFbs/jeDUru9ZBGkSa14TQ5HqmIf9rk+JZ1TD0DI/3rLo\nI+tbDQ/T/fbki/IP9N00Fj5o/0lOfdiaRqkLO/OCnuTfWdN+f18EyYhhYbtL\nWftn5OiuuVqolYBKwMrb0ffnV/4hT3PS7P7J6XbgHsKcpJR3PMVOWSCDWu7P\nMtf/\r\n=pdV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"3d9b5603d5c2f8de0e30fa59bad5dec7b027f069","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.4.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.4.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.30.1-alpha.28_1625043564114_0.7076036685361358","host":"s3://npm-registry-packages"}},"0.30.1-alpha.29":{"name":"@amsterdam/asc-ui","version":"0.30.1-alpha.29","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.30.1-alpha.29","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"770590b729f31d419baa0c15803f877de99d8acf","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.30.1-alpha.29.tgz","fileCount":2555,"integrity":"sha512-hsOlpA5pTtBnPAfz7jGww4yTu5TctGfwFuu4N57XoleJ4dnB5RrDGpwzkFkL/eqqobe1EtQfplQHfJOBB6J0pA==","signatures":[{"sig":"MEUCIQCS3fUXIrrNLaDt4KED5pZnw9HvrQkj2h3N+/OXgcHzywIgbjiY5e/Ehky3VnDxuh+seA9EC84mxMVizDFs+QIiiiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1958218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3JhZCRA9TVsSAnZWagAAzVQP/3kHcuGUbTkVwzBJ9/7E\nQ9pJY4lUk3GZ3HfvwxrTTiX7bHNb5dZFosi+8dy+trGM/T8zc1YTggO/4+6i\nDMeRfibj1PCVd7k3W7jk4sk/rNcd5BS7QhdWemVG8HZ8y4honS2efxkbv3ar\nUpKbOrHBYE+sa9B5kaGj/JDqIEkDhtBeyGXtu8HcQyERzKZnVF6jYr5HcuU8\nYy5rFWiE8kw8q9q5nTw2skBdcTsNK3BkDKAcPFsbBZFXyyWDkbeuTq4qEdNl\n8Ht73bBNKAGOtb6xUvY/DeMXyFlAHfyVHMez+pFl0XUjMnQc/SR4gpVX8/rg\nZhw1XAjDj+tUoedE0CDpQHVD599KGvKopMPIr/ExzVuhhVP9HFhjORqmiLXp\n5KiMsyx++8ShOUgMzhwL9ACFNd2os0R0C7hZTJk7i4ZDlAAeuGNfWaFHINtl\n4HNbLcXffAJK+ArFb38oX5rNf6O7bEsN52I98HMhJtt1rD8iOvQpeQMUS+00\nDDx8rcTokIHH9SDmv6pd7gSUTp7hgceQPGKIAOCbSHR3VjLrO8SXKX2bPXly\ngKu054zdTmoLhL+kqMLxwwDRDbcTygOK8MIT7prQUF5gvwvZYdLWMG9DLocd\nit1r1Yld+zdaijlBevuhtAkWaTHxP5SjlJE+HjQZlcE7LktvAupVEzU3JHeB\nIJ0E\r\n=f0ZN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"2262152eca750868e7e18cf4f9c390afd17be27b","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.4.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.4.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.30.1-alpha.29_1625069657003_0.6815614242412293","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@amsterdam/asc-ui","version":"0.31.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.31.0","maintainers":[{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"9be52c0f8d04bcf42e24c2cad583b2867128814e","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.31.0.tgz","fileCount":2555,"integrity":"sha512-dXo6ojHzT8udYYOaW3AAE3AxEWbBIQpaCr4e64/OPtJ90pBBt/DBSmu6dib6cZdwbobAG7DySDkb2AsRH9WqXQ==","signatures":[{"sig":"MEUCIFQool5abGKJsUUl72rv9fRnsCURkp1/i5Hur8z1wfcpAiEA1fgKyi2IwSO97RjjO3Q4fJQSHq61fIK/qj8SP+tSnuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1958200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3YGtCRA9TVsSAnZWagAAlJ4P/jzSTNa+ml8WUQMvIlli\nObheBMHgUc0I9P+YFuEHx47po/KH1WFXj6OFYVK2Gev5Mc2CM+0E0L3P/Co3\nrZGW9lqQLJTD57PVQue1WcpufO8HwF4GBxaqQ6HlffqROBKlbWaIYmcprMyB\n/EGdn9GdxFA3+4rYSGH+CEjsMoCiGpUiOmxk70faEB1xsHYO9In4o+xXdOXq\nQ9Br+r67F4cH28e9bxBMsNmul/2ZUl03iyu0M+xGtZr54W7u4sx5JlXoOWyN\nVFWFgOXVZ1+6MqdBHhclUbPtAtJD5D+YfoKVedMWy7qGoCdwpRrnvl7oWF1p\niMPHINeZ2kYupwruRp5KrwAOptHxaBcB8+SIlA0Xit9LKoCMA0XA958nj5i7\nc431+PwKBY0d/qtg1uqcH85wo4Ub7BVljAJr0jM+zvJDWMvmSTlhlZfoSGc2\nHYhZb0mKjyIXsZlQatDIchYalrku2ZBAYS3EWQ22EDPVhbq7VC30djyCM/Gw\nuav94/9a9ZUsIyacvVVm6IYDR0RHLgwIN/T3qvcDoaNn8EX14lGZ/8rBIaJo\n2H5kDWFdoJojHOWKTuxYF/r9dVNUANqMg4MLDdcsXHSoX3HPs60QlfSn8PYe\n6Un24brCr94GLW2tyrkxCBTsgvcGIN1fWlW+zDlY+e77ycQO8tHKDpLaSLEV\n1dB2\r\n=1jJ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"d3dee4e36154990a8172d87e730847471c783b06","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.31.0_1625129389334_0.3855656505645879","host":"s3://npm-registry-packages"}},"0.31.1-alpha.20":{"name":"@amsterdam/asc-ui","version":"0.31.1-alpha.20","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.31.1-alpha.20","maintainers":[{"name":"fortunato","email":"f.geelhoed@gmail.com"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"aditudorache","email":"a.p.tudorache@gmail.com"},{"name":"remcohoff","email":"remco@code010.nl"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"77a39147120a6ebcbef553b00db47eb73588965e","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.31.1-alpha.20.tgz","fileCount":2555,"integrity":"sha512-Rjb1BhutnsRnYH1/g+DL97U7iE+t+7o7jWfdhKsJUkeFcHSyEmV+SVM+LmRL/2+Rxa1GCDGtOWxnbmNedmgGMA==","signatures":[{"sig":"MEQCIDRxq5yFxYTCxcCxOptIAUC8MmYaGjqA+6dl0LEhNJ4yAiBWMvU5C1vSJJ2a3d7uYtCt9RkBUI4waH/tb/Ps9cWmGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1961840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9TukCRA9TVsSAnZWagAAMgQP/3ZgpNOWnjjRG7+Vy4oJ\nUp1mCdjQbv/aPh+Uz6V21GSXXi5Hy/JxNGviHcq5O3zpOt31DXqqQjoC5VVC\nt1sCIih/zmSoxy/4Peoz8r8huOXhaYiIk82vqD+jVLydTfu/K7SNMSEC2v8q\nKQovDf8tx6slZAKMWjbbtM80Tczz6qCxrfEKXPDt98+ODjVlbQxC4YteuBaM\nIbxsngL4a9FwbW8J5AtiY66c4iiHR/YN+ZcB6LpH8Ha69XMvEaZtauPGtuOl\nt4vYq4tLSetlsdBvOpzXw2fUMRZlZTn4pHcy8+289m7CwZ1nRrnLiXFo6PWQ\nprhXzF/fGfMRCdwtb2ke5lyXGvsPs6KE0agUpYRFBytYGlMngZLi/9sF5Iem\n9km/FOrhBcuaCkvrIgfZwBdvtjL0ac2n5RZ0ooO8XXZqnP/4npOXwLbXgRtw\nZ52k4w4u2m/vNQD0YJJl8xhhe9nIDz1SHlyFK8VdpIbguZG3iHWvBQ9Rqd7u\n3A4PqiZG1YDFOTAAvAyVngZsN4G0snJ4DiSdcMFEab8sr8NH24pk0FPo6OMg\nlwTcYSRIu/5YMleNoaT/QNxtblHE4aGK+cKmVg2ZOHWvFmBahcD7CU1YK3Hc\n6rxdLXora7ycZNf+3FXy1glkl8p4r38pYKCJQGN13qR8wcEa7ZEqXF/OhU0X\nb+kX\r\n=TtAq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"2e10cc174a8800abf95050514948a4479eba73a7","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.3.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.3.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.31.1-alpha.20_1626684323914_0.1075824945912558","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@amsterdam/asc-ui","version":"0.32.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.32.0","maintainers":[{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"663003f52a60bd274163575177311c335e2affd6","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.32.0.tgz","fileCount":2583,"integrity":"sha512-MbYkMAycU/NncjESrkFVuYF9AI1Bi3vykeCMxfkSWvm76YFUHqLEoMDtL+xoIym2poDJVah5db16Y3GeqsNAew==","signatures":[{"sig":"MEUCIDqzgHKAFXYwIvYNYqDiu2T2l1AM13RAvYwUmMmGvGLnAiEAj8CoL4DbfolzMZKWffLy9AcVbJWaoRD8n9A/4Fsa0MU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1968870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG3jRCRA9TVsSAnZWagAA9cYQAJ69sK1d7w+JEozsuBGf\nnhdOhnckDYZV/1ho39m54kniJFnQZG42ykToUAgMlHVCosyrtfJENqbeAbFQ\nXkhyX42hclTzJarT7X3GYYMMrAjy5UelwUp43+GMD4xURlnbP7Q5CL5Sn+4+\nShuoZImsHFPlEdNJuC3jr9wi7Yl5c6dVqQpk+SBwMchPLzr38LzjPmkrTtpS\nhdco6E/a7hFFdu2M5jkhwtAQapNhrZqB1fpKW/k623rF3zHCQ9U2QGBkvlwS\nh8OczoMMarE7LRalPSn2WcKMPQBOWWH59X5rSnzbHruVyv04VuQwLj5Y776C\nbv8U2LTtuEM99nKWq1gyOvXG42b889UCiqBzC2b5JsWx3ZbDPpJfST1E4Xxe\n6nEkK3K1vZTFfbZaII8EkDxuiJ4Oc6XRhJhrPvUi3FjPWl7dSCBHZCEv3x1x\nWLphUqoqXCNILv+HvtLETdT3id4SvnnnTBDdI0/rM+uvjr6m3I7myOVq+Vmp\nspLOif084hVcDoWC9HQ9uO3yhbsyrdWTuPJamj8sYQgv78n0YL7FQcpSQUbG\nAImzEGTu2dXehcpLo7ULuYWRyIRR7fDIzhbil19Gv+AJHV4OBo6EfIIiw6LJ\nXWZ2o5JMxYuzdbTDQpfKt5JxZq3+lrSqKyUgDAQAgf/Q90mSlGJ+0lce+WQ0\nz7H6\r\n=jd1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"ef7987de5c209e4e76068eeec5f8c99f79eac3ae","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.5.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.32.0_1629190353706_0.7711905005100144","host":"s3://npm-registry-packages"}},"0.32.1-alpha.0":{"name":"@amsterdam/asc-ui","version":"0.32.1-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.32.1-alpha.0","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"a5e5924f549a18e1e66c7cf950198bac3ce43fd2","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.32.1-alpha.0.tgz","fileCount":2571,"integrity":"sha512-mkbStrKSxo4ZwiszFyiwHMRaqaJTu9Eukb4ylZfn/W9U6AiBxf8qhFwXkxuA3tif8Cy6Iokj8h8iEOS+6omLng==","signatures":[{"sig":"MEUCIGe28FMejokbisoU92deCWg6he2UVl8m1bmprKXnAZRiAiEAwo6nzawUBaXKdmiNFt0fDCFS9BjOEOcN10QhzaSlGY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHiucCRA9TVsSAnZWagAA0Z0P/3xZKRnufMcUXGtxcimE\nkHdPm000SWHJ8ALLV1rUA+RzFiRl2oosSfqnHbnLuraS3HnvWvCFxnKmQEhS\nTZuypdR7d/5CqOJxvOH3skMTQZewAka7zF+Yvem0tuCMzCPHvGO3Kw/yz8M1\ncykf8GeG0HVSa4ZwL1aIP4k5ZUW7qSmiPQLBwnn1Dz9y/AtuYSHVNcBgZyEg\nCOR/HdcrHH9/cAsXqVHZnzCKqo3l8njH0wHi0RkhlkOU8u9FcS3sBSPQMcFP\n2QC0xlgpILZB67HIlSp4zp5CYfKHBN3uK1FBU1tTlQDMjkVkjzrx4hyF+jqS\nHq8V331/+F7viItWbo3uIcfiHHs2WtIC3Uf5M2NGSyorjMlzmB+XPtv+mClI\nH9QbwMuxfyVn8Np/i0qoy8RFRTagQJC1OFXqn6bmaNvPA0ZMDe5iouuN+1hB\nxXWpkGNnifP52VaiLF0Zbm+lQoScVObsWH5P/83ZSANW7qw9ulSVGFF8b4Mg\nGhfuOEPidTDN5UnD1EmyabXnYSDqSzXYcmWAu410DcJX74GEOFu4QOvbiwGw\nczPG0xuGRVCZXPOf8f5c+oZWipDrAMImThGUa8xbIwxPPEzfGTMNF4HBITl8\nMCVBG1VGBKdE0zbq6fPdzI71To7vqGsc/lMJs8Li5Fk6Lp6F4jg5Ijhy6cEw\nRJ5z\r\n=pgt5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"79c6a021829328d53f208d824a0c5b61f124497e","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.7.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.7.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.32.1-alpha.0_1629367196190_0.7497940772421887","host":"s3://npm-registry-packages"}},"0.32.1":{"name":"@amsterdam/asc-ui","version":"0.32.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.32.1","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"5af9dc661080b9acaac3a13420bbdf3f3547e1c9","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.32.1.tgz","fileCount":2583,"integrity":"sha512-3t5NiVNy75jYj95jrJK9u1dDQYVqMumFZDfdTsqM4Deq3Rs8Al9aEZ+FtZwT2CWJ+6cb2wPqOyeDaJJsS+Klrg==","signatures":[{"sig":"MEUCIQCeQJ2pwgzyNPhJXRnZk6sb0T/GCRrY9rpvmONVvTXfwgIgYd54AzO9+IEghA3z2ximw1rYHMG/4lKmivWgF2vMMek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1968897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHivLCRA9TVsSAnZWagAASAYP/R1lfhAz+Rlu0wuum/jR\nt0VyKAMSK+HWosgrPG27vmSXhkFdmidPro4wO0W2HhyI5B64NJM4x0uViJoT\nFEOql334iRp+pYqGW3PJ5H9JKKu3uszG+KVyNJQMDVSHNbsXeXP036Mz9ZIF\nro7OrtWU5cxBvztOxWbGNpbUbAruOTaw2ZurIFK4KIAQSr1TAsuuHQ0qXuPK\nS1b1POiymoR46AIz2+lw2AmxPZLc6PSYYbDAgzUE83hJD+spq/pVK11jZHP0\nxgjd1bHJYMylwXa+TEuwqeKTyh1L3o4TPL6tTstEkRz6EVXqbMsQhwgKbxuU\nyNv91DZRcQC8BkKGlzV5fC5R9SPcoR4igCOeTV7ii6glNojQkBAJUSRkIpGr\nKh0rcL+G/gHpnBeJxVyDlMosnt0+oTDJWP/HdGMh8t/luvNQw6igS4rR95WY\n9Cdy1xpMiBWzjRfSf9UUY1JltJJPmPGuBwdgXSt6IBYR+cF2rS8CB8IliWQJ\nrHmuxMqU7VnpNVSmdKQoFZ8mDX82eB/vaCIfruNzBwY/HOVQ7Bth/JdxbMwS\nOY11jg08VGkV/20+pjhPkZ5rYyp4Ii1gqVwLShca/ym7sfNYnJqSxsRidIa3\nR1/ilGg2jcJ0bxX2bIf2yJBEvxf7K47LbC03QDSlyIaYDKdWme4K0rHYsdmY\nwoYz\r\n=Lan/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"4292537cf3738aa1176d949ec261dc2995a030c9","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.5.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.5.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.32.1_1629367242855_0.16608958849665156","host":"s3://npm-registry-packages"}},"0.32.2-alpha.0":{"name":"@amsterdam/asc-ui","version":"0.32.2-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.32.2-alpha.0","maintainers":[{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"ed7519672d6d13017e8ccdc1d2242a2f9aba5f86","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.32.2-alpha.0.tgz","fileCount":2571,"integrity":"sha512-S7MxPkllBtzVCV0nkXZmaZ24ojOZKkHkTkHZiCkEV7mzk4FjEx6AzKNZjxKzkQcAsHn/NW93qXhVgAtuoRKj7g==","signatures":[{"sig":"MEUCIHK55B1ByVRi1DvJ/kL4oWJxGvWRds6sRHk87sA6pm3vAiEAkKxqyKAERfL2cNFZ+15osCfAky9j/UgM/c87MQpjjRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1952131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH5TwCRA9TVsSAnZWagAAnmwP/0NeZrU+mpPjJWtsT5en\n/ZqZBEMyv47rCUS+Hn0aWi3Nko5HEIwN3W9Fwib1fR9Dkf/o4d4PACCo0FJg\nTKyDVwhj0SAT8XLYSD8VjWrjtxIiPYG/Mwo7G6Y5eFJ7p3UKGTUxSHMLwZo8\nywwh3YzrHHFfi367vxkX6jTBIuFLNmHhkbe+HFI5ugiI6ScHzZrjObNPucvS\nPX0KiJ+UVZAJgmFbDOXa47AV95Z1leokJQtChSKdINyC5Zmd1YeTjnxsr0UF\nqprObE00R4HEPdYrC+R7fa2u5giZu0pdSofEJVBsVCUO6L3wDbLqhUYOgldV\nwfQm3df2h9Y0LoGTn/QOtNzZezwkSfnzi7A5SHIGWMk9mN8f8F0rcbVwUfFk\nDFN9ddJHV+BXba29ApMxegpv/+qrKtjGiKdvzhJeHsIKTFut8f0ee6mUFtGS\nykE9KoYyzZRe3wKTEiMyfGTyC2yfKLU+Bm44G1GQvT4De8jFzJQTVQdBkeS5\newRXCw/MnUZlDew6GROFWHxkL3mUmhBCBtpT7Hsu5ZkoO4snDtZQupPY+7NZ\nzKXlJ23ymkGVWb6jNeQ3r8jfZQ13YUaela7spSEAfU15o8ri2em1nvTccntl\nVeXIjiCKztbHYiGU2302LcWFlyEWKRAsjL7/JOPC5eV7bSamF3yAE4HpIhPE\nTvTb\r\n=Ye15\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"0445d85f2b3da72818316dad945dac04b3e6a207","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.7.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.7.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.32.2-alpha.0_1629459696468_0.4406279113443532","host":"s3://npm-registry-packages"}},"0.32.2-alpha.1":{"name":"@amsterdam/asc-ui","version":"0.32.2-alpha.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.32.2-alpha.1","maintainers":[{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"6fca44275df9a5111d64022783c0add11ebcfd9f","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.32.2-alpha.1.tgz","fileCount":2603,"integrity":"sha512-VHspi594kDFDWzf+WxdslQvVRBdgMkhqSrdJk8Ix4ALFgahLWBc8tPEOQx6GcIH6seRsGqutwMDJSQUhpYGPlg==","signatures":[{"sig":"MEQCIAhnErn0SEdzFqcC6NlKYOOO22XnMiwgDYj/Ed/Hy9tEAiBVDbPyl0kaoVt54EJT1hdRaCaCE0BJpcSxLPx0UThV7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1971785},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"7c8d3b87e1c241855174946cc9658d810d5c6bf3","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.10.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.10.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.32.2-alpha.1_1633505942516_0.7843432199011089","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@amsterdam/asc-ui","version":"0.33.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.33.0","maintainers":[{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"gilleswittenberg","email":"mail@gilleswittenberg.com"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"samuelous","email":"sam@samsam.dev"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"fbd9ebb35289128e180800414e80ab935a933e2e","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.33.0.tgz","fileCount":2632,"integrity":"sha512-mOUWYVeAzTU4Hq/SjXcWZp8xBMQI8zZaY+4SIHvHv8zjvaWyu6sJcddkB4/18cOU7c5Ql4o/K+j0KFDaUp3jPw==","signatures":[{"sig":"MEUCIHIL8uqSbxAsbiv5pH5RDeDWkcBoWI2cWNoZhkWQbxucAiEAz6VQGM/MW0+631CC40+wPUb+fNqO1Ds8VSmjviv+tQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1986161},"main":"lib/index.js","module":"es/index.js","gitHead":"be0627aed53bab527171cbd7eba2598e2cf7bcfe","typings":"lib/index.d.ts","_npmUser":{"name":"leonardsmit","email":"leonardsmit@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"7.20.3","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.6.1","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.33.0_1633516694293_0.3004387767247927","host":"s3://npm-registry-packages"}},"0.33.1-alpha.21":{"name":"@amsterdam/asc-ui","version":"0.33.1-alpha.21","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.33.1-alpha.21","maintainers":[{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"78ef5472a41375e8505e162bce6aaec71262fc27","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.33.1-alpha.21.tgz","fileCount":2603,"integrity":"sha512-IomNV7rUcWGqIaE6bH0S3+h5RflzL+3WIwHYJLS3LVa918LERVargPxREJp86AAFCUhczYP3nF8ak2s8qyYVMQ==","signatures":[{"sig":"MEQCIB8Eet4YZ3MZY5LhLEwVeAr7doqoOJEazyp2APlcDBwMAiAmkyIapKguIJ7wsGnC0K+yT+VJwO7j+w3lJWoRBTazxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1972090},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"0a0fe8a40a57661279d5322b483c7d2b607936be","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.13.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.33.1-alpha.21_1635848619840_0.1754549579464202","host":"s3://npm-registry-packages"}},"0.33.1-alpha.45":{"name":"@amsterdam/asc-ui","version":"0.33.1-alpha.45","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.33.1-alpha.45","maintainers":[{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"401cede73715dbca1533439c358537ee51fd0641","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.33.1-alpha.45.tgz","fileCount":2603,"integrity":"sha512-vXYG5Rxs2JT32gzZMRIGBg8Cksf167nkRZvO8omhwToxOzOs6hNSuJjgk7mAMFR+p8w+OBD3BIAGyCyz8kMdxw==","signatures":[{"sig":"MEYCIQC1nR5HHkNUeswsYtBa3EHXmjBH1KCOFGAsRxj0w0nydQIhAIi5cqwVG0k+4DjyLgw/8JavGXBt7WgIj7JNAm0N60nj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1981590},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"a7da65c4d337af6a4eb6e09c7593d1a7e33938e2","typings":"lib/index.d.ts","_npmUser":{"name":"jonkoops","email":"jonkoops@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.13.0+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.33.1-alpha.45+a7da65c4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.33.1-alpha.45_1636554532074_0.7610874951866562","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@amsterdam/asc-ui","version":"0.34.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.34.0","maintainers":[{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"mauritsridder-ams","email":"maurits.ridder@amsterdam.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"d6e14cdf40e2b7ef7851ffd0bd22b127c53a709a","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.34.0.tgz","fileCount":2633,"integrity":"sha512-bV80RhMjQ6UlGrl8VKgw/5/20vrHEN5FtYE9dVenqZB+3VtpoPaqm3eZGPG+RVgRL1pi4+w38LwgM1rXLcnGcg==","signatures":[{"sig":"MEQCIFlvo3oE1phV3t6es+skLzHAe9NYk5mT9Mrq/Jt89asTAiAuunc2fyCVl2lWTemsBRxpGPslClV+EICLnTQ/9rbWbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2001863},"main":"lib/index.js","module":"es/index.js","gitHead":"4ca34c3543d8562a060ad2c1c9c93250f509e961","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.8.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.8.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.34.0_1636554639834_0.5046012023987747","host":"s3://npm-registry-packages"}},"0.34.1-alpha.0":{"name":"@amsterdam/asc-ui","version":"0.34.1-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.34.1-alpha.0","maintainers":[{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"fb3d44ea745a01ac5f1059e8060e33b58e86f458","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.34.1-alpha.0.tgz","fileCount":2656,"integrity":"sha512-UHaa90H06G9LlyGK17UMkykHkZBEqN5PLE0yCY9UGCT4C03ESdS/oxftGhUknEkAV6Nrd/7nOD6DsvBjuB9bQw==","signatures":[{"sig":"MEYCIQDWjkQRj/xex4sS6G5jYr9Fav2XIO5LCbNIOT1q+0/ijgIhAKXIgx4b6MSJZUuCOvzdTLVN2vyvxWwG8fhVbNr6aSt6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2014697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn5MpCRA9TVsSAnZWagAAd3oP/1nXYwmzPTbv8t95bpec\nHt5NtBTHTQsNDiQWSif7yYM/loavF3HUg8ypA/ru5yYtvhA3Je5NK6I7ey6Y\n49HY4Tls01uMbM/W6f170AJHgRSfyGboIOuqmHO40bNntFDVE1vNS0Tz9mO6\nDjUDBOzCz9L747QERs3a5BMck70nU8x6d1NHHbLSogdpg4CXZ7MPlKuW5YU4\nhOd6Jh/nT2EP78xDw0j50HjkAjT6E6WpVfux0Krr7TQ6jHoVSq+Q4bIjg2r3\nRzvRWZ1WpIKeAgau0Yqy//22t9jy1uy36rYSklxmhEKLUvXpQT5OUAXVfAcp\nqxRuI0iaPscCasJOAq5pNP7lB0gjzsSQdIXTMg+U+A8k8ev3WW6YnnVtgzv3\nXQn4AOOR/r+t6yBkbl3HaXQbQZWVrLE2p9ubVhUrJ7RnxtSAsRPZTkxdGCb4\n4QX+hNfJxEKWglzIcijR81BpX0L512acRsIcv4mSQcm/j3EKyues0t8Y+GAJ\nQAEBofcL3CfozRw8mNf07SWnz0P6kXC+ff9bNRrPcs3ZkLUsRcW7JyU1K2ZJ\nXOfiZPOlecurghg7JJpQnmV6mz/Rnqe3TBlgBnqkPDrrf0jbmvHFWVs7hQwl\n0kNMaB47GsePp81OtwYiancrnhQTGIVSOxKg+cMrg6mE1QjYxn3QiGEynYlw\nYTIZ\r\n=ii54\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"645ab7b2c621874385adec20287923ceb140e70b","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"7.24.0","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.8.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.34.1-alpha.0_1637847849647_0.4494943889971639","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@amsterdam/asc-ui","version":"0.35.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.35.0","maintainers":[{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"6f764eed76e39daa4a256718406bde85d54f21a1","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.35.0.tgz","fileCount":2657,"integrity":"sha512-10N9/rYIj49iagNXeMaIOt45zoZXTU5oyzh7/yEFJ8DWAOgp8I/MhIAim7riNqHtWxmVg+5Lc1OfWVwijfMEzQ==","signatures":[{"sig":"MEUCIALwBHLwMy2q1+06Jlv8SaAfD+CxR7vSALI9FuyuQTKNAiEAsXBTgCddfnJ+GeehipHda+NlYtpNNfdwk4t4YqBTdDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2037977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpPclCRA9TVsSAnZWagAAsTEP/2H8dOc0Ta4T/GzOf3Gn\nEL8liA97nSJLyFpfl7Pu1XmRRQqw9rh08aQMifDmhG3TFjCtg2QmFuW9J8qs\n3DeEVuyDj3ky7Ibt0NwTz6GuechC1Uq1eKr5o4xnwZx8GqVqLJoLUI3TEzys\nxNNWp66JMDkb1IBoIRbvdPbTJsi/dEV3odLsHpuM4RKjnYIo6o+lLkAPejiQ\n+3DzEQNfjPiGPk0P1gwsXb5dxR084jjn0NlKz4ZMR0IDjjbOpLyGEDwkVs3J\n6sucBJyJaoRFaFblz16cPSpVvpwVMlEvZM7Xyc75WKZjJxj8OetQd/e6GZdL\n8oz3PhDx3BEC3ABwSKLXtX6JDtNzkwLwpg2Dj/XvyrZ8ELcZ5gOnUP3yC9kl\n+d7PGfxhn5fqd+kZ/n6uly48OfDfg6rRpbmMFxIw/MDkA/IQrZU3UYP0E0d4\nKVxCUmPul/8Vf5GQF2QsIOm+LIkdUKiZn7sZq5d+KeSIcOYhuHkX56ViR77M\nBMlBwyf+GG7cVAMp0xwaSgWJImOZFh9sirCFn37Gosq0JpF0k6u4UWBgRmxk\nNJlagb6+DqIU6TIxaxSR56669On5Xp0yRmOw3YQMBBs40nB3l0TEGJIpZR8j\nPN0rkftKO5mHyHky9bYqJzMP6HW04GBcEd/LRMpwUei33unsjD/TQGauDuzA\naA4O\r\n=U6OM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"85df59a8fb1549f223447c598ad1292781ea246c","typings":"lib/index.d.ts","_npmUser":{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.8.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.8.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.35.0_1638201125253_0.04629757611989094","host":"s3://npm-registry-packages"}},"0.35.1":{"name":"@amsterdam/asc-ui","version":"0.35.1","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.35.1","maintainers":[{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"jonkoops","email":"jonkoops@gmail.com"},{"name":"chrisvanmook","email":"chrisvanmook@gmail.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"57251bdb85431e5f52733b371d97f9bc0ca7b18e","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.35.1.tgz","fileCount":2627,"integrity":"sha512-Uw1VRKXAX5eGw5jLXI5gGYNoiqwF0/n6Y4KYbBKjU4xLC3N2yAbdulkrUvJX9ayGOsqzZxllofC1AULaC+ZaDg==","signatures":[{"sig":"MEUCIA+VEHM0AuRpSxABqcGG+Gs6URkPR5cYrh3tKJQkIWqzAiEA7+rYwbAEju1WNC1sCIL9aORHJ+tlbI4Brl3AV+EtgHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2019204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3A30CRA9TVsSAnZWagAAP9UQAJOhrlFDzGJQfAighOP3\nfCXt0HnB5OxTAeDdPSB3fZcpz79ooUCYwr6bxZb4tGyWnm8XrMUFZMM2dLOf\ny0zFS4yVldnZ33nqZrLZwKkUrLge0tIgJytN0Ixt/KIYAwl78+FwMCsl1NlT\nxepg9aymrlCvdOR+SWuKTRpQOPB5pMTdU/t8vfrj2xnPqB1WNEzb88aqZRzo\nZwWT6Qc5deYSIouCcgoVCj1yNPyq3RpA1Aqyt4SB3RYvE3xRSmzPntzdiKUO\nGWbHQVdTsVoopOK5RMh9+BxGByFCRgyM6i61Ew52qaz4J7L+KJEEVg4F2xOk\n78Nj+lgnBP5JIsjRpYhKW0H9iBdXPdJa3ZZh1Knc8PWHxrIaInWNiTywyYgw\nxHRsGMEXQ26glv0cClqqWqF18SVl40ed0jqkys6cl3CELpvPBQN45JBVnL9U\ny4iPT0feqHTx8W70rMWDeG/GheZXysMVGwYtRqVHKiCFkVkrukuk4U7A6QS6\nk5VES7OwejLnDoc26QAUefs+Yo8i1q3pVHC6YWtQelP6KHXG3hDagiOPRuih\nGBEnJ3OI30qNsyCzXNP4okISjHig7un8O+ajuobRuesRFYEI5bgp4qdKa8dA\nHkibVigYHNfTkYAwQkfka+DuYI7Nc1uZgpeH/0UXaECvV6Jr1NnzM1sn5LWJ\nIYn7\r\n=uKrI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"6c37a3546bf7fddaf98530eb68b33c3a2805d973","typings":"lib/index.d.ts","_npmUser":{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.4.2+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.4.2","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.35.1_1641811444275_0.4764464983896368","host":"s3://npm-registry-packages"}},"0.35.1-alpha.31":{"name":"@amsterdam/asc-ui","version":"0.35.1-alpha.31","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.35.1-alpha.31","maintainers":[{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"877866ec88a8f5e2552d9177d5d574482ee7e393","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.35.1-alpha.31.tgz","fileCount":2849,"integrity":"sha512-GHzbvG0RLl09hxqeZ8t4UsjKCbvZ3UrU+kFa3sde22+XCNKqp3WabnfrHvjT8ghev+xwIyqMKFFf3cC3u6ky7w==","signatures":[{"sig":"MEUCIQDCdck/sTIcbbH1FhmcZcXOGDm+6v0HnIlAMS/shITyMgIgCxFeDz5jubevC0vh+FDlquWD/uZzJUUYih4PyqjIG5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2174600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6HKsCRA9TVsSAnZWagAA/rIP/jQRJoou0+sRiEg6qDwI\ncEg9AyFhKIwsKu/6AWumuqZRxYjUyxqvAE2PPDluU/XUXbTyXcNYNNrgu1rx\nkMa4QecYrHpFVoAlkv66XaXx6wRXaeFraK3tUtNt0AyVKkPl+XId+OvxF9QT\nCYVTtmxeRlsNYyi698XAUf2+t6iWW7OgQ+RyX8uMTt83DeujgPEw8GhsGYE3\nVe0cYVuksVySsTe1eQ/zAvC7ULrMhB5u5NWo/Xs+M9Sj8Fyszh84fxvU9CXa\nvLhoy6yFnNUXJmoLQLYl6XvvNjM1GCLExxODghbdeml7H8L60AAjUDzIEb0p\nh4VDmBGC4MVtP63gzdx2+03Dvl0Xiz96WjCEQJe94QPRr2uvGgga4dcEYIIx\nnpnBiWZLnV5LD0brOaO4czILR14Cg1bzreD4kMCqVaN2UfAc1+Vd23xXNa5G\nWPLUOPC0ywj/hxRR+b4MrEG3m2Ux0J5KX02Dw8yKfvvYHCLKJsnAFu4im6fb\nYR+c4+dSBpVeb71GqDBLLrXYWX0JyskjkLRN5zX3qjN4+PCPf+eaepSwi/3o\njbCZQ7W8R/ICGQvb1D0ETTHifyj8WJb5xIzy4+YkU5OFWbWFC0sCvVFCOilZ\nr1CfzHwFJPFyTWV5ROltd2pYhVzlfOA6JeVa8U9ESPdt06E2xaYECWsQlV28\n0VNV\r\n=wEx2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"1a9020d6b4081e430bf062400233eb92075c4f6a","typings":"lib/index.d.ts","_npmUser":{"name":"janjaap","email":"npm@jjvd.net"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.8.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.8.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.35.1-alpha.31_1642623660573_0.006231500306986826","host":"s3://npm-registry-packages"}},"0.35.2":{"name":"@amsterdam/asc-ui","version":"0.35.2","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.35.2","maintainers":[{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"5366e0ef185f5039763d4deb1cd0d51a5acc68c7","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.35.2.tgz","fileCount":2849,"integrity":"sha512-ZyiwzHutdN2d8EX+zXWut+GzCbXhLxFBnxc+xSp2J0OESQpGCtobZGgOWmImCWEgBY2tVVgz8OfSdkk6I8/3iA==","signatures":[{"sig":"MEUCIQC0dw9edh1c7aWcwz8PazijFmcqDntfsGKLSSwtwHEV5wIgAW+79yjkXWq0t7IKzsx/2HHG2j40HLvDiQxBkIylGUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2177737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6WWNCRA9TVsSAnZWagAAZtsQAKJbm7p1RIQrvYWFYklr\niSlt63cXwlWMHnEcPpNyYTzGaapqaHtSx/KZVZP+Fsdtm9Q9HtG8cXgnBs4R\n6K6vWihPBzB1HF8xp8k04DRn6Wm3Fmcs+g9ahMW15dtofbIyPD6zxQ5232bL\nmbhpoiwsN1PGxIaIO9ooRfNRs/+2/F8oJpFu1q5F6djNJuUaJXTf4/IPD9UK\n+SoA3Fce2t/jtwQhjPOiDMOQjnWnbrDiY0DGQ6J4KiqbBCchNGiBmeoBRwsk\nfQa5m0Zp2+wIq1tQFE50ppWvaTvgd4k7kYJCwpUfuE5as9sHWIaOZmpcVAWR\nvNR4robJvtPbl3+I91Z6AaugPx+D9J24xo67oeGNi5YE6pA4+n250t/xzqxL\n0QRGbhLg/qr0KNHfVNhSQF5cyh1u344eihvjFcYvptdSX8J+G7cQ5LdfHO4w\n4v+fDWGIXJsYLjho7cLY+6YYkRo777s6YTlJpV80jLz9iwO50/GGTQrB9qDJ\n6untGerHEvZ4u/g6vmnSc5SDMMyXpsToSxO9rIVlOutY9E7yse+TWJ/tTBri\naEGimM1A5YhUXKVwRq8ypkPB4MgMeTcOkqkgqJoXi1awKU1nfYPaG9ALda5q\n95u98Jx0wZjtLhIrYc2DmCnoFjGAB/vzL56K5Zkdi18eq8s7pzH8FUXuR90o\n/HUV\r\n=zM1B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"beb602a6eda0140127cdaec42501bc1d4f465cd3","typings":"lib/index.d.ts","_npmUser":{"name":"janjaap","email":"npm@jjvd.net"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.8.0+x64 (darwin)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.8.0","dependencies":{"polished":"^4.1.3","deepmerge":"^4.2.2","react-uid":"^2.3.1","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.35.2_1642685837235_0.12772532030228434","host":"s3://npm-registry-packages"}},"1.0.0-beta.0":{"name":"@amsterdam/asc-ui","version":"1.0.0-beta.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@1.0.0-beta.0","maintainers":[{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"894dfa3f08de437f0b4e59a4f5216aa2e2f1d101","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-1.0.0-beta.0.tgz","fileCount":427,"integrity":"sha512-X8PCLzf1d5tfoawiRbcr7zX4za7eGTuQZvnOLBTdGMpsvKIuPySvw980/JUQVe1M2DgKqjgQYJgSrGyGaU1nAA==","signatures":[{"sig":"MEYCIQCCfesp/jfbjcLkLLFz9y3HUjiHeEej0/jrwSW72ITO4gIhALxsrU+noHkhHzlvkqOLasW9DfEJHTrowCARu8FYQB5g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih3Y1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFEQ//canJ6eqDzLzHAp1Ar8jsc5ILPgGJ3KDx1hryfRDnvkvkXlC9\r\nAFrKR/EIcwKXXUk4Zz1O7rwpDXfn+bqM56BlahQeEHnw6gxS3gGb5jXNAxre\r\n3botJO9okBipe5ERwTFzgEtuqn7j1pjdI8dp/shEZNBb+VTg45qNDHqbJD/g\r\nhJyeSRHDWEIpZxZOWEv+B+Zw3iEWfKZgfdCR2KcegED8JciZyj7jVX06yMbP\r\nsTzhmH45k3S79SAcdWY82IZap6wnJrnvDBOlJ4BN/+bcvCqe5h5y/o/8I4BF\r\nGJ7HhWCzck3scxSPdlF/ZYcRWijQ5T25y+lyVJVkwALXZlFtoK2Be757xo5n\r\nxjopf2VX2GaNasB/CFMH+zNCU8XnhzwQWNJb9ugcRQ8CYvRRgM87B9Xo9QW8\r\nwHNBa7uGCvGvRGeitavnM/79zAJuyRasEE63J3cL0saJEpx/DU5pZxZ520iV\r\n7/e5Ugkbg9VOpKjK2sTgXthwZnvh/CA2GGh0c3wQQi6QHSBd3dTLYQ33+/pg\r\n6njl4joClUAhW0oKxOIuyCmrg67YhcpXufAXT7d7oUEEiSIyrgzO4GDTwMUK\r\nZDf8yEN1WVrYHXoAMkKjJbufzJUgaqefs27LAe5pq5YpTKqyMQgjsDQi/3eO\r\njDRl7sZ6Q5OfDgwNKfB1HwFjRFRoOt1x98w=\r\n=STqf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"f50b20b4946bf6d817a4557930a2023c10e1defc","typings":"lib/index.d.ts","_npmUser":{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.14.0+x64 (win32)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"polished":"^4.2.2","deepmerge":"^4.2.2","react-uid":"^2.3.2","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^1.0.0-beta.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_1.0.0-beta.0_1653044789556_0.40782773421058494","host":"s3://npm-registry-packages"}},"0.35.3":{"name":"@amsterdam/asc-ui","version":"0.35.3","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.35.3","maintainers":[{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"9876763b7a1f4a151524e2671abe78aa3210a67e","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.35.3.tgz","fileCount":427,"integrity":"sha512-tc8VgHI2kyqCAkEaT8df9tIInYphOjhTV6G/HqrkumY4JPUinSN0dL8X799QMgpbpq4XLY9WlcljGrFQqWgn6A==","signatures":[{"sig":"MEQCIEKVTSfy+zNWn4R0lzU9O1v1HbcItt+xaWBoyatatbRSAiBIMmqvVoi/BLn9GqiQ4X49yPGd3gDBaFl8vSTmUSQ/Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih3oGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk8A/+JAZscPTgDhCv89n7TauXQCT0I8Ygv0l65wBcalS+r0Veiuwi\r\ni6pD48cpzlxxPKlhIy2nPXlAbB12gpKoxiY8/1wpkeFTWG4LPbke6yJAvxhG\r\nD4GjQKlqBNfwGc+2+om90jCOF/n9rHL4vD6APEOXNbS73jxvJfJtZagSTTlo\r\nM8ssUQWV4KIapBZNdkElzaT0JJMxZ/t9Bx2BHLCb2jhhNxok2wO/KDJ18nU4\r\nqUXZTTMQlayXq8L1FRzCQqS5arwoNOtenwyBBihbnN7aCqg//axm02VhNfYC\r\nuW4cXbbZlLI04CJ13HVKHlBaJjE+XluCpX/FWpeTNbRfpp0u08d2ZFU35xnp\r\nwdT4YM2VrMvFkXyJLwHzvpTHxOzulZrpVgF/ZpLsV4h5nmNij/X/sJY0ThGh\r\nj/0ni9ZfZCGoNt4BXcissLwu9Ni+mLrGytsryRQ+I0P3quqlYJR9MmfU11r9\r\ngUEnbmcSy4y/GLWwCQao47EpOW9fTyYwtdMG0i1s3YJ1WeiIRjo3g7UF3JfR\r\nT+G3rNmhXYS0fosgFmii+xt6KTpOBZRdOK2zEHMapi6UN/cprQ1OI/0gcbr+\r\n9ceqFFUKcf6GQHuOe4JY8pU+aT7mHfJ1OdcvbfJEvnifDH2HO5b6kkgnOpi4\r\noCA/Vq6EAfUuCxzIoutgkkkI+zYTjj4aCl4=\r\n=FP5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"2f92a2f342db983d26f8b091be45eb0af4260ed0","typings":"lib/index.d.ts","_npmUser":{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.14.0+x64 (win32)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"polished":"^4.2.2","deepmerge":"^4.2.2","react-uid":"^2.3.2","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.35.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.35.3_1653045766062_0.12485732508933056","host":"s3://npm-registry-packages"}},"1.0.0-alpha.0":{"name":"@amsterdam/asc-ui","version":"1.0.0-alpha.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@1.0.0-alpha.0","maintainers":[{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"e6efb09dd9bba9b849ed96ceb31f37e77cd8d4ef","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-1.0.0-alpha.0.tgz","fileCount":427,"integrity":"sha512-yL8pDNuOPjDYeicfGWStsZnz9RiTknLklL4lLL4yTWRm4ByBmzIrJUo8jCsEfsO4+0KLeaZIUmJbbtLzgkRQlQ==","signatures":[{"sig":"MEYCIQDO01n94QPtVSjPKTwF9cuKF439K5Om4ReD9WZ/gN2fPAIhAOgGdPgCNSktLcR4pVJWVhYUJIqFrJM+lRA3MZz4at5m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih4B8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF1A//RpUnwNmFZaBpzqi4uVUTGHDBumvcmM6D/5QTTaqJYYbBrbv8\r\nmTHXA5mW9kc2ouHF8t5v3pqqe9JLA+UNcvDXv7Zsn+ZQN13z0+TmOYr6yt/6\r\nVMhdWs+Wq3f9Y7pZeEJZ4DDK5EsixERUm5AlAx8/+qIYJ4y0AwnCN+VZRRtR\r\nSGociLCcBqCCL4nfT7Xfqbsnjz/AGLasnDIfwGp37PdJGtJim4H/fSBuxGNH\r\nZ+5enhpZmeKeIc+bJBVR/38tbJZ2e2oqpvtvUoiWcfDUNAG1tLKnU7aihrUX\r\nNdL26EFXKKVGqwYLuIFU5BUn4dFZSRKZLYi+akQRIc4NDEVCZNBHbVHJtHHg\r\nQt3gaMW25ZG+xfun/Ku6KusPzQpRutdChHCOVN9XRblaeLbjqGejYz/m7N6Z\r\neKKTbPqCM3nLcVLh2f6M+3/HXoPYC59U2s9rxewvDyWXaYl5xL3tA7lwXAGl\r\n/RjWvUMXD4HFL2igLZJYqbZkZYTNgKaQ5wLL8VPxOhzp+3kqZE/Ch0A9esyk\r\n9/qKIaB1rvK2+rJGEHOi39p1CELwwqvgqqi06APbf/Lw9FeRnBin3j9CuIk3\r\n/HdRi5BIXVy0nNqjZZTzqN+NG9Zg7R0YAXbS/9wuNGoDuAHTgev8KBRaK7JN\r\naMne2+umMked9x982CgsD7O2H7tQ+Cdo+v8=\r\n=ZGpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint()} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint()} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","gitHead":"8bea5f58fb8f5163aaf4e4c67bcfd115704ddbba","typings":"lib/index.d.ts","_npmUser":{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.14.0+x64 (win32)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"polished":"^4.2.2","deepmerge":"^4.2.2","react-uid":"^2.3.2","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^1.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_1.0.0-alpha.0_1653047420067_0.045733244444774224","host":"s3://npm-registry-packages"}},"0.35.4":{"name":"@amsterdam/asc-ui","version":"0.35.4","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.35.4","maintainers":[{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"62f2cd0fa5545611298a44d94277add4e8fa0d83","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.35.4.tgz","fileCount":2627,"integrity":"sha512-OLwKWw9TlRTmsiOEe405kBq4AeeECK2aethRPkpc/ljFtWnmJra/32TMs/7jT8rqB4tD56ROIQDMuKUBx56qzw==","signatures":[{"sig":"MEUCIBbUJxOc/hFQ5xX+LOOF+3kvw/ObXFqs7v+/AY0WJ/G+AiEA0oSxMDpIGgnmEGhihsQ5Zgstpq2N+IDXNnRoq0WGYjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2067530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3V7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeBw//SEDumSY4ajg5IZSISIziwPw3P8SC5ArBu9ltY2hR9oMpBxF0\r\ncpj2W6nz43BybR3kRxYg5KNrtn7j+XeEhbWXt1lNrtpdrMkm+SgZzLuksjdP\r\nmBzmiP+egIg8OHMW5YqXGTYUtNWSLtn2tM6VSPCLihyWVX90ubmJRv7Q8X1m\r\noWmikFI50Yl1fj0ewBzPFo5+KO4yONNNl6awDkvVtwgqIWRkG8wJeDuKTpHm\r\nRyClbsHUElmTF9DY45T6fIN5E3OUdf1X4b34kS5Kd2R9pKFoxTP9tyOgZs+D\r\nvFpU9KB68Qi+ZeDQeMa/aOsYaoEYcg488BXODlWwkJ36WaKoZUOla3SKO1op\r\npcHpqxj83/i3B1JShzlMd1aaoNhOHE/h1JjPMtxnK/nSGgLknsq6LNs/qVA3\r\nlQBu5SRPARrP3sNiGahEXh6Hct9BcBLpVnnQxchM4cJrkiIOwfJl+NJDhT54\r\nWwScURh9OxOYOETZibdHW7CrbRaq0j/gV2Gpb/axJHPd8x+RJiUsPezFvUUn\r\nlvBH1S+Bio4l5IkXsa9ASFpQcPPj97dvkOh88yTLnTnPshq+FuLVGTOGcVzV\r\nV0a/k/q/2M0kr2TEsZaza4Uf4aPpHTYoKdf+ASEpp28ooikmAorenJZVVCw/\r\naGVmSHlU0WdFULt5+hYtLfQvLFjW0FCn59M=\r\n=kcYC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"66bf78f284fa96cc93f23bc82aaff2faef816e9b","typings":"lib/index.d.ts","_npmUser":{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.14.0+x64 (win32)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"polished":"^4.2.2","deepmerge":"^4.2.2","react-uid":"^2.3.2","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.35.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.35.4_1653306747426_0.2558609209051943","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@amsterdam/asc-ui","version":"0.36.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.36.0","maintainers":[{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"f272dfee6568c7d5b2059d83f856349110a6953e","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.36.0.tgz","fileCount":2627,"integrity":"sha512-NkrGcOhKJXwlHLVQBv80EJsPF+/Ej4uo4L+gXMGA74vL4xOdk4JGqRG4llwc91atVa3reWatLiH8biESU6QqRQ==","signatures":[{"sig":"MEUCIQChU+YfA1llkEjMNEt9FfJNDdMBy47p7k2VkS5/87Fn/AIgcdBZE9h+H6edhRRZEfWH5CzE5j0NJm+64aPKR+xYYVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2069553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioIhpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXNw/9Ezm6I1sPH38rSEBN4KAJkKJtRsWSXnqfs8vyGTA0REkr8NOh\r\n4DEEeaVUJ5wvFH033W+RqdrO30owKcmyUT7FbGNjlCD7h4ZPL1cwYcbbs9nj\r\nklyCdGCbww7MREUkoLwXEhwWw1iLW8ftgSeVIVm9JATmJ1Gv7hf1mHhQWadC\r\nbfGUjW8TkTwpnNcEcNK11HONInrWpeDO/0LO8ZBv9QY5S2uWW9gc2oYhri28\r\nWtnWsVVbkz8c2BOcLx5h4oGo7VuVA7KBBwmEBvZ67z/O/MbGIxbFMZ6aB6fG\r\nEoXd92EpshQAN8HZDyIM2/g6WbVmDO2hdh8S/8WxEXvcasQT2noKcpApGPaB\r\nwXghbfTt2Ax0RNEXDPYAyOijVWeVLZCo/GCPuGLECIXDAHB87dv2CieUnLbK\r\n3t71f6Nb/WtYjK7KTU+toxPfJdzJ96ORYXGzAIO1r6QLdkckxu6MuzUJ8F6T\r\nuKrr05kdnQ7fE/CEoU7wc3Mi0Rd2UD0pR+2jio4+2329FOgYUI4FloIHxi/E\r\nKeU7qO/XlZff65n3c8qTIFgq2IwGoaHEOr9fB9EMV5NGSXp59bpO63gnQ7Qw\r\nE1N582alZpFHBsvPvtn42VlkMxptP7bKZTi9lh2YboeuhH8AdsjMc/9fF/sl\r\nj1u2uuPOeTkKtUT/8eF/oCT1rSSsEt6VsEI=\r\n=ZYAr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"0d2c0a01eda438d561f3416b3cb59d6f8437f343","typings":"lib/index.d.ts","_npmUser":{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/4.0.0/node@v16.14.0+x64 (win32)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"polished":"^4.2.2","deepmerge":"^4.2.2","react-uid":"^2.3.2","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2 || ^18.1.0","react-dom":"^17.0.2 || ^18.1.0","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.36.0_1654687849569_0.2249347026087274","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@amsterdam/asc-ui","version":"0.37.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.37.0","maintainers":[{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},{"name":"janjaap","email":"npm@jjvd.net"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"aef94d01abec407219a0d2c01b58b2204d289912","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.37.0.tgz","fileCount":2627,"integrity":"sha512-3lvT8ZA8lpzzI9GTLktXjU5Z1AtnJ4GCXe6Hqa8LRDl3Fm+9460BTI96ResBxsWwjRMoBiiSc+Pg6lqnRsZ1yQ==","signatures":[{"sig":"MEMCIE39M9Mjzt6Ptg7PzBcbae1t1avZkqmBzmcA+r47GS2bAh818xPCDvg1rCdQCFfUvf3+jU06iSO+uUGwPMyvf9cS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2047415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNVkNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKXQ/8DiEiSSZL7+FZWphCk3+ZIhhZvgPMa63ZogT/3IMB5W9EUl1e\r\nVFkDJIboD7Um2cvu0ih9bYjelkHP0OQbuSn3XCEIRTTduSD1B+SWFtB+SbJX\r\nSee7yYh+kx1TI9/Em8h1W7r+hPib9/NG7fl5a4alu16Cfpnmp1JqChoF+gT/\r\n1dGbM3zlAffoY8KAM6Ws0/PJIObtIfqBvcdSK0/98obZJiPHdSgM7VhCLeK9\r\ndEmwHALLkwt+0+4sXxZHqATgZ7JDoPW8NMBRD0zFqjMdsk/OppqkulsVzJfX\r\nkRMThqcRNsPEYgcivPr6I40/1ACsBYIjw2J3ph+aaa7DSB4Ehogd7YZz4ZJu\r\ndYTejmHgbtTBaZbqDI4TjqlP4+PtsslJY8IHotMr1EpC8vJwEHSgFAKpaVEV\r\n9ElrL4+9Q3fkWq4FyVMXrFuFrUL917FKUbd0xw9ekBs/ex9aZthrKFPu/Iho\r\n+ZmKDuwfSBLNNLHK3tUf1GbUknvAzL7q05IfVkdMImM5UMRQU9VJQr2U9VyR\r\noVB6mCsGEdYtBj82eUQ2vkvvWjY4BKubTyJjcoiRKfVAE+nM5U8TAIV95/13\r\n1C/9Y89m9rnvEZdqSqCPinB46lzpddGbGJyx5/eUhXLGGgPhUnsjWvVFa6HA\r\nwW7/uR9Ua63q7et6EZSkPdWbcegK7rRDrOc=\r\n=udh2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"7807568d3eeecfd04eb14f9db9628da52aec296f","typings":"lib/index.d.ts","_npmUser":{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/5.1.1/node@v16.15.1+x64 (linux)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"polished":"^4.2.2","deepmerge":"^4.2.2","react-uid":"^2.3.2","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2 || ^18.1.0","react-dom":"^17.0.2 || ^18.1.0","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.37.0_1664440589655_0.7101265388182005","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@amsterdam/asc-ui","version":"0.38.0","author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","_id":"@amsterdam/asc-ui@0.38.0","maintainers":[{"name":"jthijsamsterdam","email":"j.thijs@amsterdam.nl"},{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},{"name":"remyvdwereld","email":"r.van.der.wereld@amsterdam.nl"},{"name":"leonardsmit","email":"leonardsmit@gmail.com"},{"name":"thomasbandit","email":"thomas@imthomas.com"},{"name":"timvanoostrom","email":"tim@depulz.nl"},{"name":"datapunt-admin","email":"datapunt@amsterdam.nl"},{"name":"remcohoff","email":"remco@code010.nl"},{"name":"jasperswart","email":"jasper.g.swart@gmail.com"},{"name":"fortunato","email":"f.geelhoed@gmail.com"}],"homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"dist":{"shasum":"85e15569252e018f710ae7def2d4150d74484b23","tarball":"https://registry.npmjs.org/@amsterdam/asc-ui/-/asc-ui-0.38.0.tgz","fileCount":2627,"integrity":"sha512-mBzkcCoJycBBc1/7l1Ud2EUDHUQx3djYVEKxvo+bA7RF74q2pYITplvLhaVbREguxWyp2QX9r1xRgCiZmufckQ==","signatures":[{"sig":"MEYCIQCmBGW7Ss1KPBKcpmxVMmQBD9FtL/IpPgnctoKmg5/wUQIhAKE5aTRRfm4GUFWdYEmorqmA2vSU+K/SF8rRfUm3pRlM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2072350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhJk6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprRA/+NVYNHWggk7wWdDtBqPLle+g3fp4PoEKbY+hUqKXNP6A9ebSn\r\nfAL9LGtru2Dr2BLQXNXftHXkCJgGlRlSY+qVJ1fMJ/Fe4PBjLrkW65KE7sO7\r\ne0kxbe8k01ERr7mwAT+lac8UU4UlT5OFGB/AHsYFFmIAamuhOWwePwHIxKMm\r\nVonAfszL8B38smKmZ8RMipa+1QEuv1n+i6k63+5GfwWaqPxyCtBDLbqfIsek\r\nxXxYjnJv1KkzyrhuziNstXc8nBLqSV+j8M1lQldv1+uMGIshlmGWkFxVp7tm\r\n7gdjo1mL0lEx2+Gfh86TO3Yxh+RDA+TdPJeyyU31Pt4ombYvZFZknfOcPovM\r\nWZaUZ9FXbp6Y4AAwro9/+XUexo9qeSbJnvG72Q9kaTM4jLU9Qy0h/i2EAd+p\r\ngl8GAvuuy8QEjJKB6tobmRasLRRFYYNDk8O+7u8/PDoUdvL+Io6zjNealD4G\r\nVSx3hpy1cY5+fAmvLABk94+p2SsUJpk4ZDE0+bs6acWfL5EsMJm9FRoUqlxV\r\nzX3G8lPxmgjhYAhDKelAHhfdpDvcTgFNHWnMnPCE3nuiTxH7jqLXn2pBGuql\r\nzyksL9ZJP8XnKUf7qJdhKxpVE6Pvv4I1hAhOQjuZzkLdok3E0oyJiVh2GFgT\r\nJnVuX7pur/xVJBvcVn7/oBabC793toLaSHw=\r\n=FyDf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","module":"es/index.js","gitHead":"896a53898dd34b33b2c3f5af8430ee37345a08f1","typings":"lib/index.d.ts","_npmUser":{"name":"aram-limpens","email":"a.limpens@amsterdam.nl"},"deprecated":"Amsterdam Styled Components is no longer supported. Use Amsterdam Design System (https://designsystem.amsterdam) instead.","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"_npmVersion":"lerna/5.5.4/node@v16.14.0+x64 (win32)","description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"polished":"^4.2.2","deepmerge":"^4.2.2","react-uid":"^2.3.2","classnames":"^2.3.1","objectFitPolyfill":">=2.3.0","@amsterdam/asc-assets":"^0.38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^17.0.2 || ^18.1.0","react-dom":"^17.0.2 || ^18.1.0","styled-components":"^5.3.0"},"optionalDependencies":{"objectFitPolyfill":">=2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/asc-ui_0.38.0_1669634361854_0.007096836356192515","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-09-22T09:39:32.178Z","modified":"2026-03-26T12:50:50.215Z","0.24.5-alpha.5":"2020-09-22T09:39:32.635Z","0.25.0":"2020-09-22T09:40:46.723Z","0.25.1-alpha.3":"2020-09-25T14:19:08.305Z","0.25.1":"2020-09-29T09:46:11.359Z","0.25.2-alpha.10":"2020-10-05T11:56:50.057Z","0.25.2-alpha.14":"2020-10-05T16:20:41.773Z","0.25.2":"2020-10-06T12:41:04.039Z","0.25.3-alpha.74":"2020-11-02T14:58:51.869Z","0.25.3-alpha.86":"2020-11-04T14:56:49.343Z","0.25.3-alpha.90":"2020-11-04T16:39:02.278Z","0.25.3-alpha.91":"2020-11-04T16:56:40.803Z","0.25.3-alpha.92":"2020-11-05T10:04:29.014Z","0.25.3-alpha.93":"2020-11-05T11:13:17.991Z","0.25.3-alpha.94":"2020-11-06T11:22:01.400Z","0.26.0":"2020-11-06T11:53:21.085Z","0.26.1":"2020-11-11T16:26:02.385Z","0.26.1-alpha.11":"2020-11-11T16:26:12.182Z","0.26.2-alpha.36":"2020-11-24T17:35:47.387Z","0.26.2-alpha.45":"2020-11-25T11:48:19.423Z","0.26.2-alpha.46":"2020-11-25T14:27:41.161Z","0.26.2-alpha.72":"2020-12-02T10:27:17.333Z","0.26.2-alpha.73":"2020-12-02T11:35:28.310Z","0.26.2-alpha.0":"2020-12-07T12:31:55.135Z","0.26.2":"2020-12-07T15:38:18.172Z","0.26.3-alpha.0":"2020-12-07T15:41:11.923Z","0.27.0":"2020-12-24T10:53:29.954Z","0.27.1-alpha.0":"2020-12-24T10:55:46.780Z","0.27.1-alpha.58":"2021-02-26T11:52:09.865Z","0.28.0":"2021-02-26T12:04:14.313Z","0.27.1-alpha.60":"2021-02-26T12:09:11.767Z","0.27.1-alpha.70":"2021-03-03T10:13:14.847Z","0.27.1-alpha.77":"2021-03-09T10:06:03.269Z","0.27.1-alpha.79":"2021-03-10T14:34:46.705Z","0.27.1-alpha.86":"2021-03-16T09:11:37.549Z","0.27.1-alpha.88":"2021-03-17T14:12:14.672Z","0.29.0":"2021-03-17T15:23:00.589Z","0.29.1-alpha.1":"2021-03-17T16:12:49.399Z","0.29.1":"2021-03-17T16:23:42.107Z","0.29.2-alpha.0":"2021-03-17T16:32:11.010Z","0.29.2":"2021-03-17T16:58:50.172Z","0.29.3-alpha.10":"2021-03-23T14:11:44.459Z","0.29.3-alpha.22":"2021-04-07T09:43:01.184Z","0.29.3-alpha.23":"2021-04-07T11:33:54.020Z","0.29.3-alpha.26":"2021-04-08T08:28:48.335Z","0.29.3-alpha.27":"2021-04-09T11:39:11.084Z","0.29.3-alpha.43":"2021-04-26T12:04:48.293Z","0.29.3":"2021-04-28T13:20:52.555Z","0.29.4-alpha.1":"2021-05-01T10:05:54.161Z","0.29.4-alpha.7":"2021-05-06T11:42:12.470Z","0.29.4-alpha.15":"2021-05-11T09:33:44.785Z","0.29.4-alpha.20":"2021-05-12T08:34:10.520Z","0.29.4-alpha.17":"2021-05-12T08:44:17.959Z","0.29.4-alpha.18":"2021-05-12T08:54:30.848Z","0.29.4-alpha.21":"2021-05-12T09:18:55.836Z","0.29.4-alpha.29":"2021-05-17T08:49:42.124Z","0.29.4-alpha.30":"2021-05-17T08:49:59.950Z","0.29.4-alpha.43":"2021-06-01T22:36:03.514Z","0.29.4-alpha.44":"2021-06-03T08:49:39.558Z","0.29.4-alpha.49":"2021-06-07T09:10:32.033Z","0.29.4-alpha.54":"2021-06-14T09:50:58.411Z","0.29.4-alpha.55":"2021-06-16T10:52:30.677Z","0.30.0":"2021-06-16T16:52:19.274Z","0.30.1-alpha.0":"2021-06-18T12:25:00.592Z","0.30.1-alpha.1":"2021-06-21T07:47:49.739Z","0.30.1-alpha.20":"2021-06-22T09:33:51.465Z","0.30.1-alpha.21":"2021-06-22T10:08:38.847Z","0.30.1-alpha.22":"2021-06-28T08:45:00.235Z","0.30.1-alpha.28":"2021-06-30T08:59:24.427Z","0.30.1-alpha.29":"2021-06-30T16:14:17.258Z","0.31.0":"2021-07-01T08:49:49.635Z","0.31.1-alpha.20":"2021-07-19T08:45:24.146Z","0.32.0":"2021-08-17T08:52:33.962Z","0.32.1-alpha.0":"2021-08-19T09:59:56.431Z","0.32.1":"2021-08-19T10:00:43.180Z","0.32.2-alpha.0":"2021-08-20T11:41:36.714Z","0.32.2-alpha.1":"2021-10-06T07:39:02.745Z","0.33.0":"2021-10-06T10:38:14.576Z","0.33.1-alpha.21":"2021-11-02T10:23:40.089Z","0.33.1-alpha.45":"2021-11-10T14:28:52.280Z","0.34.0":"2021-11-10T14:30:40.243Z","0.34.1-alpha.0":"2021-11-25T13:44:09.930Z","0.35.0":"2021-11-29T15:52:05.753Z","0.35.1":"2022-01-10T10:44:04.542Z","0.35.1-alpha.31":"2022-01-19T20:21:00.857Z","0.35.2":"2022-01-20T13:37:17.472Z","1.0.0-beta.0":"2022-05-20T11:06:29.890Z","0.35.3":"2022-05-20T11:22:46.271Z","1.0.0-alpha.0":"2022-05-20T11:50:20.284Z","0.35.4":"2022-05-23T11:52:27.614Z","0.36.0":"2022-06-08T11:30:49.839Z","0.37.0":"2022-09-29T08:36:29.903Z","0.38.0":"2022-11-28T11:19:22.184Z"},"bugs":{"url":"https://github.com/Amsterdam/amsterdam-styled-components/issues"},"author":{"name":"Gemeente Amsterdam"},"license":"MPL-2.0","homepage":"https://github.com/Amsterdam/amsterdam-styled-components#readme","repository":{"url":"git+https://github.com/Amsterdam/amsterdam-styled-components.git","type":"git","directory":"packages/asc-ui"},"description":"React UI Components that developers at de Gemeente Amsterdam can reuse in multiple projects","maintainers":[{"email":"datapunt@amsterdam.nl","name":"datapunt-admin"},{"email":"leonardsmit@gmail.com","name":"leonardsmit"},{"email":"thomas@imthomas.com","name":"thomasbandit"},{"email":"r.van.der.wereld@amsterdam.nl","name":"remyvdwereld"},{"email":"a.limpens@amsterdam.nl","name":"alimpens"},{"email":"vincent@smedinga.nl","name":"vincent.smedinga"},{"email":"n.roozemond@amsterdam.nl","name":"dlnr"},{"email":"t.van.walen@amsterdam.nl","name":"terryadamgem"}],"readme":"# Amsterdam Styled Components UI\n\nThis is the React implementation of the styled-components\n\n## Installation\n\nAdd this package to your project by running:\n\n```bash\nnpm install @amsterdam/asc-ui\n```\n\n## Usage\n\nConsult the [demo site with the storybook of the components](https://amsterdam.github.io/amsterdam-styled-components) to see the available components and examples\n\n### Basic tweak of an existing style\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n\n ${styles.ListItemStyle} {\n color: ${themeColor('primary')};\n }\n\n `\n\n\n \n Item1\n Item2\n \n\n\n```\n\nThe background color of the StyledList component has the color of `tint.level5` widths smaller than `laptopM` breakpoint and `tint.level1` for widths larger than `laptopM`\nThe colors and the breakpoints are defined in the default theme\n\nEach component exposes its style that can be used a (class)selector in another component. The naming convention for the styles is: `` -> `styles.Style`. For example ListItem has a styles.ListStyle selector.\nWe use the exposed selector to change the color of the LinkedListItems to the `primary` theme color. In this case we don't need to create a new StyledLinkedList item to override the style.\nThis is just the way we are exposing the styles from the asc library to be used as selectors. For extending the styles use the convention `const StyledLinkList = styled(LinkList)` as shown in the example.\n\nThe same can be achieved by creating of a new StyledLinkedListItem:\n\n```jsx\nimport styled from 'styled-components'\nimport { themeColor, List, breakpoint, styles, ThemeProvider, svgFill } from '@amsterdam/asc-ui'\n\nconst StyledList = styled(List)`\n background-color: ${themeColor('tint', 'level5')};\n\n @media screen and ${breakpoint('min-width', 'laptopM')} {\n background-color: ${themeColor('tint', 'level1')};\n }\n`\n\nconst StyledListItem - styled(ListItem)`\n color: ${themeColor('primary')};\n\n ${styles.IconStyle} {\n ${svgFill(themeColor('tint', 'level1'))};\n }\n\n ${styles.LinkStyle} {\n\n &:hover {\n ${IconStyle} {\n ${svgFill(themeColor('primary', 'main'))};\n }\n }\n }\n\n`\n\n\n \n Item1\n Item2\n \n\n\n```\n\nIn this example, we use the IconStyle selector to override the color of the chevron icon from the ListItem\n","readmeFilename":"README.md"}