{"_id":"@fdmg/bnr-design-system","_rev":"45-cb362fcea5ad6f24cc27f94fe570c99f","name":"@fdmg/bnr-design-system","dist-tags":{"latest":"0.1.8","next":"0.1.9-canary.2"},"versions":{"0.1.1-canary.1":{"name":"@fdmg/bnr-design-system","version":"0.1.1-canary.1","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.1-canary.1","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"5792d7c194c91277484e21600842a10997f30a48","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.1-canary.1.tgz","fileCount":62,"integrity":"sha512-H1TQwPvXPM+TBGb6p5/qDMLOBMkw8WACQFTX2NpdP6rgo4Qv+soWqQllip8jzvXOP850E4/h64lO+r/gQXNNqg==","signatures":[{"sig":"MEQCICq8lqp/9YYpGxuGYU0uBkt8kSc0oUFbUffILdyaMJKdAiACxhI7KGObh0xjRbjt283/NbTkeKTm0x+KbX3Odc2gzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3968026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP7g/CRA9TVsSAnZWagAAoyAQAIhcLDkHeE/NJ6NhcJyB\n2dCma62Z+FLQE5Ola+jScT5LuC2w/hN5/1B1zS/VOeR0vg6A0yPXPWje0/Mw\n/zIU1pJK53hQjJQbcxhkJIh3K8At5K27vRqEE3+Djo4DwzHzZzxUDmpYR3w0\nL1oZe6TNw6bitk+nM8ILjPb1+aoaVaCQYJpPg1+bLZd5WNQFixfe4m9OJlOy\nf2ZBLGGs0RR9YzcMzuPkurp1hCuCq1VW1qtDB5D9Pdfbimjm+rTgMtlMeF7Q\nyATsJeqXGRDyvnIQLh+FSrLiuBiqjFwMobgG7l++UZJS3Ud7Zz8Tsb7wl/of\nbkaCCqnlsnh/WWbt5QUi827wZ8jY6rkM3hhHQovFPo041FUzWRqrR2h/hBGp\nQ2H6UAVCp1deiqg5eJmCsZMKD7MimbV2WX0EHNgBb5xxAMdzxXKOljC3Zn1u\nzEMU+W2W6vkCWJB/JiDbXfMyH7CeP83EyFlNjPvHRkXUZfREo9wnOKo1ptPq\nQz9M2YIJw49EtZ/0CR+GHEwOe/i4/JamRZXw/9rtOCXM18qTOlYj/xfYdziG\nUSE5p6ZeBpKECEQwyexaVPnUo9yQMIdSJX42hL4rGiu7QkCXjExB3Bfsx+EE\nvAG/QmZJXUNmevV8kyCSFiMtYi2eGNh4aND63FjqtLArh/YOc/MFyGqppS7C\nj455\r\n=SHjZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.1-canary.1_1614788670508_0.28701123303237575","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@fdmg/bnr-design-system","version":"0.1.1","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.1","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"661c0091b7850fd0c340346ef9a126180395caae","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.1.tgz","fileCount":62,"integrity":"sha512-4qEK4tOFpX2lHG4iNYFbUxKO2LSjnzqrM+RHznlQ6dtVDUH47qU6jbG+WVx925/CWma+hzBHjfTq0+mJCvS+aw==","signatures":[{"sig":"MEYCIQDraJ4Ekr1sm/YPdthyw4k1YFnF9NoEqZEc8FXRdVL9CwIhAINy8tUyQIqsuhI4RkMhT2pDkeOl9E/Cb5FKS7D2l4+t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3968008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP7qwCRA9TVsSAnZWagAAG5oP/2kkRHa7yUCfbDtlquRw\nr4LyNKdAJKg93q8xanGC8jldV4f4e9cNPZId0GtIIx3rRw56nmoDTxxZBZe2\nvkRM+thp1vQnJkZmWgCimfH0kS3M52zVsTfO0IbYguL4iBn6eyojlDuEcRqp\n4byJUbeiMm9btcYYov9O2tp+/YaLqXCtYQv3LYi4ZjY1mLulONaXm5RsaFs1\nJrdOw9T9lI6K2T7X3yZROtZ5YhrLY3VyKWuDsI0mXJ1Npx1SIeStrW7OHJjx\ng65vqm8lwqLHXgwTKl3eKrL0lYDE5W72/6LD2lcgvuy+rjS4/XrMCi8muuYZ\nJpyPiEIlDYXhxiC3jZhPFllYL4bkEV46uhFgAX1tX/5ADfJrlQjUZfRk7FCc\nYITcR3fuf2+bboIdxHWVyLnewPQSwnqLT5L2g+IIs7TRxTTyEcXHlPMgC2pQ\nCxb+s/lSAjLwqNaYshQhNfr76pH5zt4HtFd6qYglA30b09AMnQp1TeslB1qA\n+fsvQvv6hWRjkj8wMoO8Qz1wH516cjwR66fu7zz7qakKmrbwj3KoH2WzihJh\nWpVWVFCGxL7YKuKVitj1Pe4/pVkKEDFb40lrB9MsmI24OSjzC/rbIBAjSX2U\nernbC3cCt2wNI+yuCny3oinfIZJExbU9v51P5fFk1/kmO9xnFEDaBBUkz45Y\nm/k0\r\n=FHBK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.1_1614789296107_0.7446623039873832","host":"s3://npm-registry-packages"}},"0.1.2-canary.1":{"name":"@fdmg/bnr-design-system","version":"0.1.2-canary.1","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.2-canary.1","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"b611db914f3eb1768638ece14d2cf852fa1d8a23","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.2-canary.1.tgz","fileCount":62,"integrity":"sha512-jgXUDrAs70ZXI2pZI1KxeOaouQBAUGORtx20zvSZKRdO8X2SrwMf9GlsTYxJ4DYvve7F5JcFnsiVYkmFJBTsTg==","signatures":[{"sig":"MEUCIH9Ru3NxfgYnTrSHhUyzKMrRLQkDFk7g1tlZVSLgnOAaAiEAo6ZWKqDQ78gCT+YCOn3Pvfje+NDrL65e6Zn/EX9DAfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":349472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQJ3lCRA9TVsSAnZWagAAsY4P+wVLnXvP7P8SRDwg0eNm\nMmjE0wPbvxQHDNbHwuA45BKO0QFKSfR5+4zEp++T4aroCM6g7K27nXr6/LaW\n5E1AqB6v5zhv1juRriHkp08/COna6IyICdrxQE3FKpoovhGQmLyt0fl6pve2\nZk7gnR2G59jwhH65KqvYasodqf4HzOdBM2NUqlarGW+LtGgB2x32/3M2crDn\nVImDmDjoY1QdpGBtxhf9bmngPQwYn0EUchsjFd+5Xi2A2yTLTcVAowZCSy7G\nQlbtqnHSDmM7CHbvN3AZEw5Qxgm1xYqR/Tn2uR6dcZTFAKPQJnjKYHEjxzV5\nzVVzE/qkwuwzKIc8gg2MQmCHgJp5zc7z5oGgJ7izuQjR0txpq7Xby7gnuIuh\ncTpdy/ega+5LKv092r89v+NL9MN39uO2xyTHqQc3iimZplrH6ts7DE2QGWG0\nqNQBoCy9aCDSg2HvApZ3Dw4d/ye3plyP8wNvRI4T51GvQ3GG0PWGaa3q/+Z4\nMUC6/bT3NZ+vVJsf6nPTEUzv8FM5G3qHjLsFPNHFN1EDQnQo1BBH38rEpEDO\nq5iwBWTphE3si6hiVsck361PJal1aBe7NsivSHO6/0DecQiQRUxN84zucQRX\n7QvP4bcUdt5u96WOg/bMlzxOUhD7y/1EySCQDqscTdLwb4xMPOTR+6GfaZV1\nOlP2\r\n=uPzU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\nWIP\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.2-canary.1_1614847461485_0.17827355412434454","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@fdmg/bnr-design-system","version":"0.1.2","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.2","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"04724fd4d8679eabb414d4270ddb0fe6a382f33f","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.2.tgz","fileCount":62,"integrity":"sha512-e9izOBUjOynA5EnHveUwUir9ITUHl8VQ5NwCfZ8ltLh5RJbs//ywdX/lfkwBOAR1ZO6m1ghbDx3fUG2PFvZ1cQ==","signatures":[{"sig":"MEUCIQDSs+NJqwhZ8JY4hp2ZgdLqi68+A8qjas3MbN+oR0nsxAIgaq4YT4ebfcrxivDxbp2USMRiaDqgcWgRHvuaDnPr5lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":349454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQKKQCRA9TVsSAnZWagAAZ/kP/1z/A7iftvB5mU+/iMtC\nTMlbOlFyKqORPuNP4Szet90PpkE4AYOGO+pg0yD9/eP6RZQNYsqgXCefDotQ\nAihFyZc4lmm0WRfhEsur524YfeIB7uSCofhvx2CpWbz2dECCJVlDt64GTYEj\nk95Yg+8X+YbPziuDjLuP5kQa39B5+5CZb7GF73N7MUrYvrBFKDGQ898a6eEa\nz/iFE9ebLpIv14dK7Y1nSo1dNwc+sF4M6hzrYU/mmONKpII8Bar/N3VVU8XZ\n0QuAaXly2pzN1fUC3rYqnzqRvNsyrN6gNHVVmrVTYyzlug3E2vuIIA9MkOym\nP9Pt+ZhP2CKNvboVF4CCC1DweE/TYJhXtGi85bMOLV9iNrZO4Cd7KXOAVvpw\ni2bNC8nUHYbh4golCeXJScbu9yAMu7CiJVfokjhBaHLTwUqRNserISsDmUoy\nGlyCddoQHYSHUQL/b/ygAEUSuKknEFvc4Fjyfu4wix0qkH7h2YUsA88RBnnH\nWlmAozxzbkIiO7WNATwBoLcT+ZsmqzRRhFJiazEpW+3clRBX6TlvYIam1YIk\nuNWgUk+WaTZdRPKkHJkGESXljXwnKNGoo6jzVw5EPn5CoM3p06h3+WxnSZts\nst/30Y6v1HQOKLJhVBu21vzlhFAgta5E8zKJpc9KMnNP5jWCDeN2RYupoXCy\n2aLQ\r\n=ObWM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.2_1614848656112_0.5624202538254193","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"@fdmg/bnr-design-system","version":"0.1.3","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.3","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"087ef7b0308c45a1cb13d0414e654a7a2f4d3145","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.3.tgz","fileCount":65,"integrity":"sha512-bDzOl23WI4P0ImhohGuyDimJ8vs4jfR4R3aMNXmICszMG/DWYhUV4JNBLCA6tAflPNdm2CddPEk7mtMeFBd0OA==","signatures":[{"sig":"MEYCIQDfHkScw9dxQYu2PdWhQ0omQq9y1hZigjV4reh5bs3mTQIhAOBSdw0JZ9liRTa2MtNAhzVTnUe2k/gwybdcOkkPB80O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":350984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSrgCRA9TVsSAnZWagAAHFAP/35q05S1KxguGqjoEij0\nerIO1ogODAHTNMJ56CNu7rpZls+UK+xSK4DrFHyvTgs1RPqBl5VaZV8tfFEP\nAPIIEAThmOu9CK++Hj/484C6zwaTWjDJczDSO68olCP7osxBOAV2Q/ePZvHg\nUet1BCbSeL4/ondM1Sa4OZuy5fUyvlgK+ZR2XOEDe4Oj/HyZQ2MrBMkQKfxc\nQvBRkEQ3voNqgmuFtwbGVkEc4DgJz206cazGvaOkQHPuwR+DkZy3IzsSoKk7\ndrg63ZQgFjF8jOH8lNt2fWEaFFfNK6Ehb//mk1J7stkoIY71ILyhfXRr3dXR\nGgm0Y8py4JrdVIgtQ7fns/HN6srayNA7/fFH+aL5mU/DlPuhQiEqav9ZYVcm\nwYwd1CENE08N35fUWu0Kjmt0M2HFYol9KIv5ZLZfJkLVwtIvcShsWxxPerqU\nGv/bt9UHayznF4OW+knPK5/yj91KIHv8H4SdGZ/0pdHHDDCPRWmUQpzCf4hb\nmXjZX6y9Bb7IhyQne9/alD1WME5vlfbEupGgruKGwPnWAJ9UfAForsBYRF+D\ntX8OSibXOUVC4/PnqIDyKc7zW+T/IxVT9QxWJsqIOFmD+1+45hlhsDRFoRS7\nChsKCa9ns3gL3fe3+quOU0V/1M+kwXpxIshonASq+zRrIDNtmX73kX+uDKFt\nf72n\r\n=PbTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.3_1614883551990_0.7418939831972984","host":"s3://npm-registry-packages"}},"0.1.4":{"name":"@fdmg/bnr-design-system","version":"0.1.4","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.4","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"acdde0153a21d052fe6876b99f792f57067b9060","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.4.tgz","fileCount":65,"integrity":"sha512-t3t2L1kXKi7wzgFBJ0EN0+fz0Hg90Eq8rknxaP6GoqLAyuyNQ6Qr2opXSUniS86eEUztXw9lSJKOdW9EWm3LlQ==","signatures":[{"sig":"MEYCIQCjTRI9PS50u6kafU+KGcyA42fW90KeWuVBS2WS9CRd8gIhAKmX26ll3HF997ivl6GcNDJuz8XeY9Lwj/Ikyo27R7pa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQS6JCRA9TVsSAnZWagAA1ecP/0tKvC6JoTkZt7mwssY5\nqJEUUVZrBUhbCcPqdQ8WqNSPfBX4et1x1k7ppvrME4lVDVDi9D5jogCIoUMd\nA0XIZOwQUsANuztMAGO26KIj1xZBg0tuyfUHsTOxz+NTiSoAclpVuBvmmuXN\n2xCZJCE9sYVe68c9nAveH6WGxGDaLYcpcb2A2dzmlQ2jSOeEq8viOWdENQAB\nOWhuKCkH9umid30BOoVcLCQoqvsjF64p3GRb5+HDAP/t2sCHTEI/cwfnXiKF\nkoOoPtUupK6fhUB4w1Yf5K9Dj1Ntod4K1qVjL4EYnJDVV5Cfs4iqy/fB4gYc\nXa/7S7ZN15ksSGDIWcQgckASTkDyUTSPqYzM6InYFc1XBaID7qLPRbfYKubu\nC75fkxF311TuirIApfZDN/F66NZB35SuXwpMGyxIb9sknmIab45awCeR3Qp/\nVvaS/U9jzXDs6WhuTyLBH8AIgPaPFtU1EBceZIKGPPegHvL7vb1Qxm4H7VqA\nJPJ3CXeoMpxgTxdFqQZsuE811tp+2PcpyGnE81noweUtlRupuPRCWLjoJvpF\n2Kzwd67O50HFKIUrt47p0SKvghU41YnYssBtKVoblM4uTqFnuC3VtPDQw8xn\nB6ll8Bg8PVww0S80SZW8T0nrcDm0h/RFQRYh4ltFBtAXdpUp7c4lUHKDtDu1\nUF6Y\r\n=Iw9/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.4_1614884488810_0.11580262687690013","host":"s3://npm-registry-packages"}},"0.1.5-canary.1":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.1","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.1","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"f24eede75521edc2390d5c25a882a80f5e222a59","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.1.tgz","fileCount":65,"integrity":"sha512-Ye4Lk06NZo3ZGPIbMSL9h0e6bTdTUEvl4yFQqlo1YHCBNk5psbDR8Wds8Xtxsb5CBtF9295iL35ts/1nNGlx8w==","signatures":[{"sig":"MEUCIQDIoLGxr+n4BB6JhMue7w+pvKT/lW2g7x7qYn0kmPl2DwIgI558TMU0I8ziZiwHil9uIdpzuGTB74XdFnk8uBjuhKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQT1qCRA9TVsSAnZWagAAV3oP+wRTVVVP1hC9BT2Kl7JQ\n5lZKP/P4X6uvcoa4fItZaxXThujcXbl0Xa2a0KoRIblR5x5XbfRJE8u2kHlw\npq61Tfr7WWJCVJdSXfJR/smLOn65h4IKcfQptBRl+/DVb+S2sPsbjXMjSCdo\nI4xPDwX4MjtwAPdgrMMgR1K0O5+xkGBb1Ofs6QtH01yzZ6KPz9ZVX5WzZlYR\n76WsHcK0JRlbY4Q98mTi+owV9i8uXwo9UMrHhjOhrIkZ59IshGrOHAedRb7y\n1f78R+/TgUcSgvWVfUTn1pke7orUjWNXVCAqySrvj9dA0LoqkHKf11/vq5YQ\nvWnsXriLYrPZDoWASl69MN2WioMfqCuBws0Hb2iaY+IOoBpdUJ3bWMqfE9Vl\nH9mL5MzIZYSx5mDi6rIdF2zhj/qmdpJDY55GwngsM50BtHPFaJW1zjr84IBS\nQfXlTNXJR1Ron203JJVDlYz66wZsQ91z/3ly/L4eHdVEbRamE4nmpGA8kkBa\nTQxozMF1wtd6KQ2fByyh4qkGEbDvbV+XM81Qe5dsCKFlC0O6C+sO9NZNKzoL\nonpVUJhEeW44qeTrqFBNBOeeRavplMhRZEKIR+CW6PY7LfH6tcv7hfKwmZMS\nPYt345SFGAACUwNUHvNQslBwKz9sACs2QVPd0Xn9rcYWuu8DIXGTyN9kDaWt\nL9v2\r\n=0hPK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.1_1614888297883_0.5166748284961622","host":"s3://npm-registry-packages"}},"0.1.5-canary.2":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.2","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.2","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"fb368edee460f8015c8ad383e2667af3eabb6777","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.2.tgz","fileCount":65,"integrity":"sha512-kDTuw8c5kpEmOyGUExYeF0dCA9x9qHdheyYSUDdOGhpDLoy2RhgfdRD2DUWfa953Me6z7LwKu5JlZBzstu7hLQ==","signatures":[{"sig":"MEQCIFjPQdSr4QgQCQu7ivCieXq8JncnpxO3TjGaSsyqyc1PAiBZaqJqU7HJU0DaXhSlCx/mZDR9dxpRudVQrxaBExqX6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":351573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUELCRA9TVsSAnZWagAA4c0QAJYTQrRClbX5Np5ynM+o\nu3uJ7LZcX3viggbk9I6ddzlOZGsyNWqYjdUU8qYCM97uV8Ugs/GU85UuGnwb\nniAH7Ph01WFGoQK8zYLUU4ZdNoZxLrCrxpdvdjOYEMQE2ZmBn/q7gKSCZM/B\nxb21DpIxfSvy8H2NAeWG06ML5EGtS7BYKFbzEIMCSsen6xjL+jZlsatkL9/H\nmVjS99ud0EajDG0Jw7nRsp5SBiUCEk6giB6/8rWGzISNqCzm0KLjw25t+96j\nq91RK6xqxMjc0neRqKReFMo4hcW3ioRsif6fnwH5LH5GGr6MciGwe/tevSmR\n/WCo+hbYxpmDoDMRTwzAsEJ+51SFX1Z45NlGnXgUgYQutqxr7vjzQ5RkGrGW\nJ9pA4LGFCVXrD58wANEMXszhi+aW40EwMHx9AssUtXgtTZrarmpWxMXIBRyR\n4ni8hI/tIBtw4WUaE2TzIa6FuizvRxGiiOeEONUipm9TufGODsitvcEtuMvn\nV/BFu71D/6R/QY+MPC9p8y4QgSJafHBrCvWT2oGpTJNB7tpCc+IrjfiyFIq7\n0fEkhnBXUAI10Na6HgTi9j1t7Jje/OrD37D5fnB5FLh+3QKcJ4nKux7pxaYd\nQ5IqF3DP8zMei/GsK6L7Gvzl60LdtSww6gNxLbNoBkb6klIPh9hAAnx/AH0u\nx+kN\r\n=y/Be\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.2_1614889226670_0.4970819830528779","host":"s3://npm-registry-packages"}},"0.1.5-canary.3":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.3","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.3","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"c0d3157dfc855b403812256fd09be4c8a952dd19","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.3.tgz","fileCount":66,"integrity":"sha512-nVQvAqJcwBThl5LrSQMo1Cp1WC0RLI7SqCaam9U0vUNFUmWrQih8gLVvXXQCzu77qq7OW2adtwx4Bntq2p6p8g==","signatures":[{"sig":"MEYCIQDIr8iQeXMzWIx18Fz4S7sqo61aItBMyn5tUdw2wnVphQIhANG/nkOHrzfHjScWo+g1L/krkbTWb60L71fAjo/y9Me+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQU2HCRA9TVsSAnZWagAAakUP/0/mt6QxbuqUYVbMvlg4\nVWMoOGylW8t6s8ZBkCLXHmARrHtT+dOc+Ej/lUYUtCE19e8BKJoX7PU3kbJq\nWNOC8JfXg7RRrqWoXwZDY8BMGWdKAM2RvHLMOkWVnDTmUNXiXwyvwO6tymUB\ngS96WpAEpCTglRyUJOprERlFvKb6ntybtU305A/6JAR77aeIVaPcDMnA5M/g\nLmNtikQfe0uWukZYFmpo0eK0DeECvow/fdx4K2l+ibEJmDAix39DOcNswBCo\nwf8X/q0fa0XRjkjerg9uNzcEa63Ha01v5fFUXz78o0G9pIbpPXBwT5AACr3u\nWZeJteye/Kbz58o7S+h4rKmta7FmoIuWccvlDxq8rJLqpUMOvutbOTfhu1xs\n4AAbhs0cDqHxZRdkcbCT8XjwDnKOVm1cw94FPHHSqXbeknng8nnJaIwTZ1oo\ns9PDvBAWvIsC/37Ua1P1WAx+Fs7eXCcHouPsagacuPih8hXM0yn89Gq5yO56\nKnlQDe7hgZUamAVa1WVp7GYvFRVyt/GJn4FMGWNIcZvrHIpzBOvkz/xxRT3l\n5Fv8EP+VSe8ouSC3ReESe3CzU2PHwY/nw855W8CE4NGOi9Pz1vXC6gIo9KF/\ncDpdnVwG0VulgY+/7Idpq1kXisZB4R8aN0kc65CqRGVpBV/ZhsNZ+isQDlfz\nQE6N\r\n=41MS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.3_1614892422684_0.37375408076287386","host":"s3://npm-registry-packages"}},"0.1.5-canary.4":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.4","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.4","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"f8d29ac3c29bf1671e5a960ba40d223eb77bdab3","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.4.tgz","fileCount":66,"integrity":"sha512-rBdsgz8SgUmin3+a0Cg7Ch2bKQ5qkQFcdwNDonRini5kAZiWy7VPSynESmk3hpewHJQ4abOJjgd8hdxmgqkMMA==","signatures":[{"sig":"MEUCIAMwnZ2tz+smny3sXm9SDKWPnzwAyTY+xruVH7XO27WLAiEAqwihVxL/AbitUkOOjShRCr4Hjwpt0myfI7qCf3FbK8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVI7CRA9TVsSAnZWagAAQnYQAJP5HaqHT5Yk2kHVXiJr\nsyMNrmLULMM1fpb8/rjBupvL94Lg+BMEZbxx21BV4m47BqL+mexiJEa+wgdt\n7d6heup53M53BOPmGDcsFh+pV6EqCfNQXykAPiQWDHZAy/iBOAWsB6PtulHa\nLLAkHGoPuZbfvi2qUYZhNscgmdYRgG6SsBREoGylIeS57THQZVoGlbxc6R4l\ny6PtoJxiUVCL0lKZfNsGqMQYm5dPP+nItK9jxqWz87joZSyvOTHvDbbhdUSE\nAfpbW0+LchzWqjZFu0HucMtIvigrDj+6ZyA4mGrtq+y4H43Nvi/iCvDxoeDG\nqpQWwXP/rclcrLldaqrcGk6rFAk/Rw76B5Z5I8R8VuaPrhQJMh6I5aIpiBsF\nltrIp+jCb+Eu0Q0wbEVrjGPEikA60k2lI2VLfUyTKsaTfdaWexL2as26jeAd\nOcwFeOkoE8R/aaafUSsYlQSLdAIzWewo5WgaTIhVv2HA8Oo34DBD8bv3zNb0\nFQPSKQNfF40VklTAdYf27b6tWYta2rb2iZjH5Y7B2YuVxsKKxe4j9b/RekkW\nrsMpwzpTMG5iX7HjhF2myQ5qp518pD/NPgDaNDccf/3Tuz2F15XcUUOiy78+\n8OCE71UeHsu8WyUnIu29/AykOSFqCgYmrhS8GtWyAhXTSoTq3N9tWLAIvHfE\nse8J\r\n=aOdn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.4_1614893627431_0.2510530091672052","host":"s3://npm-registry-packages"}},"0.1.5-canary.5":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.5","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.5","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"dbefc4f69c8fa78b760b6380696ad7bf36fded3b","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.5.tgz","fileCount":66,"integrity":"sha512-zMrnPpsaHu2qLx4RoQ6Yi8pd6Sf9suSizOKYZwGiw6MNv+ojK8BK+4FO1Qq7Ep359Z9kud7yymObZYuFUSHOqw==","signatures":[{"sig":"MEQCIGw2ugdXE+9bg7+A0VZ8TWUi14vHnmj6rDb1/IWOJbiIAiBel0M1ZWkFkGCsM5PqG0UuC64n0KzC0d8dm0fhnykt+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVQnCRA9TVsSAnZWagAA3ccP/2XauhtErxAAt8rD4S5e\ndSUn0kyBunYsVllm8hMgz0k6tc72Qm3cCoRMxH2XO6RweKzP7BNofk8WlMTx\nBrprPjEhOes88qKZVdu4xd55WnC95nhGqyXeEf1usvZcRliknZQuFM+6Rhi0\nmZPZVt6CUdTyQl6ktbHOP6N5ACLXDOzCYZV29AeRxYDrREqpNUf9tNSIawe9\ngAtbmweh9AZ5RQd4fh0OT6h+9nyptHnuOabhkWe2SEFoIYJZdWcjaijmxj7S\nYbT6StiOAJT0qrmem4FKRZ5Lev3myo0k249jSDSghEc8J056HIhxcwqHNO+2\nR699Ot9eTb8LcoUIocQVQA346jFLYpI2mUTQ/tgaRAUhBPQ3WnpvVy6+p/si\nKz44Tlya3cy19g2UnRKb6Qf+dF7jK5nA8nMcGEbl3AoqS4GPzaPdPSHba0YB\nwzYUMEDnpFdP/NRAc8mnSFd7ZZVyUQVLCIFlp5v8LMFTSL42ZV/6j2eZXcGI\nzMY5EPt1iSoaVLtE6OHNc4Tvr41MzBKJEIPAyE9HXba1VPI0qxa5h1h8oSmU\nTG7WGNqNQvHBRYFFmUHBeMmqb/UE8KIecnLplssfnyyipBB4mQcEOyjyH6d+\nvFtkm0exrnxzGWGMIY3CkLQmXlMEbcctz38UcM75CBxJ3AX8S6OFIV2HZs3R\nU+y3\r\n=8Qnn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.5_1614894118836_0.9554986179395113","host":"s3://npm-registry-packages"}},"0.1.5-canary.6":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.6","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.6","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"a6ed1ba252e8df3df91dd5f9566cc2a7417c9c94","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.6.tgz","fileCount":66,"integrity":"sha512-jVcjKzqZb26xmxwIPB0/jtC7+ULJUk9T4DK0rYa5mBLxrqaP4ZXdslrHyi8Nl1UnBJCpAuDls3PGkNhkFpNB0A==","signatures":[{"sig":"MEUCIQD7FsAnLk7CWaKcM1nJWKBWbaCrpKtxiggRcsb/q1Ca3wIgQm/gMJF7S19+ODT42AScAGYdCHQfS6445v0PD/UPHGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVaBCRA9TVsSAnZWagAA+ykP/iIaZZcshhbAs33rDUem\nWgdYAST8o+/sJXltnyGt//zeNddkhceGrSnY1Idp5qh0KEUEG50spqKFCrsJ\nkDlYr83uVdka9LahQN4eyHt43yNXQhSxVRpstRljP17pLcVaB3H0NCiSBBwK\nLarnC2RogjQD5BMj0WeVMT9tlQVrqknU2Cq6jzUT8djbMFLzVVhgDcYkUh6B\ntFHmaTAVmlvdYy9Z6OEcE3x/8PQWnD0RIBKOvBGeLvfa3IQxi1gTd4QwsC1h\nwiIcHJhHy6PiUsnO8hG6THuPxuYnzoTm37FXZUudLNue20gBDd1VOJupfLuz\nv1DRr/00wM7cT7meCHJ/ocZ+BFRjfzcm1pVWnxJdAezq9bn5DGNrD5vxqh2m\nXdUIYn1KQAi+U/YTIFzksRR3aRajdGXaDxaoIJSUq0dzWn97vsl+nlAl1C1F\nHS6pQb4rzNPED194eUz0k6/E524Vrmao0eW9XLFUV04gR2eyAszTLVgg4Nvg\njpRl5MJUzy7IP2YLrTlkJxD4yo5mu6N6lMqgG0ItvchCdYoG/wvrNR+NbEkC\nSFgFc9WAFz3H5/WpkTPRCciuVQdL6TdQZejd0xvPaN6DECU3Prc0CQkt/Cuc\nLx0dsO+5rJ6PtcCKwJkvy1JqnhEO3CL3NLLsQynW4yq8A61fVplBSKR+emrC\nfJ/l\r\n=+GqJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.6_1614894721296_0.09489567584933445","host":"s3://npm-registry-packages"}},"0.1.5-canary.7":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.7","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.7","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"e012bc650701f02d4b4ed7aa8f7250e72b548539","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.7.tgz","fileCount":66,"integrity":"sha512-qG9HC+j/XOU/PrOiYYkuOisL6/gIU8lhGIOj5V+dLWsVszTUa6zPohsAD25G13OseBhlIjbL1uO0QkpswdpUfg==","signatures":[{"sig":"MEUCIGZ661hlHhQFz65RlvzynGgNn3GzJwA/0I5vPSkunQ35AiEAlKzh84fGJLWqMXfNTi84wEyZz8Cbx5B5TqP+uycL2Eo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVcNCRA9TVsSAnZWagAAAdUQAJGt4kOmsX2bKqKtJgy2\ngwDcB6BPs0lB8379C7PdD5A7XDSkfvrNCIkjtTeR4oChmdHyvGtqESL+9fYA\nxwMKnJOpprHhgMVnM8guLNTyNmdcu0XPMGr/LIDfbynnE5B1JdKC05G88XOj\nKjW6P0A9fj/NHo55xP2O5q/qgFHVFUDf4hL7IGSL1K4U5CV94m/I0Je7xkrg\n7yqh9NIxxOC4cr8jpTGCONvwh+fAgkB0eqj98cnihcbuN30HN6lYtqt4GnxL\nkZqsEXj5oAFvxXjOvF5WCkFMoxrnlvs03FbljgVA/UvUrCQMrVgOM2OksOI+\nGet+ksVKD1abz891Evoj8HtkVZnFlpp/dyPs774fAhi/YnCvDXSHoFuJM0QW\nDTYylIb9yr5xljuyf4lgcSFqHZoopL6KSxqLShYdtabZDgn/BBx8h6IQMpFh\nJ8ipPApfrvUHMJ24G9MctmqtkYKi2aKJCJvyZ4bvAtTlbLHQq7DMvrGW20/o\nm8ApYNI5IYi/GSfNVf46ZB9IbkW6GeykyH/WCKdrYXYcnW3Ykf7hyStiNDxQ\nb1kjhtsnGdpTEvNZnMbU2jjL4rErYDnPVFpbb2mYkJ95AMUetj2tftV5IsOS\nqRYryywaur/fp7LGx7joHz+ci0Llc8APcxXa4yGf5Xckw3bi1fL67fdeLGdY\nxA+9\r\n=Zknb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.7_1614894860576_0.09250248645836878","host":"s3://npm-registry-packages"}},"0.1.5-canary.8":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.8","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.8","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"7a9a7986ebe22d597f578a98a7b1b400d22f59a4","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.8.tgz","fileCount":66,"integrity":"sha512-85f7dV3caNtLjGgMYZcEZZ6QCRttocd6IcAbWljDYJRBDVdL0ooPNUEClHN7UuY8MfaHdayK86It+/Ks3BQTRw==","signatures":[{"sig":"MEYCIQD8kFl6j2O/DbjYy9pElYb/XDkqWk/vk3a226PXK7PRiAIhAL8IIBo5idSevbuGTMv5ybKLuGaTKmix7BoMBjbqLmch","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVhXCRA9TVsSAnZWagAA6MUP/AxBJ07CkmcYKW8Yhwmo\nDZYVUkdunFFNa7VD8K/3pdsTNJ35l89762/X+kZZN+OGYy1bqt2JDZ0VHQuz\n+9oZgZ347O0UuY3JLI0QK5uyo4Hm/giMW/w+VMh/o+jvNC9iFaLOf3Le6npI\nhq9tCLPStO6OlFak8MumSd+/fjPPHMophsDadZLuL6z4tSfmHpHu1yEb1Koy\nTQfINTfx6C4BxCu9iO3qR+javlXv6K+hJvYRpfkKvoYQahoZV6YP5i88JeMV\nBURjgyMOTmc3NyANKytjL5HJg6qJ73WV5euFWr8rhBcFlev4IpQvhQ7XXLdz\nUsDDfZLkhCV5zTfBs8nvWRtwyXqwx9TUVhk5OfHXT1lIJt4Z8jyTb3DldkDP\n87DHPRQoDn4tE5C1JN8rSJURYYvv4j2O7vjddLqjG7pw3XVsG91v4QN4rmiG\nncqrGPbMtNt7Y+89YRceb9andKrAfpfgtTbfapz0xVInbR+wAvflmOWzMEs6\nEqSCMVRJ6DIDyvLhKDHa8Iv4/YCv6CTkKQZ+ZqRpcrw0CON8nolOOcJr7FSu\nUSgmW8aUuiP0bbAoIO5yaFTjrgQNRlIGw6vjv9qxPfQH1aYhfygT4IwfqmbB\nhEmYpTUILYSDkTeKGw5wRCdIzL04MZnqrEyFKGFSMFM7On8p33j4gG0UMb3w\nWu+k\r\n=3i2n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.8_1614895191248_0.9700643318839204","host":"s3://npm-registry-packages"}},"0.1.5-canary.9":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.9","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.9","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"f7b35fc235cac790622df6a1b3ea91a623d703ea","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.9.tgz","fileCount":66,"integrity":"sha512-53pXLuhXlHXK8SzTlE1S7Ma30pw1VEWzXTLN4BMOk5xcRESplFlldVs2zsD9lkuIi0/wTzwNuNewJv7pdvBVhA==","signatures":[{"sig":"MEYCIQDUnFnahH+M1EY5NcvoOQTZ70LgaZqa7OMuhBJQPYN76wIhAM+aSRrmnE41elZx/dpkT1HnEPFK2lZGqjXcXyx295kC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":353767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQhvmCRA9TVsSAnZWagAAuQ8QAJxLjxp/p4puyonpXwH/\n3IMbqCJTARlJdk4HybRGUgDWT2xOrHuo7LXgUJPieTWkho92gxabs1n0dxGb\nPdMLYLihsxAuKtkalJQ0xsJhYdV5Pm3huGgdoyKV4mmVG16ezWzirltZlHn8\n2DWwTdfx1n7VVLrbOaUE8AAJJpsat1gPV0OXHaP4VNL1p/MxSnVcc6jNItjl\nwoVBCSoRBVFUofS8bmJYVfIkoPrkXPaCjS1SWI7/gwZ9RAmu1mrUDi+VJnQb\njFmfhZFYfKc9cakoRIsXVjXQ/hkx/qg7/uOOaML/fNvKC3h9/wMH7acTdnSo\nkpBu1hPRCcKbfkEH1uK09bQuz6f63AfafULd3jG1pGQM7qMuGk/x4rFrQRRs\nTh5W8sJ2Lpd3EQWzP5ISN8oi4kvnG+y1PkC0uoLZa4ZzxEtjjFPnCI93AmSW\ny+YizlLEQiBoi7LhSg8zHcO/sS2/N7iytH2nvJqHydP6pyowmzDyhMJEtwQ4\n8qVuRC05HRQ4+CXr06SYPkiE1Gi8gWQgDaFwzfzaPi4GkVHQpYUf0ykFFocY\nckA3NEcez9dzxq5I3KiMzGadjgRos1EEcHZ8ZR4sVIyZChAYJU4twtB9SG32\nd/LK+/DbqzsDrdYOGjRmUJZTs1yB51SfEOS9EV5J1sm2LgQUoxwj49+2eiwk\ntYHB\r\n=wzEr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.9_1614945253643_0.71058379369178","host":"s3://npm-registry-packages"}},"0.1.5-canary.10":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.10","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.10","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"393a8a40d9f08fd56ad6c2b42962d091e037baa9","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.10.tgz","fileCount":66,"integrity":"sha512-P4N09mxLKW1ilk3En/UoJEHkRenwpAJZHvUw14+iND/1D4m5IZuml/+jAXRUkWYNPpuxF8rtrMTHxjEqR4/+2w==","signatures":[{"sig":"MEUCIQCbmPGy9NfXAJExZKDW+9qc949uJEXMNBsM0H8YXCWSlwIgcxIevl/HgcTvLYJf2oNnd3YMvDlQTCuuyFVo2S2JbUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":315999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQh8dCRA9TVsSAnZWagAAKj4P/RAvv9PYJDb0Lq7AXSVk\nqrVXASNx87E0KBCEzu6hv+uMAv+x2cheDQT0uLbAGUgbovpEk9olJVpRF7qn\nUeduO02zdzYKX42QrKK2GYd20IOa85bhqIOgHwaVmU2zkE81uJRjp/D60++p\nk5uVrTo3xn6NH+69To7X7JwDa1OVIW64MHCF2N3GG1SoetQMGaD8wHoRJpKm\nI5tpDjxQ3FaVexm8c0dxkrCzm6srOhd2c+4xWaTInSxPvu7+CflBVXeHenHC\n0yRt3Rc/KBXt502EH088M8JDvcQuXuCfNTYk/sBVpV2P0oEZff9QTjC5665E\n73BzGtb3s6WLTAk1vP8jzxmOYyaFgRo6B0eHQG7CnIJo70ib+Yw5uUFcUaCS\nnScDtxbKzjWjSiiZJIF1u94kfnxwPf/+ZWHshCowA3IceN+YC8zNkbCMD/fT\nhsibaKfXmTueYYIUEdjP7KdKeL8OzrmsHxwSkbPi0lKm6xfjLoxrmzUUQLTw\no4j8/zXx2HnFyhR8vzA9jM1i8kMwvZSad8N5yfipy5PjDHbeOqzO9i9jPgmZ\nq3B8CC7nsTi5rYrTZ9zplTu1V66CJpdlaOuQqgKjBofENFMWGXAfwYXTF9zp\nxhoD6cOjFyottdxuzfILHa+BxRGDTPSiA5jVRIRaEObpp3YGVDxxO446mtoJ\n46iP\r\n=aPBk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.10_1614946077065_0.881747559696588","host":"s3://npm-registry-packages"}},"0.1.5-canary.11":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.11","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.11","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"d46a1804f1dfbb0bf5ec900cd53e825ec5deab6b","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.11.tgz","fileCount":66,"integrity":"sha512-B1yO99r2Csv0Myl1iL9tbNvtxNLLDy0sToQZl+5DLJKSbyFyVi0P2V7ji1kiX6Lf31iKgJT3CqJl/rkPGOkSpA==","signatures":[{"sig":"MEQCIBtek6IB2ioi5pk0PsaAn0rFQj+7wSWwooN4HtqNv+LdAiAnEv6fHH11KaWJp/ur8wxmz7sM+2998Pi3UQngrUs+8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQiIiCRA9TVsSAnZWagAAcDMQAJWsAXsYrxxLVSQqrrai\njhnTj+lRnjOrXxP5bXQZudMLsVNeQaJGl6TU6PmNFyJsy5fs5aRmUtPCdHhg\njmqrQUF8q9ZJGzTS5vhn4QM8gTlWEHNc5C0J0Fv09KazTGMJ0hraygXgaeMP\nBLIEph17B8sI6uEhqBl4f06Sv9L5jUXuOxQkb0BeyHYDfMcXwcj79AR9yYHW\ngqn8SikvUOIZILf9XiCfOl7RwUhhIqWvtbLn0NNEQIopVcJIkVyF57GzUFXs\n4KfsAhqDXg2dN4r15JD70NB2RUFZp+nSGCS/ka6EtN3tbWCcQ7EHxc8C8yGu\nUtLNR+ROXXCfJZykPhW2h8tT84Z+1WqHq1ukQKiqMS8RsywfOCpuZVssxt4J\np46qqJm3GbA+BOvgogtx+bprP/ntqk1Jt5sx5JBVcVLmVpAEI6K192W2tvtm\nKQw7t1EhgszKH4L88LUrXhEv48mR8KgT5LY32WCWkCTx6OoZpBaQRPubCC+x\nwT4Qh2MldVwyqgOHGa9njKEcDIAm6gGV1oiek6JCY9cB7TvPDPwSl4xSh+pp\nDHg4SzEjHYLJM4Kb3K1fkTqoKJaTxP5tlCvhJ0HvkaSaekOCvQye18jFhHZN\npzFGYymeMrBN9iJYNFc6pwT15xJnjNtbzNePYJTYIGPd3wXpasErX6NKOoxa\n6rUx\r\n=qaGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.11_1614946850407_0.9414338163070228","host":"s3://npm-registry-packages"}},"0.1.5-canary.12":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.12","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.12","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"a58161a3baa3bb7417a3107a3e5371afea238981","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.12.tgz","fileCount":66,"integrity":"sha512-aIZwBcQCXShqrpyFkdxYc4rGpablhtz8HXyP+eAVM+Cez88uPgDMs7UZv63rBV2OH5zCanBv06VU0ckj+S5DEw==","signatures":[{"sig":"MEUCIBOZoE+BYH7NM3ErVPHDajGgzeTOmyl/cWrUx2x5Jx6cAiEA8vzRMAatA7UWbEdyoCqyi9LyDly8YRDx7+et8gKOkLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQiMcCRA9TVsSAnZWagAAg5EQAJk2uDVuQmMWdFN6eV15\naBEAKBCvWfJV+sRg0xcXPJwxLTQ908KVwVnGYrnoJ/IcVV5H+aI2wWBnID0c\n/sjI6Dxy8xX4+hlYYcmlZsMvKm2q8yMkKi0hqxyqnHhMJp4gZDh0nUQRixSf\n6Y6DGiwa18x5sw8+RG9yYlwshuZdx8cd5UTRU24Gc4jCyfJXYVqLGQRQEUTv\nA5glF3taC8Wsbq6c1K9dB9hCC3LsDx4w9kBNM8QY2KV/FItLwMo7BiV2aszP\npu0t0vUWXVVPRkAKfnvr/iG+j1IB09ONoRGkog8Rkn6TttFYfI2ea1HD7GoE\nRDsbk+0DSW3+RkEDm0d80y+aYfhWFMXF+pG2zkAXmpVChU5pHdDSGPk0pW2A\naVCGto6hzWEfBxvhohkfju5dGp3BngRdddP3W4qrp9yIBmNOnMLZg25MCEeA\n1BkkaS/DbyVSlTaM2LNjOb+tMZsH+8iIjdMEFq3NG98pWvpgK3NPut7sm7oY\nWn2SPIfCB4eOwV00MiuYyEkIqtZBs29cKlEd9Ts7kaESU8fWrpGlkzJ3mry9\nTe3mRVuV/NfT2/v1+k02tkkCIBAWGFWsvdNlRd9d2gCoOiiLbEfA3J+uce30\n6W2XBiN3NqSBJR2437oqp/TgDhRyJ1p28jrXqWk85neR6K/SRSWHv6F9iax1\nCwG5\r\n=UHgo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.12_1614947100413_0.06712038484501548","host":"s3://npm-registry-packages"}},"0.1.5-canary.13":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.13","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.13","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"48f549a46ba6e15e4d9f6b39ee59828d06710805","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.13.tgz","fileCount":66,"integrity":"sha512-kqwgYAvkQvO9XQQ20GUfNyyeM6AIHMdBlVSPHRTlS+Oy2vrvabqN2WjUCUKBBvxZiRkH/8z1TnJZLmk/ju/GgQ==","signatures":[{"sig":"MEUCIQD9dOhRk75rKo9H/Z7Z3Eft7rTg8HRsCBkXrN91ErQK5wIgO8Mdl3YE/ui99NsyDuHzU0wlWopu9YjkeT5sze4BEls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQi+QCRA9TVsSAnZWagAA82AP/1K6gcPioT0asiOs99by\nFYuuyotk9cHuZEl3lIFRonVTG1SBm06yGgqWqwXeO/pxl3pGD5IpUlExuKaX\njMQVYKnmjSQ5II1sS7PSh1vlLcThxCsaUYW5F27h2LXW/jIG6fpGNSiFCfRY\nlutRjZ+JWXs6aw9sqpjn6uFpRfZO8Et+eZ/lM895erv4PfnxlKwUiIwSMfUl\nydAonf2fBy28iG3cFiDlD9Sp0yhppBNbg5EouoEjglyeXZ+rDbZde5yu0ViQ\nwxx2oDJi+LP+5MAbZOeEKfuk/eCYSveVVEVWK5JC+jN4UPdKKrbnNOK2Pgoj\nlFX5HOR1r5VA3hGUVrEKtwLoAmPJHzNP5Khjw4C0XQfwvlT9A58ipCpBf0OE\n/OsX9X1HfPSKvfmO8GWX+QP4sCT0hXhB/jN/ICLgcxj97/bZZ2MsmehHjJSY\nOpitcyCZZk+4QBhFbMtdY5fDSsiRXazk9Lc5pPpl2fN60FV9q53EJLCxQOtB\npiKALsuCitDWxrjLiWBD1A0v4OSn+xXmBkqO373RX6O0xXNpRtrBiCgenKkk\nxXb6ezd+dimOQTZ/d6J1G3vY9bxvbn88aL01+6bHXhI8N2qOut9HqJHghO1d\nJkxuQXEwBDPjcJEp/N2eWssOHMynxHiFuzEmLSdc5nFDG0WudpCnpixfY1ru\nRPT8\r\n=F+Yx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.13_1614950288432_0.9526830393432235","host":"s3://npm-registry-packages"}},"0.1.5-canary.14":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.14","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.14","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"cb6cbc38550832d3d6638425316799f0e88c9ce6","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.14.tgz","fileCount":66,"integrity":"sha512-kd8MHq8MtwOt5lpPRpfPgv1GYYFjETwg/EJMlzhfVKzbACmmMg25ghSTg+k4bIbQNCVsm9d0geJhofKVOw6B5w==","signatures":[{"sig":"MEQCICrVBJuJ0oEcrmdMk0ltfO+BfoSATPpeKf6kzH/C6+iMAiBsBwoLeyGp4wGbIlCnAMhS3Rsig9cEquFTXPH+HPAeog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQjUbCRA9TVsSAnZWagAAynUP/2ZD3pBcVMI7pO9IL8jq\nEqeoALcv/EUrMhCnjRV/YRU1jkMpnJnkoq2kq8fwrBRe/hwxGcvrdUEBoqEq\nouplgzt56O9otAJGcmIw69d+IgIcxFvYgtcPCQOklgdjZy9y+Yr3vrNDb0vh\nmd8fnJ07uLBj1P9Y5qO/8ds6KGz3MZZ8sh2AJut6J5e/qHOdgt9wtqCWf5P3\nTNI8C4+GkJjfqVbAnmFY7+sYuUZPkvJzfLKCa05x8DFtwHPU/82AdiJBqJrF\n5DaoDuLd9uwAHYARNnI8lVGJyx00CDMzIW9TNLUQKGrwx0lZ/Kd4X5k09f/N\n81tVn+upEvnZ+gPe8taDgazPrtHgAznCHR32j/O4C5b+tSzDhdK/AnEyNDHQ\n/C4SWJxQx5XGmjZY3OMXQLcKRzOEQPKTVcM/f2XQcBG5glAutesLuwb+NkzL\nU8YMRwhWjzusmVE3ta6ZWs5YwOLlPRA+OfD1pfd4dZum3sd9TlSlHDIU2+uT\nDu/rz7ao+W2rMIsn1XBMrsG1/1Zl39aawCh6nPL7Roe2HGz8A0YReWAvMcxs\nkrTWFktq0PoRwIwu7rL1jNbPSjmhfp9SHqh7TAfFIX4V7FJ91/U8ET6fk52F\ngfQ8QR39hrqBeqWfL1iMvgSYwa4eA2iouxEd6AV7ZuvNjOQJAGVC7SuqX02o\nH7zp\r\n=RG3h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.14_1614951707268_0.5496340769514745","host":"s3://npm-registry-packages"}},"0.1.5-canary.15":{"name":"@fdmg/bnr-design-system","version":"0.1.5-canary.15","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5-canary.15","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"c1f0941b7fb18fbd371e409845d0e7bdff146475","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5-canary.15.tgz","fileCount":66,"integrity":"sha512-2+YkFPGD+8Y4CG19Ces6Ssb81JLzyCSI5KY7Ior4MvWFqNlRDhWKqH3MlNm/jKVIbcn1cTQHoC6ddEmEbzkDhA==","signatures":[{"sig":"MEUCIQC00kCJ/r6a8fHJbwet+5AW5cYCLGUoMv1RxEISS+nPLQIgd8jvaTYZJd7cO50E6RjkTvRg50fs9Tyv9qA8UBjr06Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQjXfCRA9TVsSAnZWagAA5sIP/A99qx+84r+DsusO5/Sl\nICDY6RJugPIJcjaqjRe6JP7CytMRzlpE4MICz9Q5biG3scwi0vISWasZJ3SQ\ne/DQJ/Ueea/ofzgooKZztqR2JDN5HULAd5Fe6MyTH1lbqXIxM/RMpvhT5Sgg\njnCo3UrCKYhTxWTMqJOY3p2DbAt2GzRGLjl36m0+z45xRYGmZbhVyRv8/eOP\n4tS2e6Twly7zN9EEaYKlEt509oPyOAoNBoz4TnaXK6bqWocOOwR23uRiISm+\nh82pSCjklRtEv4AczEUbPYFUNDm936JGQq5uIX7Su2IyzfyfrKEuYIg3N8s9\niJxqUUB9k1EsqcJ5tK67eSxWaMcJKDbvrmmryCkGofTbzcxJsc1teuad5uXE\nVfaXGHbOWocgKStadJcNUocf4BJERG7GdQfxNGRw6k/yNkt9WAysrCSTDXdC\nIPKeyzO5SQoqDzivseLrubZ3+CTfkt2PEXQkr5xEkI1xh0iJgnJbhn88VIhW\nGPmaKdzZuRbMoU3+gKfklUKOoQ3LuGx9+uhjbkFDtpcbVd5yF5uVHDyd+LBo\nvexdCjb9D0XGRVteS2R6LLUo4qDrmCH8nsDYQfKykrdJZ/8D51nRd4R/pwvO\nSK5QPFfB4Y91aZ/fY3gjLwMkFeTRYVlz/R/EwZWB64Pt4Oh7Fp2dpO624gFc\neybh\r\n=CfEa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5-canary.15_1614951902941_0.2075557924610134","host":"s3://npm-registry-packages"}},"0.1.5":{"name":"@fdmg/bnr-design-system","version":"0.1.5","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.5","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"da64452c8cdd138462e513c2d6ddb5b6a5379ce6","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.5.tgz","fileCount":66,"integrity":"sha512-OvULsFYhyPS2yG1D1pq1RQTSraX3dW1wXoVDCvzVEV6ZMxetcj8qFpOOel6QN80WkYqSE4HpHbwcf4AgMxZ1IQ==","signatures":[{"sig":"MEUCIAw29r3FqKCeFi3SlfFGoEQ5zDfkSQeXRnhG1294HOihAiEAhFgZtW0IPZWHLkwZLp9PW5TqjIJw2kL1og8NyS8Lvh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQkGfCRA9TVsSAnZWagAArwQP/27odaFcAEBgIl/KiLFe\nKKRr95uwooegHhh/zeXOUebEYsySJs15W9aR0xy7uzySr5Ac/BILrmMJaZPj\nwEZGjlaOaHVzGHMABFGhVo/qqp0wrrFMHWxdR0jAZG0pM0NYtwXYeY9TerYE\nElQIj4YgRVxzhQ1HH/hBPwX1uUkaQIOUXRS/C3IQbEPIwLCCApraW0+QFtnB\n3hmUBSc05ibxsyTrK7/NRAj9YeaQGodFtbxtmbr9jFEzYiXFG2rcszXPeDBA\n9oLo2zbqQ91Dg5ob6LQh3TOyf06z+Tt+TEl7tZ7NIO0SMHWGUF9jyfXtle7W\nDj3WZa2iAcxVK7dX0Jg0p7umePAr6H7QHgDfhvziZBRJlRO9/p8mVIgmX6gA\nKMSV6iJoRK6gIewYD7XoO7NeOsKs5PBV+IjaTCuWyhjg0GCBVfjMbTDSKi46\nMPmbC77231PX4Zb9ebGj7l7inwLSLv8DQ7LozrgQuofKTweUGiq9cj6wjmNL\nvXjwrk2uj+dMIMsGvGLMXAx9WaYB0j0zI5DYMn0vhsaTiFZ3KYDzhzkV6gDw\ng5tKQ/0+bycK6VwTXx/i80vUn9avztImN86I5WbRCmxG4AMLpsaYpZZXlZHy\nr82dquhEQsL4Cmzvb71hzSGGkD6Q+2QDDwaKuA4hWDMxo7nsc51IEHKwTGMG\n4CB1\r\n=Fxnt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.7","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.0.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.1","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.15.2"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.5_1614954910560_0.7127851956780868","host":"s3://npm-registry-packages"}},"0.1.6":{"name":"@fdmg/bnr-design-system","version":"0.1.6","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.6","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"bac5b329fe36479f23887cc4452fe835430ffa90","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.6.tgz","fileCount":66,"integrity":"sha512-dltxedz/yj44wTe7WhWvmpGeqahYSpyIKYAEEezHFCSEix5QjCOAGy6FnqbKHg9mjvxWFtoheqRoC13lhrvaKA==","signatures":[{"sig":"MEUCIDUJDcckvY6sqGAEAB5MTRyxNeHTLhgKqDtk9z8gU7zLAiEAo1BaPoRq4Rvb7GZm3d2lWYiWQBgB2KpCud4jc8TzIXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":230753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSIalCRA9TVsSAnZWagAAdWcP/3QS1qyEAeL/e7DoWUAj\nc4PmOOwkG1aZhIyqtGUWMrpOt+J6YSv6Hddipb0226oVHBA0sv9zyk+jIOWx\nT2F5FGEgw5xuU3/njg3dXK+K/NrMMb7iE5yP0mLqG6jrwGCjdM2hOWSykOg2\n+JgwTsxVS6FTIJPf/vMvpk1JYkU5jZrQw1PeFCcl/laDsM7ku78ODWCybLZB\nd3Heyf3Q8gmaGrgTqSxlObpY0orGAzTdMM8TbOM/lRwg5VUBkSmI8I9Hj2XM\nmXqWJUHpN97aGiGiEc80J33zL/RtVzdv/5qTs8NjqTLf+ttYHGSuW9ynGsQW\nTqiAskKAeluOGht6EVZ0v1UXoE290BhKcH6IwcaLMtKRrNo9UGE4F+FMROAt\n2P87PcpOKEv8A3yxokq5JuKbnhnZLebl15vAVMn0NGKJ8tbGRT+o8+uoyaZH\nf6paEGrw1v7B52wBnznXJRvRBKSqfXi7B0Kxex7988Vfex/kq0l/eszoceMP\njruRmrAdS3Q7mXI8kH0l12vtJ7XY4qzZAIYJVZEMqOkyl5sP8gUznH4Em9Jb\nZ4gaUtJz4VyqR7j7MsovSo/kR5rF4FBrweUKPxwKinsyB1bEJISi38E37bLs\ndJlLoxfuFrYOxbE4TOp2kfNnPrfF/bjysWy1EK/TU2W5mJ7nKDFTYOij1sRt\nio17\r\n=wgtX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.6_1615365797083_0.45221612373320386","host":"s3://npm-registry-packages"}},"0.1.7-canary.1":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.1","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.1","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"ba489821b92772819ad092c7581c3bc9ac0da6e1","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.1.tgz","fileCount":66,"integrity":"sha512-VTKsB53OHBXhACfmPVVADKbtPVkA3J0FUu+sJhBd4xEFLq/W9WKKMwV7GSgFKNJcHIn7BcWvIIVCbO4j0SEN7g==","signatures":[{"sig":"MEUCIQDhpsRBr8HhQREQbTrAhVS443iN7pmt9K9nIGg2ME+RQwIgMfdQ3TZbHeSW2WNAr8HWTrG1+rKlx9u7IddT3+vm5yM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSNurCRA9TVsSAnZWagAAxmEP/16RT6hCaPovm+HGuRFM\ngfeq4hKFvxu1nMxz68moKTJgAZtnPnx373YQUMV7PZ6LnNE1oXcagcFCDrkz\nu3nvCqn2OfRyukb9JAbgVeevXFUbSCOVUszQCbe0BwXWjypaXQ71Axr6s1y/\npJQh/hKpsIbaYqTwTpQ01eKb19DnoTMIUrf3vSLpT3mlfdaLVDyFY2zQDol7\nIZc7FlJC9+PilTeXfJ29Wwg+nhkDCBlUOmuGht2Oc+j14KmugnkMhsWF6iBN\nHwwBV2acYMhk1+sXOWA5vIihX3UPEH09ZGewjKaQT/FlQKh/KE9dh1zvTjpS\n8Bj1IR/aS+L2nirQe7ZVksIJoRUERODeSS67AksJYkCK3wlgdjsFOJT2Feqw\nfjyx7v0zSNO4hX6M7XogWlm2ZzOnCpyR2G3t7fzvFCHKtZ3a3wTjrl8DjRF6\nuynOnbyKAO59Ryz4AW5q+pS6ZC1AUA/pr4OEVKPUv+0kTSOInjmRYRk/M2CK\nEHahVYqoYPQMGP1PYB40AExUUbcA8PzincM5ASlJXjRIHb857jhGZ4ItBgMx\nwTkdJVlQ9NopJR2nj6aMoABsbfw2o6vOBYHNW/wIJbIyNVduOnR5s5FEBump\nS4jmJb0/uavpi2mV4LX8Sy3KZKIGFaq+Lh2JHkiKb0EgByl1k4eXrjKasOa2\nyaVV\r\n=+17b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.1_1615387563113_0.5839501225088499","host":"s3://npm-registry-packages"}},"0.1.7-canary.2":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.2","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.2","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"c5428b4b3608598c801cbc119c4beb8fcf6fd4e6","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.2.tgz","fileCount":67,"integrity":"sha512-7iFwL+YFCjPL91d5jKF+fa7w1XxYT5diCX3DAM/ERXSnbG8rqdXv7Ovfmk2jHHR1v5CoHe1g9+u+EsllMqsCnw==","signatures":[{"sig":"MEUCIQDCaAIpQZA9t9opHsgfs5Be5VJHyBi6IDeSjUmtMNZ01AIgLpUlBa7KTAxQusWoiiIbZzBRiavzh4lpZ2MfhrO2w+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSNz9CRA9TVsSAnZWagAAVCUP/Ri0VeLPRYJ6T6aZhhOR\nEy1i1mrHbYT5/krXfaqfQ3xvv7EDTInAw1oYeuekOA3iQwdC8VscgEIdyHyx\nwRzuDqcw8ot2LLMD9j+DkdV9ba/ApOq/c1wQ7Be8fH5hNAAVU5L/OJ3PDc/3\n2St94OHbPTC8o/LV4z4Z4ck7GXgYpa9Qj3GvAP6iEKr8HRQAPcbgKxQk/Owj\nw1OUct15WkrEU/UR8hOebU8Re+b51nZ+ngKbuA2tFDnM6yJfmXLYHAuE2HPN\ncWuYwrTZ3fY/vXl/m0UJq/CT/4XdSXaI1fF1kxmY0t6lZZ0jnyxJMdUYAPR6\na/yGFch9Z+5weDh2jQwlqDdbLgvkzPyonZDUBIXBKlDLG0WX3RnO9bf3ECjT\nH/gZQsT3UsGUOtRKlwpLROgUNW9mZv8/UCev0an8lRmuNtf3H39x+UcqVAdd\nYI0SimPYMauwNAltf6rL5rVRkD8mIl+qJ0Q/AlseI+IE/fb5xOfiXhnoCUhm\nTKhZAvnuzzNUylRvgSvXqUNOKMu/hovGBz67mKtsI52zaZ8YpBRo9ZJ9CP9l\n2/F2b2pBHLcCeS0r4DuG6DfKJEwsFZ9Knu97zUNTTHWtFF4Py2r4XoORfzOc\nJaBe6Hj6qxmPqtb1ChXh2APYCq9OtbtaZrxmNQWF9GIexlrs77j0h5f8e14o\nQCvC\r\n=Ke8B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.2_1615387901366_0.45894100196187826","host":"s3://npm-registry-packages"}},"0.1.7-canary.3":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.3","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.3","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"06bb91188435f09c75fbf26f2957a67a427a20e1","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.3.tgz","fileCount":66,"integrity":"sha512-LaZr65CbdSBkkbtBz6s7k+Fiqa2ANLjB5FNbD1/mOMFgwvWeyI7i21kqaSzMdVH7B8tRmbN9etG67MwzjLrM3g==","signatures":[{"sig":"MEUCIGKUX0v/Ub1RGigVEAR4dt2OgMPr7F2cKFALoqyKT/etAiEAlyUMZgyk4efPZKw3wna3U0fL05BKuFtaFQIkAp3GwpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSN6aCRA9TVsSAnZWagAAPvQP/2u8LFzEThp4wT4PczVz\nrXL+0gaM+86r5mXpmXPyeefYfzxiTvKvvrZXWisZL47k3k20sizVu5nvGZzC\nVADmYwrn6nG2NvYfmd/KxgiA29XpCOtwuBGdxon6CssYSvdtzj8WBXnz1yR5\nMN2zeL4988u6306MXPt+w1yfD7FqzG6K6jd8RqO0DpfPKO1L2wkLmfLRpldp\n6nsI0s7QGqSIqCfOGZXLX4iZ6oGIr9+yPc9GjHTFtQAQazJHT2QdjrF3niio\nd8TEtK4ZAUfQho/ehlh1KRlgc7e/wSGy7Bq45KPOaBTodowEeexZblorVaEs\nsfVvrdxx8/SugVMK632pJZPvl1fSUbjW3lKceUG7xjRhxZg0aPTQKO4TmhCj\nEGybflmhm+5byeTNExxdVthllqq/mYKNO7hWws7jmBTTChLnQ498eWGIxQXw\nss4dqEp2r8DbQz7cfjGtN46EPuWO2JOH7A5MY4y1c0SWnAYlGF+nHrDD6hjb\nAY3GXHcxWVlPZ7zIdxBAHpYbD2wW7agLjRmHUpg1JsjEcYp+RN+2QnclI9g6\nn15Enr2zlTq/zSm/4tgkTvCXdD0lsdfu837VM31ddU4MQ9+6z7C2fNVB4Je1\n4Ba4SrFUrxcJsY4Uv2moIzSfW/qsbuUeggFewlptECAo3MvIKKgNhZKlC+Lt\nPjGF\r\n=Ul6R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.3_1615388314239_0.43325050145199673","host":"s3://npm-registry-packages"}},"0.1.7-canary.4":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.4","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.4","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"b3a6530a5bc8f0c437c4178616ecc28205b91f3e","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.4.tgz","fileCount":66,"integrity":"sha512-QV8js8nC9vV5np66ZDWm7ubZPX2WECWCqAYEtz0M3ANaFBqhNxs1BnNgM+5Wm3M9V4QY6QzSduMh1oBubAdzyw==","signatures":[{"sig":"MEYCIQDHan1FhhX0o8qN3GQaqQxT4uctOQ5MfO16Z9AqpoUt0wIhAKIyINjaKhBiKQ74tamqMnQ3OELhijN6HAmEsg4RKfKV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":231143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSN72CRA9TVsSAnZWagAAiR8QAJYyhYNciOv8dRyTM+qe\nUs87JF4P/k6PVzd7p/NpknqknX2HYs+hqEY0Iapi4Jm34if4RaeXVbxlGJ/X\nYE084XlnviWpUH52DuwjAqzYeComj4T5f8NpUwQPDEs+YpZobU4KiQ+hvEXQ\nhwv44KJeaIsXT3/n94nVx/ko8LSeaKuE66wJtYb06I8gjsmPR7qadC9Nd6CB\n4RKGn3kegms6PsO76AY0NjHMnG9CnlMnFIvvw5ShfygCfQQnz31rqm7VMzYE\nHhhdzkEjMAjFGRNU03ykZUdwSsK0VRABlGzHS8aHkG7wQq/wRWePTMlOb+mD\nE9RFpyjd6VHu9KDq9B8K1NPIc/ix72J59XvGAFqI4JH4lWe4qzmHDjEIr4ER\nwBaYBVftEY0ePbgG9WyUkD9kFUu/ddupA/r0Oqh+XEeS1ZxHo+zQ8X26XdxJ\nhX3N3vUKCT4Pl0leM4YUK6/d4FxTl0p3bnpqoL+yA5TDjzMhIfvuvStsHvpe\nKYDYsN923TZIJp/l4OUE8lR/dqU0+uijXQ5uacsQjuQyJeOIOWOoDkjw1wxd\nSfWxAegg3aqIK3zF8YJTKC6zOdSjBL817ccQRlGyfTdIyZ96yaxWFIJYtK0K\nWE12XrsEE1wvwkgG+Xat88gZzAxNYx2jXN32bVibmxOaMzcf8OtEDSVCHKDZ\n+ANl\r\n=Of2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.4_1615388405689_0.39148744715716766","host":"s3://npm-registry-packages"}},"0.1.7-canary.5":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.5","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.5","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"4c0cb7f6d36c2ddb07aa1584194235d617aef35d","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.5.tgz","fileCount":68,"integrity":"sha512-n8dwTgS2eKO6WpVZXmcA3lEE8TdSa4Hj5eUOb8fAVnGX4x5EVPuqq7gi/tqfDJFkFKE5qjKKUB4O9t0Pa0LKiA==","signatures":[{"sig":"MEYCIQC6rsX1NRtY/i3wmg8v6dvYA/Ny9Lqa1hhWuEWNp8WYXQIhAK5ZkKWExSWtOP4ezHW7r7Wkb06hNkA9G/1s1S1Z9yUc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":259688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSN/+CRA9TVsSAnZWagAALykP/3fbYiL/1Ec6KylUyEKv\nGF/KxsMGxlepKjSrewC7n+T1hfGlvRO3ZQXI7B2wUw0MYjM/D/6ssDHVFdD3\nqtWeA8mn/aWL6F6cSxLdSnH3wCpzbm8CQw1JBkyj7biC3tID7sv4emH/SKmz\nKDlYOeHSk33b3WpTO0AFgiOuyNArqNb0ZHk0HnpbCaW/7nd1cqtzlGByc98q\n0LiU8EXjIXcWbXbch2JugnWjMOjs/8NoPh7yTpl4d67xZKqLHpK2WoYrxFPR\n+lUnKvEzmzHWR0tKlRCTZe3HuPnyfIg519Y2WLau3tVdhA3jlIf9oKFpuixP\ni9w0utR0sRbs1QfP8917SaEsIZqQPxMQYMprMmFkHJwTW7vM91/bcM9rIKUj\n5UzmltBozMgJP4o93LCpiiMHWoYiHe375b1HbMNRDUXfjCUUCHk334ypc4UQ\nmE38FYOBUntwggNtd1CwsPuABGWGGkyEjQB2ACpbzk0Nyv2QjSaoPpsmCNuP\n2hD4areOdig32NcDDP00H3qI6o2KV8bz02XgHqha5gUN8hpCdYTu4pQywURk\nqA92URprLj2BIR/RKSNtre9iFuqbAO1Y6cTZh3lPYvLrZQDMDs6cyE2ET+SQ\nc/swJLTtftAmzBa+NGidKOHJdYvoYSWqslX/5d0e+4SV+xC2uDUHMUoftVov\nkhtp\r\n=RBMr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.5_1615388669959_0.444641776745786","host":"s3://npm-registry-packages"}},"0.1.7-canary.6":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.6","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.6","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"04e06af19a12d46ced503e5ba84a1fe95fff5e71","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.6.tgz","fileCount":69,"integrity":"sha512-hpgyIAHqemaMGdqDLjuon+x6B/ZhvSP1OvXvxxXGLga92hUkUKbk0ZROuVaBylW4//KRVhko7mAh2mZQ/metPA==","signatures":[{"sig":"MEUCIAo00qHpp+ItYyj7Z1tG2O+5YDdipJkAV1Zv9JWig6sqAiEAhMme0eahxAiqP4Q2tnZlWhG5wxn67qHVfYpjZu6QeGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":265906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSOK3CRA9TVsSAnZWagAACTsP+wWyAHjIjw5d3X8Hw5wY\n+t2lMA4oRROXMYskMSujk72OVfSK2/Mmgu67pUht7/IrQSZVsjcebHMpHiNX\nWhwabZqj6TF79hieYBbZbNlLeocXz0sDePRsnxSre+sCLVhzYUQbm+qLLK6q\n+ry8imYE3kdo3U5D4Al8pMS+i5VsoS/dkF19wHQPOfBqjiizn9rinC6UgWsN\nd/4RJ/GAEy/0gzx9rHeDnr5irbjDwSqxOa5bAO/ZGBhXXwivIEYLllKVg/z0\nCiD5E+Er9BCMx3aameHtUc0h8oJHHCFmlZnrg5wX4cRg8pc0Gv/RKZAbf9RF\ncPOzy9KV9eiT30SpngCALXatA3+7sK93X9n26OXs76bqWWDXih4+aA6ddsHi\n9XVNClH6XfBGbVwKjmEI6yKZoXX62tvIWlQS1RBlXxuN9UFTgqtCl/hNsR3A\n2W7EIsH3JiZurlqXtHU/NQ2fbm0JCg1MH/fY1Xhx0/+NIwWCKc52MizK+nio\n0SPUl5yD5SYtvhgZehINnrSHGfxn4XS9NdqlkXExAwTnHP5uSAt/WC8TNKvA\nu1gfnXxrX4mmo0cUkMvK5BhIn7yhJ9AOwkzv0imBr6jWm2/4i17wKlU/+80o\nUj35BpXa/ErO2SzXm5gtv7SkInVo91Mpl+j8aInVU8ZgEZrrIwmAnzq3gu83\nTveQ\r\n=Q23e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.6_1615389367283_0.15998760664425649","host":"s3://npm-registry-packages"}},"0.1.7-canary.7":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.7","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.7","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"74ce684f2bc59776a9ca47e89209db4fa613cc7d","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.7.tgz","fileCount":69,"integrity":"sha512-VlR2nNtph6kDQ3PWh0FKS99iogDXMEMO2jC1mBYNp7Hc7beAwxwfb3UgGRg1zfiHW4VO/IQEqxrxC3rbaoWRMA==","signatures":[{"sig":"MEUCIQD0FMidfnEJsz+Dp/AAUllgDnEnUUcNiZ2ib6J1x1EhjwIgeUywK6x+CJi3ZM051YMO4a6z+SEKaai2fsED8MScT+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":265897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSOe3CRA9TVsSAnZWagAA5BkP/2zDItLicv3OjF8q/JAO\n4yz4Wl2ytJjMfC+20I21iO76R8tWA0V0VbOqmy/k4VBeh2WCoKTt6wDq5Q/l\nSWQ+yHqBguUzzVijhhr5y0Yg4gP0yOUZpBa8fZiLI46gpUSyG7piOGCy9jH8\ntiOy13eipkD3bIUXzMpE4A0aX7MqsYjVKSHzb+umscaxmNo/VPnr/HlUM28M\nZMZ+c8uwAAiwXW1j5mErWy2RGViyFE9RAbmuJFDjmTwonywm/69gWRrKrBoZ\nmDpqFU/KrlQqC5WbYtqpRhjlaAmGPGerMLFZxJt7AWJbsLUsZup3zuLDZHSW\n98eFnih51Gwzhoyn/Yqz9upN4xt3zej1jyhoX2J+JZksHwxwiNKwyi1dUZrk\nJve1oeDrV00r2NQwBjQj5/bw9TPWFMxTQhcAZxg2Mpr5ONMU+vJLmssF5q55\npbRT6TIO3BPwAa28MlMAlapHqXD9I7R0XH2fyMJ2uzHeKlRKoQ4mYMUdrfXn\nOnnL5lBuYZturuljJlryROkXgBYw49IF9bCqQ0i12wbcY0KqUZg5tT5Pvq6a\nhzP2VpVmsfB3VSWXdlHDGcRMN383zv0ffH1UZ4jPyb/wlRXEvEJTEhjs4ASS\n+XEWumbPBjK+tKULfeu5ck1GPvodGg3mAi4N3sIW1glwTqGKrobmLNv+4Kpx\n6yPZ\r\n=i64J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.7_1615390646467_0.978184489833432","host":"s3://npm-registry-packages"}},"0.1.7-canary.8":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.8","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.8","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"491c9887480d6d9e9e4b5ff44f1e2ce06903acd4","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.8.tgz","fileCount":72,"integrity":"sha512-kMRFi7Vhc3fhGfhltVrrU2lCbeenP3iv0qxKFyWfP6oR1Ua/K3huIPLdecmu00nYyyTAXOAcFSjQ9A0XEP5y9g==","signatures":[{"sig":"MEUCIHWqdti1wsQRzai7aGjXtynB+CFoxO7WpqIVHm58/s2FAiEA0bW5yqnSRrPFWmmraKe+n2DOilB7unvu41f/XQX/tj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":294114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPYkCRA9TVsSAnZWagAAWK0P/3oV3r3rHRjqKC3XuXRb\nYaAnmjEeJUrBh+CSGG6/NWCiUBkfCWWhGiHn6peCf2wvJkFdIC5EMb8uGFXg\nInoK6/zllL5/hVgwyrQwPWomhh+gZ6kvjXdtD2fYXkFVC2/TT/dLz80e9p8e\nb1T31IGx1QBzE+Y1M8vE5Sd/ypG1pVy1XGcb20yFDQZj025Wlv8z/QZDDqx5\n4UfvEtkzndpchgs9vos4Fhpq35KDLhmA1YYDdcJrhW8MXqzY6j7m+K6YTAT3\nZP+s7Jc03EtsYdzXuaiOardFd6/RFizPHJbVCR2VaUo42S/0udPSU3/GcRcn\nZXC0bTaCpDCvh3ueSaylsjKhySzQM0wnEiM2XgIsxjetGgnWeYMBhtHb38CB\nt/W1zhIaMaou3f46RF+gTFG9A7DU45dZ7WVDVFAwByxnGD+j9Pt/+Da0yWCk\n8DJPLGE2YlcU629IGGQ2FWN9Uw8usPCFagpvPJZaTYTXW1sqcv/8ZyG9KQV9\n6cjH8NyY8hZTHmZq0QtI3DgyATAfNi2jzAYfCYYxq0Epb/ZnUe0ohzHMgwgC\nZ5lMtsJLTG1IGmnbZbyYGMypzt3+E0fne2WFFzrg3y+Rtanx+7bYFKO0cDuI\nyf+Ad7X6O5ahkhKHTVwP1FQSSgr8NThXhSl+omGv86vazZuyVsW7y4PeGmiw\nmsw8\r\n=p6v4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.8_1615394339694_0.6480512625879393","host":"s3://npm-registry-packages"}},"0.1.7-canary.9":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.9","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.9","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"1f50396b22f3f006ee41bd6eea245115a064eb54","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.9.tgz","fileCount":72,"integrity":"sha512-LzqGeiNlrKIXXF15XFjt1UrmzP7Bkr8v8YdTzIAqJMr9D5HqKyGfOJ8rjNB1/iqZgj9xLtBPqA+H6dpkDkVNEg==","signatures":[{"sig":"MEUCIQDR3ixsiEF7y6/6mAGXvhX5CxAxTKDbjhm2/0vbL2heSAIgC2Lf0NhfP3h9fBi5naT9/L7HivXAFqogJhudQmPiKJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":294739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSP22CRA9TVsSAnZWagAAg3cP+gNisqkg6SPjD8FaodZe\nEV2lOdASiY5kJadmEqVFMV0CGw3nPMb7F+oz4WxF6i+tVqR5WrGAvIYWMD+H\n2zyUWllcv5hzYlcgVWXXDEdSz5L3IpVbFf+ctjgVKwdBaYcBUXOEC11h6OdA\nsLjzdNiNc7IiuDPKx4pynktvtFzcFX1Nal0BC9wdjBUbqKdPpyhGOtDGK1WW\ngr9OWCdOuf7Lq7lqymR8JemJ72yJAI1sfuqEvnv3o0gJBEdAv7LS6VtBcoB6\nHtDNjBiK1wR6HTZWRNd6loRFpP7F2eLXP2aNtGX4+wKzh+rmN/yY16d7gd1v\nTLlr5EElv4pYPHwXxf+a0rFc9Qv4P5CVefrA6L/Dfu9+EfttL8GQJuJxJplX\n6/Cz6MPDXKpYqg5NVYcriduQkTnMS0KDtLxlHCkBBOXXoM/yJhAUx5PXZ1O+\nNWw/lWHLDRZezaiySyorRzLuKordWIDlQF/tq2xQLbq5x2kbGhjrknX7a1Wc\nzsQ/l5Mr4Ea0AEnP22pAdDCXL/+dKmUl+vCfD8Ue2o3AiMXjrg/Jl4QQTEFk\nk7n3CA+qpVSimub4YV54cpfSPr7gTg2KLwXSqLI7qNeJ0FRQwQz97uVAzVHB\n8nx5441jrfRjE6O6KYcC9yJmaFHSCXmcdHurgj2n6ZHZ9GFh3CIu8Zseyh2V\n5aNL\r\n=ue9c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} playing={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading serif xs\">Heading xs</h1>\n        <h1 className=\"heading serif s\">Heading s</h1>\n        <h1 className=\"heading serif m\">Heading m</h1>\n        <h1 className=\"heading serif l\">Heading l</h1>\n        <h1 className=\"heading serif xl\">Heading xl</h1>\n        <h1 className=\"heading serif xxl\">Heading xxl</h1>\n\n        <h1 className=\"heading sans xs\">Heading xs</h1>\n        <h1 className=\"heading sans s\">Heading s</h1>\n        <h1 className=\"heading sans m\">Heading m</h1>\n        <h1 className=\"heading sans l\">Heading l</h1>\n        <h1 className=\"heading sans xl\">Heading xl</h1>\n        <h1 className=\"heading sans xxl\">Heading xxl</h1>\n\n        <p className=\"body-text serif xs\">body-text serif xs</p>\n        <p className=\"body-text serif s\">body-text serif s</p>\n        <p className=\"body-text serif m\">Reserved</p>\n        <p className=\"body-text serif l\">Reserved</p>\n        <p className=\"body-text serif xl\">Reserved</p>\n        <p className=\"body-text serif xxl\">Reserved</p>\n\n        <p className=\"body-text serif xs bold\">\n            body-text serif xs bold\n        </p>\n        <p className=\"body-text serif s bold\">\n            body-text serif s bold\n        </p>\n        <p className=\"body-text serif m bold\">Reserved</p>\n        <p className=\"body-text serif l bold\">Reserved</p>\n        <p className=\"body-text serif xl bold\">Reserved</p>\n        <p className=\"body-text serif xxl bold\">Reserved</p>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans xs bold\">\n            body-text sans xs bold\n        </p>\n        <p className=\"body-text sans s bold\">\n            body-text sans s bold\n        </p>\n        <p className=\"body-text sans m bold\">\n            body-text sans m bold\n        </p>\n        <p className=\"body-text sans l bold\">Reserved</p>\n        <p className=\"body-text sans xl bold\">Reserved</p>\n        <p className=\"body-text sans xxl bold\">Reserved</p>\n\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.9_1615396277512_0.46146430778519343","host":"s3://npm-registry-packages"}},"0.1.7-canary.10":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.10","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.10","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"bdbfd04d0279ac4497ce182b09ca4cb1409dfc67","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.10.tgz","fileCount":75,"integrity":"sha512-b1DXTKAlXJQMYdq0ZCRMBL5bD8cuO/n3kN8M6SdSzOwCQKEEV2dLCudOVlFEetQ9cP9pxrMcWAeX1IdlYM1uNg==","signatures":[{"sig":"MEQCIF/QkBIzA/SvLEa0KZRQcPKAu8XEFMi3nGX76uuRZt0ZAiB19tNHsFQJBpU8aCEVbTQHkpwJFfAHdhSCN4QV/kMizA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS1NUCRA9TVsSAnZWagAAMQIQAIfpyN0u4fXu/Bdf/oOJ\n0CbwJ6Ic5Grq26OvcUhduViiYKHdvTYpoM1T5LUTlL/wx/VaDkSbi89BrckJ\nYmPjfCN+7Rkdpsx0B26fLrT5xrgEw8XlhSFA84DDPcJDmyNwHNV9iAI5JM7/\n97QAs+re7dNVztfkaPWsJYEeJ2KYnTmTu0Hdd1dlyBcg3a5qEXwSuVp51J0b\nprwlOLJKfn2PZ30oenGME2UQV+PkSPsZwgr0wasMs+SFsGKo+npbsE7UNsI+\nyHCzwMY++gdAKJ746TCSZaooZJXjoLONVEy3m9IcEixP2SflI5JPDxeI3DCg\nrgl+TPlDl1IKAY6/1adE27gSZiGPSG5fzFuOET+gerhNU1N8PgDpLmzOAzHO\nAAnx3wbXAlU5lzQaAhdP0GCEmPDyIjv4bYCIUCC+XRZ/oj311AhpDB6UL8Yi\ncDDuSTF6eqw7vUCJa006RDjX2cSDR8akZ7N6JYEIPBCaOTstqKDTnyT1bQ/W\nrdBIAFAGanyOV5bEfNZxtx5BWHX3+HwnsUa+4lYKmsBXPLhrNU1gtQ291Hgb\nUs3luMuz6C+tbq2IC6N2jWvYZRUfcxNkUqBSYrLV7qLaq1v8VsqXkjd9oC0k\nwivrnsapqNuxVkh8bv7XPOt2usPadNTNjfizovHovu0X4QaGuYt5k2ZyS0jW\nZ0WI\r\n=oWRC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} isPlaying={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Horizontal card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/bnr-design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        <HorizontalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading sans xs\">Heading sans xs</h1>\n        <h1 className=\"heading sans s\">Heading sans s</h1>\n        <h1 className=\"heading sans m\">Heading sans m</h1>\n        <h1 className=\"heading sans l\">Heading sans l</h1>\n        <h1 className=\"heading sans xl\">Heading sans xl</h1>\n        <h1 className=\"heading sans xxl\">Heading sans xxl</h1>\n\n        <h1 className=\"heading sans bold xs\">Heading sans bold xs</h1>\n        <h1 className=\"heading sans bold s\">Heading sans bold s</h1>\n        <h1 className=\"heading sans bold m\">Heading sans bold m</h1>\n        <h1 className=\"heading sans bold l\">Heading sans bold l</h1>\n        <h1 className=\"heading sans bold xl\">Heading sans bold xl</h1>\n        <h1 className=\"heading sans bold xxl\">Heading sans bold xxl</h1>\n\n        <h1 className=\"heading sans slim xs\">Heading sans slim xs</h1>\n        <h1 className=\"heading sans slim s\">Heading sans slim s</h1>\n        <h1 className=\"heading sans slim m\">Heading sans slim m</h1>\n        <h1 className=\"heading sans slim l\">Heading sans slim l</h1>\n        <h1 className=\"heading sans slim xl\">Heading sans slim xl</h1>\n        <h1 className=\"heading sans slim xxl\">Heading sans slim xxl</h1>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans bold xs\">body-text sans bold xs</p>\n        <p className=\"body-text sans bold s\">body-text sans bold s</p>\n        <p className=\"body-text sans bold m\">body-text sans bold m</p>\n        <p className=\"body-text sans bold l\">Reserved</p>\n        <p className=\"body-text sans bold xl\">Reserved</p>\n        <p className=\"body-text sans bold xxl\">Reserved</p>\n\n        <p className=\"body-text sans slim xs\">body-text sans slim xs</p>\n        <p className=\"body-text sans slim s\">body-text sans slim s</p>\n        <p className=\"body-text sans slim m\">body-text sans slim m</p>\n        <p className=\"body-text sans slim l\">Reserved</p>\n        <p className=\"body-text sans slim xl\">Reserved</p>\n        <p className=\"body-text sans slim xxl\">Reserved</p>\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.10_1615549268244_0.35812756527121636","host":"s3://npm-registry-packages"}},"0.1.7-canary.11":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.11","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.11","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"5cf44b7f91db618ac582e9c72d6497698b43bbd2","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.11.tgz","fileCount":75,"integrity":"sha512-Wh4YiX9vXn4ajjSvwMzb3OXNhFePK/2fiMQIg+V7kKUN7AoylS+WDtScOoZLSX+Ffg8IwxnrKXohQvllgm6CLg==","signatures":[{"sig":"MEUCIQD9Ufj/AoGYAZlyZBEho5WQ/zrVn5jBmRKrvh5QLTW1zQIgd22RAUhWGXN1MZDiY/uLEkdyHVZ2q0zGwVNlYsz/ApE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS1v1CRA9TVsSAnZWagAAujkP+wW4Xyhap7NXCsArbOnS\nRPSW3QGVBxBDQm4r76TMZGfNntlsXvEosa1E41AKRmkuz74+rtD9nV113ZLg\npx6DzV5szvXl7kTrMa9isLGDebzGxwAv5VeR9Y9KpZlVABCH6o39IMsrd+d3\nLB3ahxVlrwSsQUN1Q+WyyoWA3ruhAvk1rg2AqFgV72wPdl/ThZMzWtp4Kl4Z\n1S0piGNlvztA7y9laC5nwf7Yjl+N3qkieZg25XUw1jkjLmZCaXNb/ae6C0Df\npdcxQ524R+xiE6nlssNnX1p8E/JI4+D7Rc7foa/7irkKSoqbJVKM52gxc1So\n5w/jV1/YMr0l8xpU6pKGBeE9NvW4+ixaZCMG2D9Ehxq6zDs9yaPCCaRXkvDI\nKoo4x9aNIV0A/QI2A/4b4r/RLIHugN8BC/JBWOKajkJz56bbEsVFv0KxsyvF\ngP7E60Sncpo4LsP3wo6pOVRPw6Y+JbFvq30HPEf4pF1OgSSS3Sr9qpCqEpia\nS46+g4AdUrQB0x16TrpTsxFdojdSb464h/ZKzeG98dBFufLdX+NM5FKn93rE\n6GCoVMYklaC83SXDh7cVUqRbUllVW7BQoO13wvZ+0ED6TLAJ4mygicWRKSAH\nH99uVieZTiKghd/cB2yXxSXsC9NRW7PHB0dFipzSr0ewHdILncfI1XavbDke\n1otS\r\n=Db9Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} isPlaying={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Horizontal card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/bnr-design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        <HorizontalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading sans xs\">Heading sans xs</h1>\n        <h1 className=\"heading sans s\">Heading sans s</h1>\n        <h1 className=\"heading sans m\">Heading sans m</h1>\n        <h1 className=\"heading sans l\">Heading sans l</h1>\n        <h1 className=\"heading sans xl\">Heading sans xl</h1>\n        <h1 className=\"heading sans xxl\">Heading sans xxl</h1>\n\n        <h1 className=\"heading sans bold xs\">Heading sans bold xs</h1>\n        <h1 className=\"heading sans bold s\">Heading sans bold s</h1>\n        <h1 className=\"heading sans bold m\">Heading sans bold m</h1>\n        <h1 className=\"heading sans bold l\">Heading sans bold l</h1>\n        <h1 className=\"heading sans bold xl\">Heading sans bold xl</h1>\n        <h1 className=\"heading sans bold xxl\">Heading sans bold xxl</h1>\n\n        <h1 className=\"heading sans slim xs\">Heading sans slim xs</h1>\n        <h1 className=\"heading sans slim s\">Heading sans slim s</h1>\n        <h1 className=\"heading sans slim m\">Heading sans slim m</h1>\n        <h1 className=\"heading sans slim l\">Heading sans slim l</h1>\n        <h1 className=\"heading sans slim xl\">Heading sans slim xl</h1>\n        <h1 className=\"heading sans slim xxl\">Heading sans slim xxl</h1>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans bold xs\">body-text sans bold xs</p>\n        <p className=\"body-text sans bold s\">body-text sans bold s</p>\n        <p className=\"body-text sans bold m\">body-text sans bold m</p>\n        <p className=\"body-text sans bold l\">Reserved</p>\n        <p className=\"body-text sans bold xl\">Reserved</p>\n        <p className=\"body-text sans bold xxl\">Reserved</p>\n\n        <p className=\"body-text sans slim xs\">body-text sans slim xs</p>\n        <p className=\"body-text sans slim s\">body-text sans slim s</p>\n        <p className=\"body-text sans slim m\">body-text sans slim m</p>\n        <p className=\"body-text sans slim l\">Reserved</p>\n        <p className=\"body-text sans slim xl\">Reserved</p>\n        <p className=\"body-text sans slim xxl\">Reserved</p>\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.11_1615551476874_0.2869494004845041","host":"s3://npm-registry-packages"}},"0.1.7-canary.12":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.12","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.12","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"023664cf04f20918d2970fb29d21c81422b2966b","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.12.tgz","fileCount":75,"integrity":"sha512-nYheEdHMV+18/wwvQMXbPVSWExs95mgU2Lgo73YyBVk//Z3zEiwNj/UZyg3lVlU8/Uj5pZbx2yWn6FWuYPltCw==","signatures":[{"sig":"MEUCIGNzwOdj+g0KCe7W55BTrk6q6fmf2lGlpqVuLZUkiKn2AiEAlpPxO2ZmSAG1eazsuZ9feJ+n1DuBxOA21oUI61mX3zE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS2LeCRA9TVsSAnZWagAAEn4QAI2qbO2CIrz4pz13bu+L\nDeUWDk7b4F0IBRcbcWf3SRjm8tjyDNXsKAjIKNUbhiW2uQ+T/vreKrbDapVl\nnBoEa5LT9eXvI4krRtwkU36Mp0l7H46UdsqAU/AL09SDowh6m49hMxs9nePZ\nOHVD2DEUjgn5ePmq4jHTqCWvVVYMOeTMH4In7iT208IxHMgEVSinT+BMNGoB\nY7bh+T/0r85lNq95VFnmVf4iBqxd4pKVWwjFf04/g8jqiQY+hf95c0tB594K\nt79i/gvJ3NNlgO52IRzhZWUmnYgACw65pynto/phtAesXWhYn7u+cl++4pH5\n30F8j3k1oSD4bCG4zYVSs+fuhIg3GXsyAMPLjOOrWk8n9XyHb53Pfa+4Qlpn\nI670vldL56cEsEs+5eDKTOpSX4KMFQCRNaxXNtBPcCMkb246qrcU+cn/fNkL\ncNlAWaYMZ43EwAa/Mcq1fwV/5+zlF0NBz1pgQFT4xNQRlUZmI+g1TpwTIH1Z\nqd2FMOARv3Xmce4xa6XkM7wZXUQKSDtbOW6taX72ovcuKMlfZZsy0T8mOD2O\nJ65zkF2M5SiH1n1r+X/1YqOyQ3dJ1emRE/K10bOGQfilvmsyklLT7tXyF/O8\nCEqbLHySLspkQ5/13FLNltFZ33OzjSljZfxlVsMwh/M9ihGbuQjMy3cMwaz1\noh4J\r\n=4E9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} isPlaying={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Horizontal card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/bnr-design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        <HorizontalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading sans xs\">Heading sans xs</h1>\n        <h1 className=\"heading sans s\">Heading sans s</h1>\n        <h1 className=\"heading sans m\">Heading sans m</h1>\n        <h1 className=\"heading sans l\">Heading sans l</h1>\n        <h1 className=\"heading sans xl\">Heading sans xl</h1>\n        <h1 className=\"heading sans xxl\">Heading sans xxl</h1>\n\n        <h1 className=\"heading sans bold xs\">Heading sans bold xs</h1>\n        <h1 className=\"heading sans bold s\">Heading sans bold s</h1>\n        <h1 className=\"heading sans bold m\">Heading sans bold m</h1>\n        <h1 className=\"heading sans bold l\">Heading sans bold l</h1>\n        <h1 className=\"heading sans bold xl\">Heading sans bold xl</h1>\n        <h1 className=\"heading sans bold xxl\">Heading sans bold xxl</h1>\n\n        <h1 className=\"heading sans slim xs\">Heading sans slim xs</h1>\n        <h1 className=\"heading sans slim s\">Heading sans slim s</h1>\n        <h1 className=\"heading sans slim m\">Heading sans slim m</h1>\n        <h1 className=\"heading sans slim l\">Heading sans slim l</h1>\n        <h1 className=\"heading sans slim xl\">Heading sans slim xl</h1>\n        <h1 className=\"heading sans slim xxl\">Heading sans slim xxl</h1>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans bold xs\">body-text sans bold xs</p>\n        <p className=\"body-text sans bold s\">body-text sans bold s</p>\n        <p className=\"body-text sans bold m\">body-text sans bold m</p>\n        <p className=\"body-text sans bold l\">Reserved</p>\n        <p className=\"body-text sans bold xl\">Reserved</p>\n        <p className=\"body-text sans bold xxl\">Reserved</p>\n\n        <p className=\"body-text sans slim xs\">body-text sans slim xs</p>\n        <p className=\"body-text sans slim s\">body-text sans slim s</p>\n        <p className=\"body-text sans slim m\">body-text sans slim m</p>\n        <p className=\"body-text sans slim l\">Reserved</p>\n        <p className=\"body-text sans slim xl\">Reserved</p>\n        <p className=\"body-text sans slim xxl\">Reserved</p>\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.12_1615553245949_0.8153858749186573","host":"s3://npm-registry-packages"}},"0.1.7-canary.13":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.13","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.13","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"a583af05c40514bb69a6ab1ccccfffc0a453776d","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.13.tgz","fileCount":75,"integrity":"sha512-mZuw/ebaZ3TENI5ATGY9Iv63NC636A+QRTWMLk0e43o0vOzDre7O/37faPRlxqYpmT87XKcYJTQdeUlfBgi2tA==","signatures":[{"sig":"MEUCIHumCuryN3SA4hHWUU7VAdZFv6n5uPukOUXCOcdVIlM0AiEA+8s+XfmDRKM56Nfmey7i6/zGs0lUVOTETsvDLE31STw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS2b+CRA9TVsSAnZWagAAVV4P/iSUkLK265xpatl2+glx\n0i5RIIHHTz8KFCd9oFtqZ1aAo9I0ktXY7ISAkkwZVqdWX4jLJMGqMnQWLzOc\nQrAb4Q54dsShHkKTdYzEDzzCYDFpoCJH2b+t7gM+v6+rdUufq+KUPDpb5C93\nCknw00FvcYDW6ygNmJxnqf/Pq4dpN4DKFc8lbqSSA2EFmJz4RPewNqyfuGD7\nbHblXurxetCrDEoJg+Y4uD9YO2hpwEkvyYTTWrGz6tbGoDUBYF/16exR+jxj\ne6JRMgidUKYU5hXDX3aHlc9qd8FZCxMMqjg0GpzMWeYejUnI8RT0tT56gPxx\nzOY+tdcv1bCW0xq9TWmapnkNuNtkqaHW25j1daSteCgMohK0QlMqj8daf+Qi\no3EidKblsmSFCr33zVL3582icWo7aDfjJZICYXQO5WXZeM4CN3AzFjm9Q3zO\nzyAQUHEC6pt0Ho3iQcMdJhm8LUUBz8fEZQ2qyDx9cK3Ztn8hpTTjvYKjlHhF\n1RHV1ptTrX+yzlcYiLqeuGZ1MYs1mBhuzn9vXfESf8s89A7q4dmlPp8IDamG\no1UVzUF4WhDut+A8t3YVeeyfUghl2dC+xufeE5fN/83EA9QNlCvP0amOeHNT\npiTeQe1oumxdjjTzpVuBQgjNrSqrRxIIefW/V83/I+hQcHUe4GiVPcq2d4vI\nmlVS\r\n=gCrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} isPlaying={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Horizontal card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/bnr-design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        <HorizontalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading sans xs\">Heading sans xs</h1>\n        <h1 className=\"heading sans s\">Heading sans s</h1>\n        <h1 className=\"heading sans m\">Heading sans m</h1>\n        <h1 className=\"heading sans l\">Heading sans l</h1>\n        <h1 className=\"heading sans xl\">Heading sans xl</h1>\n        <h1 className=\"heading sans xxl\">Heading sans xxl</h1>\n\n        <h1 className=\"heading sans bold xs\">Heading sans bold xs</h1>\n        <h1 className=\"heading sans bold s\">Heading sans bold s</h1>\n        <h1 className=\"heading sans bold m\">Heading sans bold m</h1>\n        <h1 className=\"heading sans bold l\">Heading sans bold l</h1>\n        <h1 className=\"heading sans bold xl\">Heading sans bold xl</h1>\n        <h1 className=\"heading sans bold xxl\">Heading sans bold xxl</h1>\n\n        <h1 className=\"heading sans slim xs\">Heading sans slim xs</h1>\n        <h1 className=\"heading sans slim s\">Heading sans slim s</h1>\n        <h1 className=\"heading sans slim m\">Heading sans slim m</h1>\n        <h1 className=\"heading sans slim l\">Heading sans slim l</h1>\n        <h1 className=\"heading sans slim xl\">Heading sans slim xl</h1>\n        <h1 className=\"heading sans slim xxl\">Heading sans slim xxl</h1>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans bold xs\">body-text sans bold xs</p>\n        <p className=\"body-text sans bold s\">body-text sans bold s</p>\n        <p className=\"body-text sans bold m\">body-text sans bold m</p>\n        <p className=\"body-text sans bold l\">Reserved</p>\n        <p className=\"body-text sans bold xl\">Reserved</p>\n        <p className=\"body-text sans bold xxl\">Reserved</p>\n\n        <p className=\"body-text sans slim xs\">body-text sans slim xs</p>\n        <p className=\"body-text sans slim s\">body-text sans slim s</p>\n        <p className=\"body-text sans slim m\">body-text sans slim m</p>\n        <p className=\"body-text sans slim l\">Reserved</p>\n        <p className=\"body-text sans slim xl\">Reserved</p>\n        <p className=\"body-text sans slim xxl\">Reserved</p>\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.13_1615554301364_0.1398647380609248","host":"s3://npm-registry-packages"}},"0.1.7-canary.14":{"name":"@fdmg/bnr-design-system","version":"0.1.7-canary.14","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7-canary.14","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"f6113814e318d592c16cf44f688f03c32d6cd42d","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7-canary.14.tgz","fileCount":75,"integrity":"sha512-8HXXyntrn6YujUW14CzdQAUHLEyoiHwfmUbiPyYI4/xGq1DpY2OaG8jP5NMJE2+MXHD1JlCgGaI602FR0G+rLA==","signatures":[{"sig":"MEQCIBX93vyaxDzGLMHHriGnN2gzmxp/aegcwenbB6x1YmD7AiA0XWPRLfTfJflPAW1eoriUJAdWyL6q/imBZXGlvfRrZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS3eDCRA9TVsSAnZWagAA09YP/iTwZUBfy767q7pe+uIb\nt8XCXg1501Cd1sHSyiL7EhXVtl+33OYoUoqWZPaB1TjoiQXW+EZyVFJTEKiT\nE8aPfTZ9g27V8NmjGldWcOH9WknZEnl37Zup+4PHqSNN9FahvVhWAcHy9AAd\nWxjdBqf24R3Xz7BFuRBuacX2qwJFDNYAEZ+8iugTGU0vfBJCeXnRkDhcIP1X\nBcd4xQ3aiuvyruktAjSMzIC7wYRS5vOMsXdWCkQfz7yTn15Qoc9XtQrOI3bm\nNbHF/KvLDLFarPCzz1k+NDrpw1GZc85PBktqWWpOWm+akPfUXVsM12S6A5wd\nd1DFwaTTv6SOJq1WOW0Si2bE/mfrlGdZC8CWOfAyzJUXx2AcEB6deIyX4la4\nXyesfrFqfT/Rg4Xig2PMFT9hwPt07mGHCl8nI0/AGsEbxGorTq4I8QCrIjoY\n33iLiRcgaR/EyKuZd+zsT0EtOXWZR2kBnCWTIPgN7O8cNWkTk7wq33P8hLKU\nO6QuewjjQZx/39jCGgS4BeOeMtnwZpbWya7czoOtSdhImbNCHcHkAp3JBo07\n1Suga3Wss4XyDkVK1H6MeiIYJeKQRie4FFNeGRDQ2aq+K3WkPt3lci6DaDox\nvAdXzlC68jBiaUY0ZUTLI8nLl/fOQZTkd7VqNTF3w2nE7+eDrsf+QzpP0+o3\nJeAu\r\n=DaO2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} isPlaying={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Horizontal card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/bnr-design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        <HorizontalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading sans xs\">Heading sans xs</h1>\n        <h1 className=\"heading sans s\">Heading sans s</h1>\n        <h1 className=\"heading sans m\">Heading sans m</h1>\n        <h1 className=\"heading sans l\">Heading sans l</h1>\n        <h1 className=\"heading sans xl\">Heading sans xl</h1>\n        <h1 className=\"heading sans xxl\">Heading sans xxl</h1>\n\n        <h1 className=\"heading sans bold xs\">Heading sans bold xs</h1>\n        <h1 className=\"heading sans bold s\">Heading sans bold s</h1>\n        <h1 className=\"heading sans bold m\">Heading sans bold m</h1>\n        <h1 className=\"heading sans bold l\">Heading sans bold l</h1>\n        <h1 className=\"heading sans bold xl\">Heading sans bold xl</h1>\n        <h1 className=\"heading sans bold xxl\">Heading sans bold xxl</h1>\n\n        <h1 className=\"heading sans slim xs\">Heading sans slim xs</h1>\n        <h1 className=\"heading sans slim s\">Heading sans slim s</h1>\n        <h1 className=\"heading sans slim m\">Heading sans slim m</h1>\n        <h1 className=\"heading sans slim l\">Heading sans slim l</h1>\n        <h1 className=\"heading sans slim xl\">Heading sans slim xl</h1>\n        <h1 className=\"heading sans slim xxl\">Heading sans slim xxl</h1>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans bold xs\">body-text sans bold xs</p>\n        <p className=\"body-text sans bold s\">body-text sans bold s</p>\n        <p className=\"body-text sans bold m\">body-text sans bold m</p>\n        <p className=\"body-text sans bold l\">Reserved</p>\n        <p className=\"body-text sans bold xl\">Reserved</p>\n        <p className=\"body-text sans bold xxl\">Reserved</p>\n\n        <p className=\"body-text sans slim xs\">body-text sans slim xs</p>\n        <p className=\"body-text sans slim s\">body-text sans slim s</p>\n        <p className=\"body-text sans slim m\">body-text sans slim m</p>\n        <p className=\"body-text sans slim l\">Reserved</p>\n        <p className=\"body-text sans slim xl\">Reserved</p>\n        <p className=\"body-text sans slim xxl\">Reserved</p>\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","@fdmg/design-system":"^0.4.40","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7-canary.14_1615558530947_0.26725358925664566","host":"s3://npm-registry-packages"}},"0.1.7":{"name":"@fdmg/bnr-design-system","version":"0.1.7","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.7","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"df6681ff27d3a66d39eeac18a9c2035576bbaf39","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.7.tgz","fileCount":75,"integrity":"sha512-oqo6m5ZpRSJWhuMDSDZMB4d3oDlgquHwaFVYBS/UEjM5eJvkknT8Ac41H9Kw7OKwACHbl2+D6M+SKk9liB8aUA==","signatures":[{"sig":"MEYCIQDr51guYl4WGc48GglWMrA60H1+PNX79GxnP53aHDKjGQIhAMqzmFuZzH4GbrT1LCg4/v5sMdP+HEjiHwahKx9q29gG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS4HYCRA9TVsSAnZWagAAMIoP+wY7WTfB92dbulINEGvD\nVNOA33Rvur2f7Ijaz2bZ4ZRXWCPCSh0WR4Havp80V/jzP60UsnKMiTX4SrHP\nsOuU5CBz3Ia6Z6YOfdqAwTPIVqw/dhOaNbf2Nlc3xpKzu6mAzwyhEDc+Tx/o\nOGj2fz8GzCirgkACNG8ab+PsEcTP1P5de7onhSKGjhyqrHQAPizAxYRdBQJE\n/A8ZvGCxW+Ro9aQP3zS/fVtqCIO2X69FiUHxJN0DkJThnM3bQUia66KO9Tx4\nZqxzhReZ2E/7xfetY+J/lqo0r4hLgZbaQT4/JQdykjnNsf9dCueVooCiWUtY\n2eEerH1jreA+PQU+ER+pszU6Z0iI/5ZiFn5DRJOPdzKGk60Bu0gJH+GXy8GW\nQGu6YYMTFaOP3t9wexq45NS7o2BQDmmZ04SBTruiUPVNjfB9s6UI36neBFCA\npiBl4UEe6kRr9oWvq4Whuf7qsi0l7tDmcJagKjFhfM1CF3JEmfnr+titcOQ1\nzl5S2p0ZsDXMGQa2EAucnIPhBaDiE8U2+5HqpupK32/Fk6JLXUqUZAcmJpsi\nPsEudBjjfNJ6E9J3oti9QknwXaHPOThVXlmKDOSZfP8TbyZHB3m3q/HTN9fp\nU/ZWV2zpOwZLI5ll6hcXyDTwMg13LJXs22Ydo3v0RbGD2SrS5/6gMbRQyKks\ntHXv\r\n=qJZb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.7_1615561175691_0.6424656673348532","host":"s3://npm-registry-packages"}},"0.1.8-canary.1":{"name":"@fdmg/bnr-design-system","version":"0.1.8-canary.1","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.8-canary.1","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"6f11882694f2ec90938b32add932686b4621676d","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.8-canary.1.tgz","fileCount":75,"integrity":"sha512-XfZy7EmV13bQzcoLq1JoIZKz4koh/1UlVp2Jbjrcj0dYPDJYafdOLkq/2hOK7IyWvi297/haVMAkIXnJv/MWwA==","signatures":[{"sig":"MEQCIDLGic7+qhy4CjfAwWr4zj2SWG/fBEAkyuIxeiGJAxpMAiBBzMug/MOjDYvP7L/okFNhz4Mi2uryjIbRVf51/OHlOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS4ILCRA9TVsSAnZWagAAXlwP+gLUGgXLuAO0QFx0tveo\nD+8FtIYOCDsGcQ3y3D8dHTEHRJfM6oYW19O96HhyJCYvBBK3qMxF9toAjlJl\ntpXy/lFZSmVBKrajNYQY5CGS/q7DLLo7aU5Fg0bQJ++UAYwGPXGtLsDmAdCx\nQnHEf/hOCfkjRNLuIxXUVKQ5TwGtkA+cx501A+16dNNu7ift1L57JVGv/6MW\n+tXkLC4HkRBmYOK0V27B+15L37fQP1UGEi8pp5uS2eJJlLBlFXuL/oyVe+2m\nvhz6lu2o/48w+AvFn52oAGPcCkUOnh3JziPE/pgsB06ot915b4dimFssF2xe\nJydJHjZXBUUoSZzdoAs+ReOf4d84JK7NSDgmmfcXpqx/OrLELozWwvIvnx33\nnJeWE1kT/GPdjPt1g1QG54j1u8e9bV1sU9R8+XCmiW/6wF4FVO4KX0A1TNJC\nCBOLAvqtC0DDqvAVl+UQH2Cl4zCN8/3KNgna4TkC3Fq+h/jMgxh6oKsU+QyO\nGhE2gqs71onufjHRR9Zo2fuwggB5SnOLFzibAi2Slo07IfsIKY3Q2XRH0KeR\n3EZxNsDfgvqb0KtWtDvFmmKlCqgvYGmTvtk0FPBW10mq9+DzxzYwJJI7a7fP\nnlKvqNTuBybnyBYo03zBnJxpv0cv49tBmG8eSTLiAJYK3zXKlqEZaK8F4aZE\nZQDY\r\n=+khY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} isPlaying={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Horizontal card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/bnr-design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        <HorizontalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading sans xs\">Heading sans xs</h1>\n        <h1 className=\"heading sans s\">Heading sans s</h1>\n        <h1 className=\"heading sans m\">Heading sans m</h1>\n        <h1 className=\"heading sans l\">Heading sans l</h1>\n        <h1 className=\"heading sans xl\">Heading sans xl</h1>\n        <h1 className=\"heading sans xxl\">Heading sans xxl</h1>\n\n        <h1 className=\"heading sans bold xs\">Heading sans bold xs</h1>\n        <h1 className=\"heading sans bold s\">Heading sans bold s</h1>\n        <h1 className=\"heading sans bold m\">Heading sans bold m</h1>\n        <h1 className=\"heading sans bold l\">Heading sans bold l</h1>\n        <h1 className=\"heading sans bold xl\">Heading sans bold xl</h1>\n        <h1 className=\"heading sans bold xxl\">Heading sans bold xxl</h1>\n\n        <h1 className=\"heading sans slim xs\">Heading sans slim xs</h1>\n        <h1 className=\"heading sans slim s\">Heading sans slim s</h1>\n        <h1 className=\"heading sans slim m\">Heading sans slim m</h1>\n        <h1 className=\"heading sans slim l\">Heading sans slim l</h1>\n        <h1 className=\"heading sans slim xl\">Heading sans slim xl</h1>\n        <h1 className=\"heading sans slim xxl\">Heading sans slim xxl</h1>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans bold xs\">body-text sans bold xs</p>\n        <p className=\"body-text sans bold s\">body-text sans bold s</p>\n        <p className=\"body-text sans bold m\">body-text sans bold m</p>\n        <p className=\"body-text sans bold l\">Reserved</p>\n        <p className=\"body-text sans bold xl\">Reserved</p>\n        <p className=\"body-text sans bold xxl\">Reserved</p>\n\n        <p className=\"body-text sans slim xs\">body-text sans slim xs</p>\n        <p className=\"body-text sans slim s\">body-text sans slim s</p>\n        <p className=\"body-text sans slim m\">body-text sans slim m</p>\n        <p className=\"body-text sans slim l\">Reserved</p>\n        <p className=\"body-text sans slim xl\">Reserved</p>\n        <p className=\"body-text sans slim xxl\">Reserved</p>\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.1","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.2","ts-node":"^9.1.1","typedoc":"^0.20.28","webpack":"^5.24.2","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.1","ts-loader":"^8.0.17","css-loader":"^5.1.0","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.1.5","@types/jest":"^26.0.20","@types/node":"^14.14.31","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.5.0","@types/react":"^17.0.2","autoprefixer":"^10.2.4","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.1.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.2","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","copy-webpack-plugin":"^7.0.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","resize-observer-polyfill":"^1.5.1","@testing-library/jest-dom":"^5.11.9","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^12.8.3","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.15.2","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.8-canary.1_1615561227318_0.41505453431301675","host":"s3://npm-registry-packages"}},"0.1.8":{"name":"@fdmg/bnr-design-system","version":"0.1.8","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.8","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"3344b4297e74613298aad3bfc0c5077aab873859","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.8.tgz","fileCount":75,"integrity":"sha512-4LHxhD+fO1ex3nfWquhz8Q6ZPkHcC4oONKAgpluQ1ol5S3+kXd7bu9QaWARPu6QtOambLnJtIUReHHpuKc4XwQ==","signatures":[{"sig":"MEUCIAPMuRMS7dTuPU35rAaU5Qda0Eqvo5O5cSgmxDJDwwHKAiEA4hnphI1kpfZodn3UxV9hLAWneHOFepF+Sq41qa7X/80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":297148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbr6gCRA9TVsSAnZWagAArqkP/2vnFK0MUEgHKPif4k4v\nz7uO39FwKdAuYa6EFsavAVmF1URg9YlMJsxWxU/sp/NioLZTvnMqDbC2KqV6\nuF8GhS2uS9jNK0E/eHQ6KN8KeNfja0VYPHzPMZ0dTVv39KamxKYvADLtIRna\nus1ZIERcAzINhv4D6yQ10THTYt77qmtOAIyPAiwjIk4pXjE5DzXb9pVrUnNx\nWoKxRtAsX28wdEtOJdxjGC/1aaNfo/UFHrlUC5VvOqTzNaCpElk+WMSmnQ6/\n521fTPJLpJgPAZqyPvZrIUjruJ/67LbCT7yCYMase0Gnp9N6vcxO/rzJCXv3\nCJTq8vxhdz6z6Kzoq6nzTEfwJGc6fNEfK82dzUYTHe444vbLKb33JJqMWIPd\nFH8TSXA+9xzz82LN7tR8+CxCrW2HctRniUSeLtE8PiK1mu1/R4zni+nXDupG\n+8/jNsVKvZwcPFRDNXHGyG0CHZYAeUgsij8R5BLp/wSGRiIcGvwsS7xtClsd\nZuQC/bxylYyJN/+JsyDn8ZR6804EGyEvte0WVDhDzj0ItvLDgMD2ZHjkZ8YL\nVDTdg8/+gIk4EeK7mccxeafk5HdYo4lZF2TV7ccxx70Oa0NMuyCaj51D8Xgw\neV3X0ZCWfYmB6wJTkB7+1eMa0YrS8DkvZCkMQFv6Vx0EMBa2SU4vx6Xxf7Wf\nQMBv\r\n=BUW/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.11","description":"BNR Design System","directories":{},"_nodeVersion":"14.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","next":"^10.0.8","sass":"^1.32.8","svgo":"^1.3.2","react":"^17.0.2","eslint":"^7.21.0","pretty":"^2.0.0","ts-jest":"^26.5.4","ts-node":"^9.1.1","typedoc":"^0.20.35","webpack":"^5.30.0","prettier":"^2.2.1","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.2","ts-loader":"^8.1.0","css-loader":"^5.1.3","micro-cors":"^0.1.1","raw-loader":"^4.0.2","typescript":"^4.2.3","@types/jest":"^26.0.20","@types/node":"^14.14.35","fetch-jsonp":"^1.1.3","sass-loader":"^11.0.1","svgo-loader":"^2.2.1","webpack-cli":"^4.6.0","@types/react":"^17.0.3","autoprefixer":"^10.2.5","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.2.0","react-markdown":"^5.0.3","@types/react-dom":"^17.0.3","jest-css-modules":"^2.1.0","postcss-normalize":"^9.0.0","postcss-preset-env":"^6.7.0","copy-webpack-plugin":"^8.1.0","eslint-plugin-react":"^7.22.0","@testing-library/react":"^11.2.5","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.3.9","webpack-bundle-analyzer":"^4.4.0","@testing-library/jest-dom":"^5.11.10","@typescript-eslint/parser":"^4.15.2","@testing-library/user-event":"^13.0.0","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.20.0","@typescript-eslint/typescript-estree":"^4.17.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.8_1617870495560_0.8813545775965734","host":"s3://npm-registry-packages"}},"0.1.9-canary.1":{"name":"@fdmg/bnr-design-system","version":"0.1.9-canary.1","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.9-canary.1","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"65d298d04b562c8bf3523ce48e291abbb920dc1f","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.9-canary.1.tgz","fileCount":75,"integrity":"sha512-cvsrY6eZofiLokvF9kcvdyLl5Nhupf6xoPJQU0aCURgfJvK/XKK7Uy6hKuoh/x92rfvMjKNRqBTbhGaPtk68xg==","signatures":[{"sig":"MEYCIQCVWyEMWVGHAs1UIg4KHwlGokqg7W5VcWRl5XExZZprtAIhAP7GLPIiyXKzPuSNHefhGc05xnYZX9nudT70QiTRMiFz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":298000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrf/YCRA9TVsSAnZWagAAxBwP/i55/8nvXX2HoSAkxodJ\nz61ZEmqDsz0g+oKNeaIrJtrQAONuT59ayuzBN3wHL+yrXBTxLwm2NJYNbJUF\nvX/IVewCz3by/STdAHZ/Ad/1pjeBj4dgoXnQWFW9vGrKqmXLPSPkIyv08EMf\n7/+n6wSFHXgf8zdfc1alBf5efVdzDCumPbLfJe3JwacYuOBX6wX816bQMMsz\ngWgPmUP9svDHpBCBcoFEX1taYm1VaMw3+OXxbgJbnOsafqJBHfHKGB3b2gW0\n4E3Lw58JnBV1uqRRdRctywkomF8hAjSCJoRkojmCp6nDHorY4H1sHfkaTcxI\nKrWma9oziRQBcxLGZJvwV/myjOopo/026nT4UZQVen7nUBSQIoI+8k66wsT6\nSmAhuGjP/htzve6MAu3uorggkI3z+Eg6IC89pyIpK0PjABDQNP4RwXilBQAp\nBGe5bNqZnr3psSySZ/5fFrK10DMG6cv8rnezxG5YlXYMBlV2hdCcxZhvm7Ss\njx7HKHsBZrjpa6dkGnugKiL/MFdMTJ5iApHxSJPOaqbLapQXzaVlPcH4T/yc\nBfLlC+9f5ZzcyWBX5nU2Il+nSID6ww91Ls0+3EuX8V8TIY1ZPgqMnq0cs/Tv\ncLLkEi0c3MT8FhwIIah+mqDupIVWhJ7gm9CkHykN+/WHw0nS8VUhCGkel/pL\nEA2n\r\n=wPVW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} isPlaying={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Horizontal card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/bnr-design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        <HorizontalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading sans xs\">Heading sans xs</h1>\n        <h1 className=\"heading sans s\">Heading sans s</h1>\n        <h1 className=\"heading sans m\">Heading sans m</h1>\n        <h1 className=\"heading sans l\">Heading sans l</h1>\n        <h1 className=\"heading sans xl\">Heading sans xl</h1>\n        <h1 className=\"heading sans xxl\">Heading sans xxl</h1>\n\n        <h1 className=\"heading sans bold xs\">Heading sans bold xs</h1>\n        <h1 className=\"heading sans bold s\">Heading sans bold s</h1>\n        <h1 className=\"heading sans bold m\">Heading sans bold m</h1>\n        <h1 className=\"heading sans bold l\">Heading sans bold l</h1>\n        <h1 className=\"heading sans bold xl\">Heading sans bold xl</h1>\n        <h1 className=\"heading sans bold xxl\">Heading sans bold xxl</h1>\n\n        <h1 className=\"heading sans slim xs\">Heading sans slim xs</h1>\n        <h1 className=\"heading sans slim s\">Heading sans slim s</h1>\n        <h1 className=\"heading sans slim m\">Heading sans slim m</h1>\n        <h1 className=\"heading sans slim l\">Heading sans slim l</h1>\n        <h1 className=\"heading sans slim xl\">Heading sans slim xl</h1>\n        <h1 className=\"heading sans slim xxl\">Heading sans slim xxl</h1>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans bold xs\">body-text sans bold xs</p>\n        <p className=\"body-text sans bold s\">body-text sans bold s</p>\n        <p className=\"body-text sans bold m\">body-text sans bold m</p>\n        <p className=\"body-text sans bold l\">Reserved</p>\n        <p className=\"body-text sans bold xl\">Reserved</p>\n        <p className=\"body-text sans bold xxl\">Reserved</p>\n\n        <p className=\"body-text sans slim xs\">body-text sans slim xs</p>\n        <p className=\"body-text sans slim s\">body-text sans slim s</p>\n        <p className=\"body-text sans slim m\">body-text sans slim m</p>\n        <p className=\"body-text sans slim l\">Reserved</p>\n        <p className=\"body-text sans slim xl\">Reserved</p>\n        <p className=\"body-text sans slim xxl\">Reserved</p>\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.13","description":"BNR Design System","directories":{},"_nodeVersion":"14.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^27.0.1","next":"^10.2.3","sass":"^1.34.0","svgo":"^2.3.0","react":"^17.0.2","eslint":"^7.27.0","pretty":"^2.0.0","ts-jest":"^27.0.0","ts-node":"^10.0.0","typedoc":"^0.20.36","webpack":"^5.37.1","prettier":"^2.3.0","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.2","ts-loader":"^9.2.2","css-loader":"^5.2.6","micro-cors":"^0.1.1","raw-loader":"^4.0.2","rehype-raw":"^5.1.0","typescript":"^4.2.4","@types/jest":"^26.0.23","@types/node":"^15.6.1","fetch-jsonp":"^1.1.3","sass-loader":"^11.1.1","svgo-loader":"^3.0.0","webpack-cli":"^4.7.0","@types/react":"^17.0.8","autoprefixer":"^10.2.5","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.3.0","react-markdown":"^6.0.2","rehype-sanitize":"^4.0.0","@types/react-dom":"^17.0.5","jest-css-modules":"^2.1.0","postcss-normalize":"^10.0.0","postcss-preset-env":"^6.7.0","copy-webpack-plugin":"^9.0.0","eslint-plugin-react":"^7.23.2","@testing-library/react":"^11.2.7","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.6.0","webpack-bundle-analyzer":"^4.4.2","@testing-library/jest-dom":"^5.12.0","@typescript-eslint/parser":"^4.25.0","@testing-library/user-event":"^13.1.9","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.25.0","@typescript-eslint/typescript-estree":"^4.25.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.9-canary.1_1622015960186_0.696423665631567","host":"s3://npm-registry-packages"}},"0.1.9-canary.2":{"name":"@fdmg/bnr-design-system","version":"0.1.9-canary.2","author":{"name":"Willem Liu"},"license":"ISC","_id":"@fdmg/bnr-design-system@0.1.9-canary.2","maintainers":[{"name":"willem_liu","email":"willem_liu@hotmail.com"},{"name":"sapulidi","email":"contact@alexandereerenberg.nl"}],"homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"dist":{"shasum":"fbbdd0d7f18548570facf57a3020f68339cb5bb8","tarball":"https://registry.npmjs.org/@fdmg/bnr-design-system/-/bnr-design-system-0.1.9-canary.2.tgz","fileCount":75,"integrity":"sha512-ynenPTjajcjNNENz94x8JJ6EuFRivxuGr4jBgA/RwI8ovzOoVOz8KrNxfmSm/KJkKb594GDSd94YpElHBY5QWw==","signatures":[{"sig":"MEQCIGgVxBt3KcNSj1ffc+zP2Niifx1GjG1RIGIaMzeUz4nNAiBVqa+qHkLDJabFP0qvhj4BZ2srBWCpPpNsIjUqfc1JIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":299134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrhmtCRA9TVsSAnZWagAAXnUP/1P4L+pJ51eBpi0jdZFa\n71a5VHyPIg4PnY4wkfpK9c3KvKXaWmqmWbw+Mrp37RmuYGi20VxMf1JgV99L\ncMuD6if1ZN9UHCK+2X5lLAjp8/7F6C2C53A1iK1X0Xns8NPUHivfJlXIYjXu\nvnyyGLd2YNnBEZA+vGfbzCIyfYk/l0uMt/ak6+NMPBNBq2a/GLdSXA4zc7aV\nICW0XqMa6ahgjYgUc8ISTpdiWix2GU4EGc1BgUKhQQ9QnKtHaTOYQOPRFMMD\nA88w+WAl1l+76zqv1L9or16WFH+PTh73oqBDBXiBIn3cAR4vmu1gFZsYfqR4\nlrbP5p6qAvDpM4H4PJ2I9v0eqlXxHjvUhSsgCviDeIvgJYSfT/UtVOGtFeWI\njX76lZiDOd5auyK20MYZecdYaH72uIfuiTAxy8SjrjnOBGuywDXwTeCFPbEV\nue3WnzQBfNEIx5fXB9OJnvOfBcomxtbbMC/XQeOT/5f19QNGXVv/wokn5F3E\nKvhxwUiCNBVKBe0t8GHC7bYVZtJkxBpNeAIkCphzwlgF0n17cLqlkc1dLoK+\nuJ0844SJ2j4Ucg1Cuoq/9xLYSoMtqtyxmCI8FRlZcGz2ieOJg+Jya3EyZAGs\nGf4wBVst8c3WVmwp879KUp/LvggkaqRGFhrnc7/xkIDFQVZ/tPpamvBObFek\nK6vN\r\n=++Hb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","types":"main.d.ts","readme":"<p align=\"center\">\n    <a href=\"https://bnr-design-system.vercel.app\" target=\"_BLANK\" rel=\"noopener noreferrer\">\n        <img width=\"160\" src=\"https://github.com/FDMediagroep/bnr-design-system/raw/main/public/assets/icons/logo.svg?sanitize=true\" alt=\"BNR Design System\">\n    </a>\n</p>\n\n<p align=\"center\">\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/build.yml/badge.svg\" alt=\"Build\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/publish.yml/badge.svg\" alt=\"Publish\"/>\n    </span>\n    <span>\n        <img src=\"https://github.com/FDMediagroep/bnr-design-system/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"Code Quality\"/>\n    </span>\n    <a href=\"https://coveralls.io/github/FDMediagroep/bnr-design-system?branch=main\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://coveralls.io/repos/github/FDMediagroep/bnr-design-system/badge.svg?branch=main\" alt=\"Test coverage\"/>\n    </a>\n    <a href=\"https://npmjs.com/package/@fdmg%2Fbnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/npm/v/@fdmg/bnr-design-system?color=blue\" alt=\"NPM version\"/>\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=@fdmg/bnr-design-system\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <img src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/bnr-design-system\" alt=\"Bundle-size minified+gzip\"/>\n    </a>\n</p>\n\n# BNR Design System\n\n[Design System](https://bnr-design-system.vercel.app) for components used by [BNR.nl](https://bnr.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://bnr-design-system.vercel.app) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/bnr-design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/bnr-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/bnr-design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/bnr-design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\nWIP\n\n### Controls\n\n<details>\n<summary>Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/default)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/bnr-design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <Button onClick={handleClick}>Click me!</Button>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button CTA (call-to-action)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/bnr-design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonCta onClick={handleClick}>Click me!</ButtonCta>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Button Follow</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/bnr-design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        <ButtonFollow selected={follow} onClick={handleClick}>Click me!</ButtonFollow>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Ghost Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/bnr-design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        <ButtonGhost onClick={handleClick}>Click me!</ButtonGhost>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Play Button</summary>\n\n[Demo](https://bnr-design-system.vercel.app/button/play)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/button/ButtonPlay.css\";\n```\n\n```\nimport { ButtonPlay } from \"@fdmg/bnr-design-system/components/button/ButtonPlay\";\n\nfunction Foo() {\n    const [playing, setPlaying] = useState(false);\n    function togglePlay() {\n        setPlaying((playState) => !playState);\n    }\n\n    return (\n        <ButtonPlay onClick={togglePlay} isPlaying={playing}/>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Checkbox</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/bnr-design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Date input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Email input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Mobile input (tel)</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Radio</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/bnr-design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        <>\n            <Radio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            />\n            <Radio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            />\n        </>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Select</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/bnr-design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        <Select\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        >\n            <option value=\"\">-- aanhef --</option>\n            <option value=\"dhr\">Dhr.</option>\n            <option value=\"mevr\">Mevr.</option>\n            <option value=\"mw\">Mw.</option>\n            <option value=\"drs\">Drs.</option>\n            <option value=\"Prof\">Prof.</option>\n        </Select>\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Switch</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/bnr-design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        <Switch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>TextArea</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/bnr-design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        <TextArea id=\"demoTextArea\" label=\"Biography\" required={true} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Text input</summary>\n\n[Demo](https://bnr-design-system.vercel.app/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/bnr-design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        <TextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" />\n    );\n}\n```\n\n</details>\n\n### Cards\n\n<details>\n<summary>Horizontal card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/bnr-design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        <HorizontalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n<details>\n<summary>Vertical card 1</summary>\n\n[Demo](https://bnr-design-system.vercel.app/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/bnr-design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/bnr-design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n    return (\n        <VerticalCard1 {...cardProps} />\n    );\n}\n```\n\n</details>\n\n### Misc.\n\n<details>\n<summary>Grid</summary>\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://bnr-design-system.vercel.app/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n</details>\n\n<details>\n<summary>Typography</summary>\n\n[Demo](https://bnr-design-system.vercel.app/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/bnr-design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        <h1 className=\"heading sans xs\">Heading sans xs</h1>\n        <h1 className=\"heading sans s\">Heading sans s</h1>\n        <h1 className=\"heading sans m\">Heading sans m</h1>\n        <h1 className=\"heading sans l\">Heading sans l</h1>\n        <h1 className=\"heading sans xl\">Heading sans xl</h1>\n        <h1 className=\"heading sans xxl\">Heading sans xxl</h1>\n\n        <h1 className=\"heading sans bold xs\">Heading sans bold xs</h1>\n        <h1 className=\"heading sans bold s\">Heading sans bold s</h1>\n        <h1 className=\"heading sans bold m\">Heading sans bold m</h1>\n        <h1 className=\"heading sans bold l\">Heading sans bold l</h1>\n        <h1 className=\"heading sans bold xl\">Heading sans bold xl</h1>\n        <h1 className=\"heading sans bold xxl\">Heading sans bold xxl</h1>\n\n        <h1 className=\"heading sans slim xs\">Heading sans slim xs</h1>\n        <h1 className=\"heading sans slim s\">Heading sans slim s</h1>\n        <h1 className=\"heading sans slim m\">Heading sans slim m</h1>\n        <h1 className=\"heading sans slim l\">Heading sans slim l</h1>\n        <h1 className=\"heading sans slim xl\">Heading sans slim xl</h1>\n        <h1 className=\"heading sans slim xxl\">Heading sans slim xxl</h1>\n\n        <p className=\"body-text sans xs\">body-text sans xs</p>\n        <p className=\"body-text sans s\">body-text sans s</p>\n        <p className=\"body-text sans m\">body-text sans m</p>\n        <p className=\"body-text sans l\">Reserved</p>\n        <p className=\"body-text sans xl\">Reserved</p>\n        <p className=\"body-text sans xxl\">Reserved</p>\n\n        <p className=\"body-text sans bold xs\">body-text sans bold xs</p>\n        <p className=\"body-text sans bold s\">body-text sans bold s</p>\n        <p className=\"body-text sans bold m\">body-text sans bold m</p>\n        <p className=\"body-text sans bold l\">Reserved</p>\n        <p className=\"body-text sans bold xl\">Reserved</p>\n        <p className=\"body-text sans bold xxl\">Reserved</p>\n\n        <p className=\"body-text sans slim xs\">body-text sans slim xs</p>\n        <p className=\"body-text sans slim s\">body-text sans slim s</p>\n        <p className=\"body-text sans slim m\">body-text sans slim m</p>\n        <p className=\"body-text sans slim l\">Reserved</p>\n        <p className=\"body-text sans slim xl\">Reserved</p>\n        <p className=\"body-text sans slim xxl\">Reserved</p>\n    );\n}\n```\n\n</details>\n","scripts":{"dev":"npx next dev","lint":"eslint \"src/**\"","test":"jest --passWithNoTests","build":"npx next build","start":"npx next build && npx next start","vc:rm":"vc rm bnr-design-system --safe --yes","typedoc":"npx typedoc","build:ci":"npm run build && npm run build:npm","copy:dts":"npx copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2","prettier":"prettier -c **/*.ts?","build:npm":"npm run webpack:prod && npm run copy:dts","build:sls":"npx cross-env SERVERLESS=true next build","docker:run":"docker run -d -p 3000:3000 --env-file .env --name bnr-design-system bnr-design-system","docker:tag":"docker tag ghcr.io/fdmediagroep/bnr-design-system:latest bnr-design-system:latest","docker:logs":"docker logs bnr-design-system","docker:pull":"docker pull ghcr.io/fdmediagroep/bnr-design-system:latest","docker:stop":"docker stop bnr-design-system && docker rm bnr-design-system && docker image prune -f","docker:build":"docker build -t bnr-design-system .","json-to-scss":"json-to-scss public/assets/design-tokens/* src/design-tokens","webpack:prod":"npx cross-env NODE_ENV=production webpack --mode=production","docker:restart":"docker restart bnr-design-system","test:updateSnapshots":"jest -u --passWithNoTests","webpack-bundle-analyzer:npm":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod","webpack-bundle-analyzer:next":"npx cross-env WEBPACK_BUNDLE_ANALYZER=true next build"},"_npmUser":{"name":"willem_liu","email":"willem_liu@hotmail.com"},"repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"_npmVersion":"6.14.13","description":"BNR Design System","directories":{},"_nodeVersion":"14.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^27.0.1","next":"^10.2.3","sass":"^1.34.0","svgo":"^2.3.0","react":"^17.0.2","eslint":"^7.27.0","pretty":"^2.0.0","ts-jest":"^27.0.0","ts-node":"^10.0.0","typedoc":"^0.20.36","webpack":"^5.37.1","prettier":"^2.3.0","copyfiles":"^2.4.1","cross-env":"^7.0.3","react-dom":"^17.0.2","ts-loader":"^9.2.2","css-loader":"^5.2.6","micro-cors":"^0.1.1","raw-loader":"^4.0.2","rehype-raw":"^5.1.0","typescript":"^4.2.4","@types/jest":"^26.0.23","@types/node":"^15.6.1","fetch-jsonp":"^1.1.3","sass-loader":"^11.1.1","svgo-loader":"^3.0.0","webpack-cli":"^4.7.0","@types/react":"^17.0.8","autoprefixer":"^10.2.5","json-to-scss":"^1.6.2","style-loader":"^2.0.0","@fdmg/css-grid":"^2.0.7","path-to-regexp":"^6.2.0","postcss-loader":"^5.3.0","react-markdown":"^6.0.2","rehype-sanitize":"^4.0.0","@types/react-dom":"^17.0.5","jest-css-modules":"^2.1.0","postcss-normalize":"^10.0.0","postcss-preset-env":"^6.7.0","copy-webpack-plugin":"^9.0.0","eslint-plugin-react":"^7.23.2","@testing-library/react":"^11.2.7","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.0","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^1.6.0","webpack-bundle-analyzer":"^4.4.2","@testing-library/jest-dom":"^5.12.0","@typescript-eslint/parser":"^4.25.0","@testing-library/user-event":"^13.1.9","react-element-to-jsx-string":"^14.3.2","@typescript-eslint/eslint-plugin":"^4.25.0","@typescript-eslint/typescript-estree":"^4.25.0"},"_npmOperationalInternal":{"tmp":"tmp/bnr-design-system_0.1.9-canary.2_1622022572868_0.8650094546329057","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-03-03T16:24:30.356Z","modified":"2025-12-04T09:14:10.856Z","0.1.1-canary.1":"2021-03-03T16:24:30.726Z","0.1.1":"2021-03-03T16:34:56.342Z","0.1.2-canary.1":"2021-03-04T08:44:21.667Z","0.1.2":"2021-03-04T09:04:16.253Z","0.1.3":"2021-03-04T18:45:52.124Z","0.1.4":"2021-03-04T19:01:28.987Z","0.1.5-canary.1":"2021-03-04T20:04:58.007Z","0.1.5-canary.2":"2021-03-04T20:20:26.887Z","0.1.5-canary.3":"2021-03-04T21:13:42.818Z","0.1.5-canary.4":"2021-03-04T21:33:47.591Z","0.1.5-canary.5":"2021-03-04T21:41:59.044Z","0.1.5-canary.6":"2021-03-04T21:52:01.457Z","0.1.5-canary.7":"2021-03-04T21:54:20.772Z","0.1.5-canary.8":"2021-03-04T21:59:51.425Z","0.1.5-canary.9":"2021-03-05T11:54:13.840Z","0.1.5-canary.10":"2021-03-05T12:07:57.247Z","0.1.5-canary.11":"2021-03-05T12:20:50.562Z","0.1.5-canary.12":"2021-03-05T12:25:00.619Z","0.1.5-canary.13":"2021-03-05T13:18:08.660Z","0.1.5-canary.14":"2021-03-05T13:41:47.462Z","0.1.5-canary.15":"2021-03-05T13:45:03.122Z","0.1.5":"2021-03-05T14:35:10.719Z","0.1.6":"2021-03-10T08:43:17.264Z","0.1.7-canary.1":"2021-03-10T14:46:03.319Z","0.1.7-canary.2":"2021-03-10T14:51:41.488Z","0.1.7-canary.3":"2021-03-10T14:58:34.440Z","0.1.7-canary.4":"2021-03-10T15:00:05.815Z","0.1.7-canary.5":"2021-03-10T15:04:30.149Z","0.1.7-canary.6":"2021-03-10T15:16:07.444Z","0.1.7-canary.7":"2021-03-10T15:37:26.681Z","0.1.7-canary.8":"2021-03-10T16:38:59.863Z","0.1.7-canary.9":"2021-03-10T17:11:17.721Z","0.1.7-canary.10":"2021-03-12T11:41:08.384Z","0.1.7-canary.11":"2021-03-12T12:17:57.119Z","0.1.7-canary.12":"2021-03-12T12:47:26.134Z","0.1.7-canary.13":"2021-03-12T13:05:01.751Z","0.1.7-canary.14":"2021-03-12T14:15:31.097Z","0.1.7":"2021-03-12T14:59:35.845Z","0.1.8-canary.1":"2021-03-12T15:00:27.559Z","0.1.8":"2021-04-08T08:28:15.682Z","0.1.9-canary.1":"2021-05-26T07:59:20.286Z","0.1.9-canary.2":"2021-05-26T09:49:33.052Z"},"bugs":{"url":"https://github.com/FDMediagroep/bnr-design-system/issues"},"author":{"name":"Willem Liu"},"license":"ISC","homepage":"https://github.com/FDMediagroep/bnr-design-system#readme","repository":{"url":"git+https://github.com/FDMediagroep/bnr-design-system.git","type":"git"},"description":"BNR Design System","maintainers":[{"email":"willem_liu@hotmail.com","name":"willem_liu"},{"email":"dirk.vanderstraaten@gmail.com","name":"dirk-straat"}],"readme":"","readmeFilename":""}