\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","_id":"@chanzuckerberg/eds-components@0.4.3-alpha.0","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-OSul1eDv5mHz/1zBiYOgcKGcBqYVSaIyesJZRp9Wky/emLEaqqrOosgsyQjSnWKOQJOcJbuQCRoK66giBy+3BA==","shasum":"d1b2f43fab1baee189a367622eb43a5c38df69af","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.3-alpha.0.tgz","fileCount":376,"unpackedSize":253751,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPC9I5xyVERg4RC+6XFfhepwGBiR7QmVS1bbTVM8cMTAiEA4x3Hn8p+4aBMo1a3Tju93VBE1ISnp6aN0rQ2FCs8wlE="}]},"_npmUser":{"name":"ahuth","email":"andrew+npm@huth.me"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.3-alpha.0_1635795431618_0.11965676214286791"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.3":{"name":"@chanzuckerberg/eds-components","version":"0.4.3","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.0","clsx":"^1.1.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^4.1.3","@chanzuckerberg/story-utils":"^2.1.0","@storybook/addon-a11y":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/addon-postcss":"^2.0.0","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@storybook/storybook-deployer":"^2.8.10","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"4bef7ac6c6b65f421bd6d8e2e279ad477cc9c062","_id":"@chanzuckerberg/eds-components@0.4.3","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-PuyNE5m3yVC5qcanxtpVRuC2XD+MGl0KblzYqy8vxpHMhL4dQ48N40ewIxDA8z4pjElS2M0LWT6aDVzq6fGwgg==","shasum":"7ff3a7176148f8ebf293df66fdb9cb3f0c78fd99","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.3.tgz","fileCount":379,"unpackedSize":275602,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmTkrkNeV++JOMh/9GoE0tgFf7tq1Fbsbta/w6qM2EJQIhAOEzBQFxsHNm8cv1BU2DRlvkreiAmlB8nw1sIRt9PsP/"}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.3_1636066184737_0.8119055131003123"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.4":{"name":"@chanzuckerberg/eds-components","version":"0.4.4","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.0","clsx":"^1.1.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^4.1.3","@chanzuckerberg/story-utils":"^2.1.0","@storybook/addon-a11y":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/addon-postcss":"^2.0.0","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@storybook/storybook-deployer":"^2.8.10","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"f7783fe7928419ab83faecbba8b777c3405ff28d","_id":"@chanzuckerberg/eds-components@0.4.4","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-hlpRBk8pTayesNN0psW3hOIoc77Zlq6AMjmygIQosMHoNxSHC8a8VlTta5Uy5F+72j8vADB2WQtk+0GsG/Xe7Q==","shasum":"f02ae50951334641aa5d2295a95d3e48feb5c26c","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.4.tgz","fileCount":376,"unpackedSize":255609,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChK2b/mivNAmCb2jqN8/2Me0h9+6yJ7kiJixxtwnwfXgIhANQqhwqH3Or8p5dDXoypF0uqck9kD/nb2fRrVu/RKVD0"}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.4_1636137788155_0.2766922121818223"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.5":{"name":"@chanzuckerberg/eds-components","version":"0.4.5","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.0","clsx":"^1.1.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^4.1.3","@chanzuckerberg/story-utils":"^2.1.0","@storybook/addon-a11y":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/addon-postcss":"^2.0.0","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@storybook/storybook-deployer":"^2.8.10","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"3929adc9cace2261bb0ccce83394823c94ba5823","_id":"@chanzuckerberg/eds-components@0.4.5","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-RdSi7nsloyXVwOI7i6Qd3eWGOmAGsLtJmDb67R1UMzvhTm/6oID+mYUpGZPuHY0C1F6Z5sWCkdz/dOUjBPeFpg==","shasum":"f5c3350f19bb32f1fd94a8a4a6d66fabf4ff1961","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.5.tgz","fileCount":379,"unpackedSize":256863,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgrz2nYmIUc9mv2ErZU7vRhXN79dqHpH5GLjDZcjOMRAiEAqkbth4jHJuaeymwOTPhjv1kpr8DPi5pPiyH0NNwr5+o="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.5_1636423958933_0.060255682403426825"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.6":{"name":"@chanzuckerberg/eds-components","version":"0.4.6","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.0","clsx":"^1.1.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^4.1.3","@chanzuckerberg/story-utils":"^2.1.0","@storybook/addon-a11y":"^6.3.12","@storybook/addon-essentials":"^6.3.12","@storybook/addon-postcss":"^2.0.0","@storybook/preset-typescript":"^3.0.0","@storybook/react":"^6.3.12","@storybook/storybook-deployer":"^2.8.10","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"14bff80a4c9f2b3a12fcc9a9344cfaf46d86d423","_id":"@chanzuckerberg/eds-components@0.4.6","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-zQaUdi+6QleIwFfa0O8NjaFBMsrpkcfEBrILK6Q9iE+ESp6EchA5Pg1pGCEs3anunNSLvDGEoklZ7BhRRAjAdw==","shasum":"20ad546b33a84e2826457a766f032a9a9c2a672b","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.6.tgz","fileCount":379,"unpackedSize":258369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlas7CRA9TVsSAnZWagAAijkP/1cMPkKeTuBJb4fGlUqj\noU7qR0ho5VPuh97feBNXjXmbAR1YmQY3i+cJwiyvu60SowgGEml5Y/UZHo0o\nj6jZECa8cz9fxgeWRmkcUlI3yKOz5W3HmHX/pjd20+9FotTwDq2cVZNFQLI9\nO3Y3Kk/BnlKyMpRE8wG7voIxf22tyrJhGP5TxNyaU1zsSCQNOiM7Fz3p9KCC\n2218+eYIgMqffSpBpKoDdY4J3ySU79Z1otiDxrvqgq9sZcdUO2JP9M4ns6Gc\nBBOBxi2A/5YV8SKM0An/frnnoDiqFwsqT9sydM9NSRJ4YGk/tgtfW5XQMNuG\nCPvTLOa7S/5eE2yrzFoSA0+VIo8Tv3OWrYOpAu6Zzde8CeWlyu7uYJJoM+EN\noJRfhS9dU+FtKZsVLnvOJ4QEEqrPD8bGuv7t1VGHHCVV/GJJ/K23LRvbGvRq\nzs3vDCVBJUthuEb4L17SWJiemN8dzsEq0p+QZZo5QtFr5E66+jKxWpg5Dzw/\nPMXn00iYSq5/xljD2O92PRmGM2ozbLK15/YELIywHVp3Ys248rnOutUX17LL\n7Qjux39nV4mlubZCxYDeTaSYUcx20KLl9cOcIfKZWpO8rVFhA38O51I9q5Sl\nt79Hf0NjHX2xBiuwPCJAHv4SIu5x3ueDqeMgZIyOrhCds5V01cU/ETwLhYXd\nENVP\r\n=J8wB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjtFuOpzcCjSj0MxpP+tkuMqAl8L7pyB8Ed2N4ZS6LoQIgLNTqHwi/eDh6bkq22pRNN03O+30BE9wIDBgKlmEuADw="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.6_1637198651719_0.33674447999668566"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.7":{"name":"@chanzuckerberg/eds-components","version":"0.4.7","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.0","clsx":"^1.1.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.0","@storybook/addon-essentials":"^6.4.0","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.0","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.0.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"852c8aeffe163749822ee2434e004f4bf6ff837e","_id":"@chanzuckerberg/eds-components@0.4.7","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-vkxIKi1xIvKQJOP/E3jAFOf9N8xY6AaFfkwDPzPrbKT+gfxEk2Ud0bxk0/3EjKjpUadTmhxXkM5pj2MTaHVW1Q==","shasum":"2f2c91b3b4daf3c0c7790559933eec90f1d90095","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.7.tgz","fileCount":382,"unpackedSize":259282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqABqCRA9TVsSAnZWagAAUsYP/iyXyRxHH9rq409DxmlS\naVBbInkb8QDAB8NVdjYp6eUqb8oMmaZVY0LLb76jmRV4d56ZA7h454mn53fH\nLP0tydf6SGgXXyNeaKJlqKAOrX8877SkiwihLKRkpQKlmLutUHUDKA/0e0Db\nAIxxE3OlQPEqmhLfoli8+GY+7a1ircLHn4aB8M7Ngkgm+YFacDKOn2JKFlWA\n81n+cCEv7VI4MYhdhNINF4YqqLn0EaaaFurr+49wHc1oRxGClYFApwue053Q\nhlQICBHitIC8VBYaupWdrj2UljoKo8lFUMGMfPDbNTuDU4PIROY6mgQAZb7R\ncz/eepGcrUBRNCuc28smssDc70oavd4WxtgkO7GAftak6ZMWWUc8WSwUzCZ/\nczBcNu4VIbAC1SE5RtZQoXJqUTbGFd5GH8aEDbbXvmK1CzwQX0Yn77KsWP3u\ntpYJy5DKJZ3PBKd7xNQhNKI3qZAXmP4/V9v3gjphFGU1RyZZKWKOJFN7mGwg\nEfTq3wmuyj6Bct6ouOoVQ7FAEV9CKpsdh90qInEZMrL1Gi8Kdu9nXeGTqK2N\nTsANsjodTO0uGJu63H8Ag5ADODHZGCZvu2aczZSmwRFz+NQCJxyovClGvMPX\nojao3EUNLukYHDfwfwmJXW9xoCtnDZV98f49C0RGhfGJsspZKjn7sjW3f7iL\nIO90\r\n=XfzJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAMljSuFKJ/+slX3BEEQnFq0WXp2W+VA77DOsn93r7lAiEAldnKPaUXui8jtmFWoxkM0enZF1I8uR599FywTjyDaOw="}]},"_npmUser":{"name":"anniehu","email":"anniehu4@gmail.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.7_1638400105887_0.9121785259143984"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.8":{"name":"@chanzuckerberg/eds-components","version":"0.4.8","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.8","clsx":"^1.1.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.0","@storybook/addon-essentials":"^6.4.0","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.0","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.0.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"31a93d0376deeb9129db1838a7ab15517852aaea","_id":"@chanzuckerberg/eds-components@0.4.8","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-mEYojQzoB+BZcZElLYqiUY5ZuTeEcoed3kfnwONdXEflYrSHlFdptpynWcL73bOZYE4K2XWpMAyPszGLpHYfXg==","shasum":"98183d897ed9bc2e3fc859d7228a311929ef9a23","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.8.tgz","fileCount":382,"unpackedSize":259282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqlGHCRA9TVsSAnZWagAAMboP/3Y5+lFUi1ckkrOAhllb\nA8fR1Tgf+NPIazHtSX08IBRW0HyHa9vd/gJngBpTBLWB0F+rgDGe3QRyjB7O\nVd/2GNLT+2YbJUrANWxC4ywhENoiTLefXkh/O3BgT75+/I4Z7O+ZpaRsi8X5\n6mkKopYPQxKnm2yIYZRuBDfYA8iRIwdKQF84CLiJlYu5c3XqTs+4Tz2V4ZAU\npSs92lpf1Go1N6N4fiiHgDa2qWvAMkoFadnm4kvzIckUjouptU+t2C+bsXEI\nno8QwnNcWC+WdpPWK7abwLT3y110Bb2n8PZUC0cDS9RtAJvSQVaRM1v5zETI\nNnuiQeOllfDNxHWZT2VhEGTzEY1B24giYPCoEI03BOhmQY9yo2DfPmIOQRUG\n8kx64Wj21zZz+4lnMJ+3J78d9lCCCm8X/06YE621/qj5kE2OxZAWolOxuRS3\nYfW9/hzjYPKIhTxtL1PKb1QOfDXAkPDpTj6WJS+VhDhCSpuGGuPn7p57xNC2\nGm7B15DzvAEKREk/XTpbVvTES4sc0k9OpI/hlQdZjyK0ACbLgJhL+9FJvauk\n6WwB/KZBJzRIKUJRwHrTAxzejBsIGLG001aS9WmpMME/S9NVX0FAgkuQkFZK\niZmd3Jq0dDXfKXNvFngnNN/wsdSjDW3lOC9DCFcGnZayy6S77sxR39a3pD+N\nfeKt\r\n=E28p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp0SwLBiKmlFMdHpzsxGa0uwyA/DHPqSXPierbLbh1PgIhAMmsws3ss4lNqvvgYJSUMxEtV4BSB/F8SsbilRAn7YK6"}]},"_npmUser":{"name":"anniehu","email":"anniehu4@gmail.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.8_1638551943623_0.88672962327295"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.9":{"name":"@chanzuckerberg/eds-components","version":"0.4.9","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.8","clsx":"^1.1.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.0","@storybook/addon-essentials":"^6.4.0","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.0","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.0.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"256778558d5948cfb495fa6b12421ba87f2fcc07","_id":"@chanzuckerberg/eds-components@0.4.9","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-0yp8lIu+5vqCA441f9PgEbBzQJJOwMP1HpSkccHiCYOTAI0iBZEcwVfGoCbMhfWOzfy68ADYBjAbY5ZWsv/sdA==","shasum":"e5b9f6d843f6e84af5dfd8ef35dcbce5c5f7e102","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.9.tgz","fileCount":385,"unpackedSize":261614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsk2YCRA9TVsSAnZWagAA8gMP/3WmzYycZP2+UzlU6ucI\nJXUU/W5wqM8spG4pWMa7zShHhnpRtizs3BMmHkO1WUtD8xUqKIduQ/i8KUIq\nsTV+81u3thQFAJYO+xrxDFLkcpMAtiad0HWF/ysoSpp0ypcSetiWITQa3jHG\nGR4PjThoD6I4HttrXaT3fPcXyd4mYuoLc6HUtpcZFymJvwLhHtKMh1d4X+0n\nUbhEvQSVI6+gRWgUI2JCl3Edc8z1x4dZvA2Bv/C2bMmuaLbzZ9RxjA5MwyHt\n1CJIxzEI+Wjmycu9XDDQBjan76kR/xbJOzPVwhOswKm4qOiB9YVCEuEXAX7m\nznIr9H0dn1aIHgJwSpx/Q0XHrKX/P+WeaeM9WWOnIQLyeuqVF6/EZgyTZONL\nnDL9kpHfqd1aSZYo41ylMroG/MtbwelPlGiVYx09G14goRFw36De8BDpD9dV\nesJVqre3xOjxont/LviL3ydVo+B+QljPQxVstx+qFfyv2xJ95xrk9HFh+k5Y\nLM5snrU7SiBrj/NCZlwkUbql9Tg/Q6HwiPm3MJChmfWGuIeKI/kLDO3Of3Bw\nL++evwFWMBuszOZnGT07fAVTK7ZfIbzdfzsI/Wqfg4lAnY8/Dojn/LRYBbsC\nGa8hCGtcGxcdBrbT3fq/8ZXFxGPIrt7tAMBGY+Kd5YVRH+DUn2YVkQ2A0778\nVZ/h\r\n=Xu98\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5y04qMThMY+SWoJ3X/jKhMPV5U+LgoDUmNPNCTc86TAiEA7ruKrGxwLtcvxtbjABrzkAAMHgGFbAYclJgtbnBXjUE="}]},"_npmUser":{"name":"anniehu","email":"anniehu4@gmail.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.9_1639075224483_0.943961359880831"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.10-alpha.0":{"name":"@chanzuckerberg/eds-components","version":"0.4.10-alpha.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.8","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.0","@storybook/addon-essentials":"^6.4.0","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.0","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.0.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"b973dbfa62eac1db48acc30cc0bdfe8a5bf55d8f","_id":"@chanzuckerberg/eds-components@0.4.10-alpha.0","_nodeVersion":"14.17.3","_npmVersion":"lerna/4.0.0/node@v14.17.3+x64 (darwin)","dist":{"integrity":"sha512-OpeZG6ByqT3DUY1B9E0j05xDTRIonX/9eSi+/EvYptx/xDICvNwO6vb9aukflxzTNnrQLihXvRN+VItWTwmGVQ==","shasum":"65b8f63b614c6e66e2d572a875b525c288d6c7b9","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.10-alpha.0.tgz","fileCount":392,"unpackedSize":276776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu+/RCRA9TVsSAnZWagAA+foP/2JRZOhD7WXzbeTTNjZv\nxX/270Cv9rUgZrdG30UQjixgh6lHG0xUkQ+rTlin60vwXl78QNRIjPPBVE9T\nyEdil4N8hwKeuKIPWUuzVFy98uQHfW0AjbMWugxwc+73AdR9fNnpUsij7nsE\ntM9mOH/bmHqRUNEnj3voDUx6lABfiKE71CkQZ5imlzpM9BpdeDPSpCV3HeiC\nUHTfz7opDZbwVHUz+CU1WMJZ9kCyBxMjbRIvGPVPjLo18Tfq4CD7V1rCjBe/\n6ccDofsw+oiUj/5Gej1UlqTTomtXCiSTK3JxEVfp5RfevblvBEkaHedvtcaC\n4K1D9kg1tMNJ/dkDBk0oJLKuccrtALhy2AJKMuYz+RdczBHpKQ1RgiebzC8P\nErfbL1aWXirioVEz9LgzBCBwrTYs19tYMHpwwVgO5oYq3yvk/9CaaQw+DC5t\n3V+giMib6KwLhJiEVbqc7lneKScAx/ZMRmahGCFRdp6qfsu8lQx/8hStxE8Y\n89HeK+WaAwkFKHqCvqTwHJdgxnRq+Z7bLWkAYaJg3hS7qINh97NTuhlr6RN7\n/59F5twCBb3mAuD5G5L0e6uIzCezCOzrqKw50ezWSCUbVHFW3uKoJsTAeJnn\nkLbN2kT1+Za0U2GzY26Q7JwsYtKCaGbvLNYucC/neMWCou9/TA0hFfIDjUSA\nuoBw\r\n=Gr/n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpC9kYetwQx5djhJ8ZcYOSkvs/d1k/3KZNjnr5C/7LBgIgNU8pFPrwPUKQf0sQkMG7gfcxIzzKDfIF+zN6gF+RRSM="}]},"_npmUser":{"name":"anniehu","email":"anniehu4@gmail.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.10-alpha.0_1639706577036_0.8017451000425613"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.4.10":{"name":"@chanzuckerberg/eds-components","version":"0.4.10","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.4.8","clsx":"^1.1.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.0","@storybook/addon-essentials":"^6.4.0","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.0","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.0.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"4ff34cb9b75b5c28429c23e58b0c2a61e69ed5ba","_id":"@chanzuckerberg/eds-components@0.4.10","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-z1U/xHfamgNghpEn87/gLxgzZFbimmv4SAUMJrchLNRuB9lvXR/4z7ko7IAafgoU/8oSu1du0F/Zb1oqhW5qRw==","shasum":"e2d3c2017f0ecd26952ac71e81f9092aca1b611d","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.4.10.tgz","fileCount":385,"unpackedSize":262810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GEiCRA9TVsSAnZWagAA+LkP/AlZ6HahQItJc07Uw4T8\nPvNIP/+XcU0G85NmrIMjpAcTQoiX2/R6xYH0DbklJ8nlnRA9cpcxh/5qfiDN\nCKuRtb+w8HkHlLMcGlOk28wjSo33aOPUtCk7QMlLmdhDkIBdffyhnDbYWdzz\nkdz9phGe6JKA04cKYIrhDiKhE+In/jsmAKlm9k+hMBcoNdYwTDUtUtv7LoN+\ndLktDXGXDnO3cNIOw6BNrHjHp4B5am/1Ec/mHC0yHIySewA+FvoXsNlS1nIr\nyhLFzOiUdJ7W3zA6r0Ay1dHQrxydYfnWxHHhm7iyD+inKhBHvCEWNDBrcUBR\nkAnPHmEOunFivuAumhvMjczpUJTjIxEoz4/+6lrGc8xAtA4zz+HNO9XRAq+j\nKqYT08jwcJ440TZsT4QRA4LO7Kr7AelkkkW9Gt+M+N/qt7SvnsEublst5TPQ\n00K/CZEDexizf4iz6xtNo91ZYzsb0y0lFZ3e1s2vtKkOxpz+uFw/hiJXVTJy\nPCrfA1t8GYReEe4HS1HMihzheLudCcZ/8+2iNP+JfXZVq/3DZEpU67LZZ+kS\n2U5z1iIpvYn3c4XZjxpAluYAjsJQAOt+dRWq0aZf4Sx8TU4XnshG6M2vmhno\n/bgY67Tm3DLJA0J6/pQL7Zh/vfWpySjst+jyMWKJTUwdZJQShnZFNsheK/TW\njxdb\r\n=vPjD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDICskJDIE1NZi5CRKUhhCtnB10tYlN8I8V+mscRYnJvAIhALXSq1D35eRCPpELVe2Mw+QXXItqkvChyZj6HsJLG9YI"}]},"_npmUser":{"name":"anniehu","email":"anniehu4@gmail.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.4.10_1641832738610_0.3388226574702098"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.5.0":{"name":"@chanzuckerberg/eds-components","version":"0.5.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.5.0","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.0","@storybook/addon-essentials":"^6.4.0","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.0","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.0.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.4.4"},"gitHead":"53b3bac04ea859e6eb908e2d7c8e49967b13fa7f","_id":"@chanzuckerberg/eds-components@0.5.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-FGrO3A/zTU2IdMkpjacA1B1jyCS5k46dUjProoB5NdIUgzGfAGhf/dlpLhEaFbMZTdLgcfNgqo0nYT5WOFsNbg==","shasum":"4481744c350385f239d3369cc2974c500eb19e67","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.5.0.tgz","fileCount":392,"unpackedSize":278628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6IpFCRA9TVsSAnZWagAAvUUQAIMxKjuRqijca7pLpC4W\nRu6bKC4h/rvVFHJ8hqWgA5SntIqDwA4d6aWUFsOWXtjb65ooz+2ayRYCnYfB\nFhKJUXCneDCLIYFLZXJ8YL2wsyJVhPMPlPXtM9zUG0qxW0gwHr0fS/b1eBbK\nxoydw3WYyOJyjQ4iPL+QDsWTMixfZWtA8kopXMYiSOnNMj3fedSlKR1iBpn4\n72Ga2WeZ7HxgNQBGq3MTiA8FOg5td/+dqFb0ERND/Ghrir+176AJigZeqIdu\niEk/VzbB1ORlwO3vpuQY8BZju08cSENZwtcm9XBwhWtKvL6tt582/G3+ri8g\nlbqnr4Yk1JsuieyQYun+AmQvx1khx16lKDci41NdDcwrFHwxrI7AIMiRMzG1\nnIvUeaCnaoqaziFRl5VFXq40N/YY4+Wo2MvxCMUmecvhZA0VXk57noaRm5aF\njHwt+cxb3dEtJicT+Y9wRof3EYMWPMvsrzB/P0B3tHO6ImpB8kupI94fgLwO\n+V/36XKiLhDjsn/JwuVcLXZ7hg8mttAllOR1tVoIuuGYwWeWkl1R3J0xwZAB\n/tR7BIz/Tyc1dK3uPbZ1x7AEz2vHApHUtDoTPAfnw/Xk9bLLZc9gfWWvZsG3\nCKdQDfGUoo7Jeswjw7gjsSdKBsggRMCGSCvlbBtJqQ1OLN9k7Mstquo93L+G\nT5qt\r\n=giFt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGl0dVBfwfRi6ZwpUioqK9VgLLpm+JpUeG+z0RFsJEiMAiEA0RKkPtQVDlvr0CWZGc8noQ+AtphDefGUjwK6BbgmgQA="}]},"_npmUser":{"name":"anniehu","email":"anniehu4@gmail.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.5.0_1642629701167_0.6792009718572976"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.5.1-alpha.0":{"name":"@chanzuckerberg/eds-components","version":"0.5.1-alpha.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.5.1-alpha.0","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.13","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.5.4"},"gitHead":"81680a56814909b915b2e5a5d7653ec33cc72848","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowtypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","_id":"@chanzuckerberg/eds-components@0.5.1-alpha.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-UoQAsg1t4ndYa7nfnCxJwjrVNhiqTd5oy+iKEx+x4hXjHq9Pv4SmaitmrOEILKu0ICQK+rTjQu+4Hsm04v7jmA==","shasum":"9b634141622ff57dcdd56b29456fa0e82618da82","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.5.1-alpha.0.tgz","fileCount":399,"unpackedSize":286938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6vNsCRA9TVsSAnZWagAAQrsP/3QEfuRSEdQXdoweaKPv\nQlJqszto4s1bFPXpGJ01QxGZ6VRyGnDNnoYao7eoUUGFITxFRt4wi/om8qa9\nnNR2SEiv6xMDY6u+Ph0/w1P7durgaJUOePRD+i8uztD+FPvJZ/0/Mz7lfA7y\nmaj9IAbZrD6JHy41u7vjAX9LFtq8hlaTbu6HrtAEfCLe6zaMlVSKK6nRG0he\nFWVqsTy4crCz8zChaIMRuFksR5voDEQzeoBHib55RcnpUs5mkxHQezty55be\nhyloC4IfwoDGhkyHPbcj16bzgoPtRVunYTrzWZe2ITWe1xk0UCasQkAjnB2L\nYZ7Rg0J9A/kGLMbgHMuzr7zSUA5vgs6ehRkVpFWAosK1sja0tbYiAMVanLdW\nUgMum69sKdro3ZIo8IOS1yKvEtzcBIWT8uqMG/UNvWy+P4aMmxyu27UuZQof\ntpp6BsQCpxvW6KJz6Zo63+Sp+GLe59r86odh3okA1rI0VS7VRHxZhB/0l5Hc\nvi9cyB40BDtOVjZI/g+0NYMvAuN86v4uZSDb0O1wl5+MJB65ErIPYXAlN2RT\nXBuiCx64Hu305wL8bk2W+IVvdzA86VSmla7IrFZNjFn+c0HlH6KPsuorfTkS\ndSCbfpF2W2ms4SLiL26oV7MxuygTSyrThm2WZZzSRXSAZsQB0sy4TO5tvsPY\nSiVP\r\n=6Dq1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCACdpOdKDzXuFQMTBC7j2tFYZJ61DMGp0YmPUkCcQpIgIhANLnCf6uXjyWqpFxSUN5rsWnwrk+csAnxoZt2HqnM1+O"}]},"_npmUser":{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.5.1-alpha.0_1642787692519_0.9499013765505053"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.5.1-alpha.1":{"name":"@chanzuckerberg/eds-components","version":"0.5.1-alpha.1","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.5.1-alpha.0","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.13","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.5.4"},"gitHead":"a221f589b2d6d6a37a80e684ff466f4fe3e7a030","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowtypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","_id":"@chanzuckerberg/eds-components@0.5.1-alpha.1","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-aSXYUBS1RrumyYpUyE8QCo14WxFwf/4Dof200KqzCp/eAo6ocwV17LY0MzMDjUu+SpSu9bqdm0cu1Gb25RcVeA==","shasum":"517e6641a9e9576d0bf7fdbbdbcbdfe8d8531ea2","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.5.1-alpha.1.tgz","fileCount":399,"unpackedSize":286948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6wp/CRA9TVsSAnZWagAAM1EQAJx4JJoNg9FA/+WmBPEg\naYTiJdEW6gtxVpngGmGJPyrt/o6qcik+tgFDsHDW/SrzbJxlG8FSqliXIxc8\nULtWdQqUnNuIMtDoiIMBQUSJZ24J2jIwtSwJmGolUrEy5ommmZIdIckcprvU\nM+9bQ8EuwhJVfcpuJlOADU5xfmLL5FahtHEjCNyMABe76xsqvGgG/XybGyW9\nsAjzx/clmdeXZKp4FBWwIVhOBkOcOmWN3vXZMq5Wmxq+7VXa9fh+1AR/qe9o\nNIsGwXwiHMzRg3r7FotlA655XqAIJ5+aZQnW+e74G4JTn9m3fHylTbaMMswA\nxEzsRZELrm0PaUPfbyPE6f/w/s/UjvZb6dUh3i7Yrp0iO8fbx0NkOykgGCGE\n9zVl7MKfQYOXLHuhSjYiILmRHVhCGmVLFp5xBjgJQM3gYgkKrAMuw3SslVQg\nlKAkgv4XB7HE3UzqI5USNGqmLALiVtbQtZ6an5Cc2OGHHMt0cnl7sh33YPAV\nkkjgTtYJxBVk/pXsPG/lcm4fiCQE1L/J+AOKuhNawYVkLEmabmJvtr3LEptI\nXVQE2es5eTpe3p7czrNeA2DPadNHHk1jiE1PPEsz35ZvRjZpM4m9dLxOEwHZ\njcNwv8ueJHVsmRaRtj07QCabW7+mt0HF9rvk3VXfNLd2GcLU3VBAA+WLS9uJ\nk3dQ\r\n=27F2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzWblWfGW1bscSKWOGdiICcwMcaMXWrt2n/Tbxqu8aVgIgUp3+4sV+KkW1P9lUQKk8jGnZUKE7fa7IPR8ioPs8fCE="}]},"_npmUser":{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.5.1-alpha.1_1642793599244_0.34251720954461695"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.5.1-alpha.2":{"name":"@chanzuckerberg/eds-components","version":"0.5.1-alpha.2","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.5.1-alpha.0","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.13","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.5.4"},"gitHead":"8a432a2584c50bccdd272e1c059cda9cd9351207","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowtypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","_id":"@chanzuckerberg/eds-components@0.5.1-alpha.2","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-peIdV8KwHzOEJWx0glQIh8tEbhL9TX3fNwXNCnByMmpBoCXaDDVJcjgqLBmV7BmEpmp1DDZfTV0rz9Ll88QQvA==","shasum":"5e4ea56915be2c7463ce812656672c2b5089b820","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.5.1-alpha.2.tgz","fileCount":399,"unpackedSize":287217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zrPCRA9TVsSAnZWagAAhz8P/3YAI8P6ZvyT5zEiSKtI\nOdTDi139KK5BnbDbuiEVfRDxynIy49rVaPDY2MTEj4Il1ICqHtWr/XOg+uLV\npWgIjngy2j/9PhwmCfMFi3obSfqED4WJ2Y4/+e9xFGOG8wsC1CuADpe4Eoeu\ncVKd5V0P7Al2S3brli5hTt4dtyiaDkVGxp51HvQKiZNP82xivZFv3WUwYaGQ\nFyCQeSKn1fefynnCAYiFqt1WSpnyl5zeb2VIt1rXpOOk3/QxoQE1SeejRnwp\nM81MDQdOI5/Q5GnsPdqvhmVW+0jM554yn4OUpN8fOsUCMheSK4IGbyOTfgQK\nv1H+V6jPAQ+qQjGo/cv0aIZU7vw/slvHj5it2QICGtYaieswfI30yc9s9dLI\nePl6GP6jHo5p7V10aWozQoBgzD7KwjQEGph2nNxN9ZjH8pjzUarnp19+Dpej\n3jpr/dAyo5ekOeqO0DSp1o1boB/ks5CL9wzIbVAPdOuGic80/ULWlSNJuvS1\nnLAhXgl4ZdkBIaiPIxz3LhznRGm21va+SLceLVPOTLAyqAn1P2SqaK6xAetb\nVhLeUk55+IWS7pDORxHZMECftFTGqM5dEC6hEqdF79xE1H5J4NkzWbF9kbiz\nz/oUc7/0fdoXWQOjCKdCEbdbVI6EwgKdCBU8R3X9LCUX0FlQZCpE9ZWvXwM2\nkadT\r\n=Yhgc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6MPBnq7McQ4iKqIlot7u1/5ecGNGWrUfL0CzUQwzWZAIhALikKsEmEmHB48/tNrKpEVfqxd64xOHt3pPs2yDCSyZ5"}]},"_npmUser":{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.5.1-alpha.2_1642805967278_0.9975827936523656"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.5.1-alpha.3":{"name":"@chanzuckerberg/eds-components","version":"0.5.1-alpha.3","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.5.0","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.13","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.5.4"},"types":"./lib/index.d.ts","gitHead":"24b1257aa0ca700cf6673d683e07b6079f9c999d","_id":"@chanzuckerberg/eds-components@0.5.1-alpha.3","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-lNU6+RStMq0P1/OPDv6OuHhGj9wffPK3BfrDRowyzSAHSLfDXTTDK6VfXGo9Rwc94JAMGXuOxa9/pMb2EC2yiQ==","shasum":"93eca08744baabf3a0fc720335bf8d03d9f8060b","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.5.1-alpha.3.tgz","fileCount":398,"unpackedSize":282332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7zqlCRA9TVsSAnZWagAAv/0P/i2y2N2jQ+nCEe9KYU+B\nsxmh/CTrCRvfTdvqllGUxn7/oNBu6g6jyDfmWlXTfBCoR0H6vj55UIKjbTkh\nOpYgXRunslAfb+6I9DCEJeR2qaDG/5AEsuO3Ai75/pykZvSJdo4zBwNWUzz7\nF4gDxx2kAqDLG7rT3PzS+uiy3uQyARVRzYEYYQ1EHCUb/590J/1LsivmLK5M\nBOYeg0h2dNPisdCRRmHQXS9MRF/9t9q0gaWJqD74EJF13Yjw7KBGPUMUoV4y\nWp9VQ1N3qG7ZCkQey0w03gbWVzQkgpTiO7fPocm/OZx5tcfXs0pQAogibBsu\n9V6EeUK7mAnCiDujypahYmsNBuExxy/0cDUbiJI+/lFSmNL9mq0eglCzTtG3\nSFnVB8RP5nbyT0SuyFipniAKGDqnHNtm6tgHmy/aEcIZAFZN6pYSg61pUOnU\nlcLuu0Rl8GfrQwBZkjBJm1ZJz7iOf+yhs5IwuZHjSKYb1vjtdvsA1i98oyhZ\nGuvmYlmzFXcrhZ5fpNOkbPV+rBdU+RBWQ1uTyDpF+i64XR67MoHRJglWpoi4\nqN3MaRwX8H9dmrvbzHAynnp0VK49mGYlGrh6J4agWk4zWEbj1Ls9G/TkpgmE\nhNK+Z5f6cBNjt9oEWimirZGhkQxV+8xdRt0klgypJXPhZYCQ+5MvroXj4b5B\nEdVn\r\n=m0ec\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsCl/7gKegPGX5d8FFlve4zhuNWJnhCK7DIY1SUwW0NAiBWtRU4jLONml6YZ1wWmVJDACi+C1Kbxier4tVVlUKTiw=="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.5.1-alpha.3_1643068068921_0.02318133555155244"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.5.1-alpha.4":{"name":"@chanzuckerberg/eds-components","version":"0.5.1-alpha.4","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.5.0","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.13","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.5.4"},"types":"./lib/index.d.ts","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowtypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","gitHead":"5b3c8574772bc3b6b1ad55301a39cc935a4d4a9c","_id":"@chanzuckerberg/eds-components@0.5.1-alpha.4","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-j3MTI1BELaJbPUZBBO3/0A+hTJkcvoCeGtTTKr7nC2Bk7RocuBKr8Aypoa9A3AlspmPBwZM/3EQOSQZSKTCdqg==","shasum":"59e2a689d17c8e0db5815b7bf543a8a2f7e8a1eb","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.5.1-alpha.4.tgz","fileCount":398,"unpackedSize":282332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8E0MCRA9TVsSAnZWagAAwwIP/1ocY3cQTMrlm2rnzUFB\n1nSYV8U9lyPgsKEYAjDrL9G/KND0jmAYIxVITbB7WIj5Zg8zjI6LFkOd+s0Z\n68jJCrt+QV3u2QmtGjMRRgj9rpo3IfzAbTOecjYXpoTT1DjRz427yfWu10SB\nS9gCfHffEzeApWarSmsHWqngW7Y6V/YtSfGO0LqkAiwQX8JfgvZDU5dgGl3B\nTL8YBB96L1g/77cBDdgxziDzJmaADXdU8XxVkKoWjjfg2xq/VcGWkjSbPFfF\n/U8EhbO+/UcyERJVYnvfJvkfol3HgJYEe5MaXV+ceRyN5bNKGOoRNG1xgULL\nrdkxMxr4/oe8RmpsEP3UEz30jvbnQJb8NiUNRxRrd25H2PyxICr6Lc2sVAT+\nAL0iIBsRSXup83P6Ug8rp10jbHfBzEBXMfE6mI5k0SZ/Heno/zet+PinRPgX\nPYO5BQkMoqvrkibpUmiFq8crc4bAkqaiTaxYLR6BWt+4j68SpfAm+XYpc9qW\nJy5qYcRlJXknEqKPgS5tezUJhjX4MIukYqcpj+F6mBzBTZ66GV5ASxOFTh8u\nz6yRIke3D1P2i7U/V0dwf+zYHXhlNu8eN5EkpSShSnaKqUejgGGBV4eV6uKU\ni+9pD3Y/im8V7QmWVUSELjdTBil8bdwV9vD4u678COyKX7yX24lV1rzffyK4\navZB\r\n=uXx7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWaay1IPMHfdyIyqDuoBuMvh6eJL4IZmD7lAY8Sa5CwwIgX4WSS1eSmxCQHWEjWcmDKj6LuZFlxlnAUpYr3WMOAX0="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.5.1-alpha.4_1643138315831_0.09981779949995051"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.5.1-alpha.5":{"name":"@chanzuckerberg/eds-components","version":"0.5.1-alpha.5","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.5.0","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.1","@storybook/addon-a11y":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.13","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.5.4"},"types":"./lib/index.d.ts","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowtypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","gitHead":"49ea774051ecee06c7bfb83c375342e999fba9c4","_id":"@chanzuckerberg/eds-components@0.5.1-alpha.5","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-0l6Chvwi7c1YhK43XCrJf21ctRTNp0reCNx7CeZ59Dk1IYj+qp6+lvp/HNEU7rvEj89fwz3TEo9o1ZgAFAH/vg==","shasum":"0d0352729a581cec7ac11760c2308b51c5d68a2a","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.5.1-alpha.5.tgz","fileCount":405,"unpackedSize":287405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FxmCRA9TVsSAnZWagAA7fIP/3u2UnmmWlZSInBSM1V6\nhN5MxFjXKnSb9Sb3SKUfeomLdk4Uv/4dz9rIJIDazVCn0oJMd740HVAdzII8\nsanMIUJRcnRydol4vRlbzl8DWntvYCtzcRuBi0Md+90MxDLdSqfnWOwTJkkd\nQKAweP+6oYH+TNC4spnAcH1Olw3MZHjest0yuQBkcy1c9BmgIKqR5mPFRwLX\n4U9L+GitMZImVSXdHKiJ7FqI4H+5aAmkW4FpX+H6UD8jRwKRWoT1g+9QDkXZ\nbVdTVsNiqaY7AF7IuTmO4LIcehTmz+oa8PUb2NU2/ydMYagfHzHJqcvz98PK\ngTEJcYnCIR6lsX10F/W9A5U+hDb8PeerjlXmi+iztAzwmWa3OXGoFaGUhYl1\nZGNv13mPL03ltw5WOi8u80yuF0gwwxWyqiH+a6/sFl3qj30KmCS3jJZIdiju\nDwgTLLhxWDEb2vYrfiLaZzovt6cnB/nrOuEM3ANCm86RB7opXUlsBE2LMvDv\nZ+JW4+3BcfSeI5uKO63Nz+1E1jjIo3dhSa7E8J6NCilaUs27pfda0uN913CK\nfX4MNtt6qeBK1ThgklqPKnyKxRgJbm+GM8VBeh+et/kA+gXhYa4O+DlrwPlO\no6+93ZnoBMmql0njrpvxXTphsUCaRzLHLAfHk97f0oIrsCGev+U4o2X4HUd3\nsr1B\r\n=Kf1e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHI235ZjgbGPvZPIjqh3JDEoa8aZmnxunrkQZ1HuL+3YAiA/cxdeM6IffMLGErbstkIaB9LfrdkTQos4J1QuAAXoTA=="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.5.1-alpha.5_1643142246726_0.9873844139519192"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.6.0":{"name":"@chanzuckerberg/eds-components","version":"0.6.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.6.0","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-interactions":"^6.4.14","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.13","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.5.4"},"gitHead":"64030071a2950012fabcf4b014c7fd3b0566e2e5","_id":"@chanzuckerberg/eds-components@0.6.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-gLSaU3F8YGx8raberwRHU6M3usYkKeCf4aeN+THhn1XmakoGh2OM+g4HZ/XZQMS0rZc/ACjhIrEgvNJ7DlyMkA==","shasum":"188540c3f6fa0c0fd221567fc9af82dfe07618c5","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.6.0.tgz","fileCount":399,"unpackedSize":287795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Z8tCRA9TVsSAnZWagAAxSgP/jeJs/3WGgATDM2PE7AP\n3P1m8mfhBdTJMjvuLq1SDbBOoqoTSU3lZQvxQMYbP5+Kne0tI5P4m7WNDnAr\nuszj6rTxytOAZKga7UWPd1MXqgBxafvTnKpDU/eZLPvPtV250tax828WB60D\nURwy0f31uHy1mPXv0mAmi5CRdY7El0laH0L5J5wLbX/5sOWucxQkI8K97c7Y\nseolgmD1bU8wwbINh+07bmKCCBZqA9zgN0tOz5n6Eo8Up1LUE7CzIrFMSRVj\nSjzPxx/rZw7nzjnU93sSKy7pgNGscPv+/xtXapEt5LELGX0zNj3deUid+OmP\ngwNKJGh0r2zgAh/oTt6R0gv45UmZS/tp5TLJtXkBhc7tzl0ngdKBnPwpXESX\nUQpsbl6et1BpyDoyo2UovzBwPzEtWy/pTQ4FyhNjeQg8C4zRqooLCPvyz949\nO+PA2PvvFxOSxlvxBqcIlp1fYbmbRdIhH7ADoUGbchbj4kQTWtksCG3QPfj5\nF5BxFVTgqiUIYvC0zjpTK5cqaRMSCflksTC04zmamsJH4OGLdRgkBaddCzr6\nrsSasI+WIT98KC1sXGyQQmXujYcbNWks6JHU1qsjX2UZFwRS+kmB2W9AB5aM\nFgZ/CjYiGwOnD7NXWiDSWD68GgSVO0zEcetRNlEefDZCYLzv8tfAawwaZtZJ\nb6RS\r\n=oowM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDEwb6f5J56Qi59/Z6/DzDgXvK4bbeEyPYrb14ba8I6QIhAJSaTIAf9QvLBUcLlJMUSZxY1F13d5V6JEm0JutvCQ39"}]},"_npmUser":{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.6.0_1643224877438_0.026896453238581364"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.7.0":{"name":"@chanzuckerberg/eds-components","version":"0.7.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic --only-changed","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.7.0","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.13","@storybook/addon-essentials":"^6.4.13","@storybook/addon-interactions":"^6.4.14","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.13","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^12.1.2","@types/jest":"^27.0.2","@types/react":"^17.0.16","autoprefixer":"^10.4.0","axe-core":"^4.3.5","chromatic":"^6.0.5","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.3.1","postcss":"^8.3.11","postcss-cli":"^9.0.1","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.7","ts-jest":"^27.0.7","typescript":"^4.5.4"},"gitHead":"aecdfc5e34b339f1b13cb725722574ba37e9f641","_id":"@chanzuckerberg/eds-components@0.7.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-VlGFSX3wJshV1EIsJxihxP3aoEXV/kYZGrsfHKbhKWXpoZ4qJJtWAyG6GN1BQlR9mG0/a8/A+KZCnoMYNyHEEA==","shasum":"d3541854d8eb378565da93743531aa5d82e779db","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.7.0.tgz","fileCount":420,"unpackedSize":302427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8s5YCRA9TVsSAnZWagAARrsP/0oGZCrrnRwvlJISJxj8\nqVhBt1FILbsaHYfSWo4Ln6OJvLuzZKrvp6ecZTk2sSCEUp9DE9v5YGhZ8Zxo\njczA/14017tzZCD2iX6Sw9tKMQmyCSLWKyokMQh98mjxVWMmIycj4ZsBhOom\npGWBhzwJTOEW6NoidUD1CmUskqM2aENJ4sdI4oK2sdop/3Pv+yln6QOQLpTt\nEWG/JH9Fg0Hr7jKKQ2zf9YjyHJ9yxKzTAHhvf4EMbDqqF4zxHjdpUFz+m1wM\nKbrZxlZ6LqRpSQSo0ItYzFkVdkAJm+xgnzIzFH8kNx7gIqyygEAY201lrasT\n6+f1BzdCq4MHNe0wWxwfLNM65f6baC/ulwZPS55SMg2JtKvWrHlEtQ8G9Xm1\nS+lTNaxPfInXuSTk0y9MGgCDQBGJYiWk5GDr7WXGiIMw7Zbn+3ZvJ56e2XTw\nETI1j1/qelsR2uC1cU82XhsyceRrq8TxepDsJ3u3knn/y0FvWcWyvbMjKgY/\nzIU4ZPoYlG/Hau4KpsSIN2ENrQabVwVU+kAAQnouc+VA0Fddiq9dazdtLfq2\nvw2KnU4U7mA0awKODoREnjp8egLv1feOGAtBQRPzJhwvUuBO6beO14iEtq+z\nMAdljiQzahjeLkL/GJrOJwi/rlZ9zNUbRe67fQlQafJ9Xu+bd4cX+eGPx2PX\nUgZE\r\n=kRfW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8XSymQktZLBqgtWjq4vDkTWxi/MSSt067sODD4hJPVQIgYjjMR7iYI1iFRUl7sPVmkpXfw96Cizy2bDgyLGRhAsE="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.7.0_1643302488639_0.8636919255717093"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.7.1-alpha.0":{"name":"@chanzuckerberg/eds-components","version":"0.7.1-alpha.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.7.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.17","@storybook/addon-essentials":"^6.4.17","@storybook/addon-interactions":"^6.4.17","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.17","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"gitHead":"cf3aedea025f3728cb0bff1062451245d0c5a762","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","_id":"@chanzuckerberg/eds-components@0.7.1-alpha.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-6XRqfAdsIa7D4yG3zcrWmNk8TExobKok6qdF1FlHD2R3U7r2YPSNESC3xVOhPZsVkT9R+W5GPNSNyxUhz/htlg==","shasum":"cc0fd592f3747e62227097a5ec8ce34a6b250fd6","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.7.1-alpha.0.tgz","fileCount":427,"unpackedSize":323093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEU47ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2dA//WV7pQNL5FfQtNDOS9Xs5N2/n23qq/+tF9LsObvZ6u2x+9mx4\r\nqOdWUKSdDO/Kg6turTvzCoc1kNZNURMeNtJ53kBafXlNj1USrgNWPEX3xqRR\r\nFNi65c02bXRHY8LUYHHtcMyiAaSZ7Wu+5f5DBbkf9VDbUSog7Yx9lPZ8iLJm\r\nOy9QwBSnmYR15k2syZeQNQqPEdxa973wuI0TIZ+bLNLUJsBAu3phaI+fxhj4\r\n3AjyhavNNfWeaWOn396IUdfT8nOcMNEO3EECDiOybg8bxqFlhu6msNUm33o0\r\ni4LrcKMKM4QTKXzbNbA7lDfGgP8r7r3s8yMVfaTQK8Ja1ptnLSbZl4APHhiv\r\nucBNAP1G7lYpJsJ4/15pPz8labV167yYzmdmjM6l2CTvq99Hoax1jsTI2dq5\r\nBFYMVe235zlSGdjtRI0VtUAmBbCSHSR+SFBdNCNAitD2Ty7MRj4xXtChcu9z\r\nVfc67Upn3kYs5pfm5xCeom2eEMc1KJO9/nR6uMkAAfUxdb8EQwAMbfhutjVR\r\nM1B5dbbhTiVKsQie0jktFOnrsBaqDnoDZb9DjcnX7+jvYOwsXzrpciU/XcPh\r\n+cFK57RmP9IYyDNzw4SnzIF6hgdO+zoRJPmf4vU/XUjKL7UUIcF+uN+BRyjE\r\nL01HcSjOLpAjnhPtDS2FiGKi+DCXIPE+VLY=\r\n=6j/t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5iEbeD7PcCZFdTzIJDd14Z61otx5vSJbYZtB+gEG3OAiEAquITNlWH63ClKAEv+kTmLjH2+G3ZXoA+qZh6gpG+zwM="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.7.1-alpha.0_1645301307264_0.8805948651389655"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.7.1-alpha.1":{"name":"@chanzuckerberg/eds-components","version":"0.7.1-alpha.1","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.7.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.17","@storybook/addon-essentials":"^6.4.17","@storybook/addon-interactions":"^6.4.17","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.17","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"types":"./lib/index.d.ts","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","gitHead":"b6020ad0a11609128883caec45cbe752d34e957d","_id":"@chanzuckerberg/eds-components@0.7.1-alpha.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-OZ/gJ5bv/Qa2YwCiIOmSX9mnjm1Tk9QAd9gJslMCtUDH/IXx8QYYn2iTkpAcmAmnO00xDb9QoqUjObPu2rq9iQ==","shasum":"3a35c029180aecead4a0889269d43e976fa86e3e","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.7.1-alpha.1.tgz","fileCount":426,"unpackedSize":323469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEVuvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPtw/+P86fj66N77IPkgt1bM6dTPiF2H0zZINOfkOeJFK2jYqMHs64\r\nf4/uFmk5hc2kwJBfChmAKwBu6L4m55tgiwW4HJAp2/qbSNzdOP6dXf7is62G\r\ncwjWw41hCRD/kvpaWc7Pf5VHKJM7Eu+jCjNcmdo3QcgLi38KnsxAPrgK/fTt\r\nGfy2aS8jX/DYdER4aiBf6pnMVJJRhjHQ8uzATvl7YLSBiCZXk75U6R7FgD2M\r\nfjLbeJNZ6v/YKnkMJosUdtPk1kzRL2Vt5ajRoYsug0Rt2owK7TS+ChquwZTy\r\nnIuSekvwsrfBM75gtH21bCGi28FE37w1vwv7qideFB0spkYZL+xvA5FszCzh\r\nNuqqF/VTxp3aX56nXxF9adqYOzlibNvaxIKv9Oae/4I7qRMfvEXAoyMEKun/\r\nvZTKd46D359085bm+h6NSGJB0ubP344eXWQ58sKxrHeUL/Wil+sUKQvAeUfb\r\nBRiIueg1oLtQAlUfIlta1r6KWYrFMpxM5FCNrChM8MCV/Q7ZYnioboFLxMOC\r\nlk7+j/fOnvfIdzNKn0i2y34AKRL8vHQ2C1Yo8zvrC5OeQSt7Kok4asd6jUzj\r\nwTnNXjL8h92xaijfeHKXxkb/06z3S79LdiK8xDDcDmzSp8c+N4QZb2a0zR3f\r\nRwHZr4g8cFAUkmrhEik1kCX7K76DOlEuWJU=\r\n=u1Y/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRj8O7WOrnCQbCoyKQDbJuYTaVbKKUysGu5OpJ9c42+AiBrv83LAEnAHpDgq0kwknTqlR+/AtJC53Z3pb+xQpOLhQ=="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.7.1-alpha.1_1645304750987_0.7800503408377792"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.7.1-alpha.2":{"name":"@chanzuckerberg/eds-components","version":"0.7.1-alpha.2","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.7.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.17","@storybook/addon-essentials":"^6.4.17","@storybook/addon-interactions":"^6.4.17","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.17","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"types":"./lib/index.d.ts","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","gitHead":"b6020ad0a11609128883caec45cbe752d34e957d","_id":"@chanzuckerberg/eds-components@0.7.1-alpha.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-57NTE5OTFeHjz6+UEPbSjhzcXiIs98Lj9s0of2s+GJZupRP9nQNtJW4e0wZWckSSSIEx3ZRZIFneNbknXhO2DQ==","shasum":"851a072f5dd985d5c8d2f4d6382ad0e2e2d96186","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.7.1-alpha.2.tgz","fileCount":426,"unpackedSize":323469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEWKwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9Cw//V1bq5YOH2mKy4yZMw+Gz3spqujlyevgQ494L3UE9Z5lQeF1M\r\n1fpPgOqI4Hw8CCebUhizZyOCAmuTaKMPvR1xvDGE8Gqh8OLfEmF8l8XXbXM1\r\nDYx8YGjlwED7FosK0HUV/bXV6hfKyLhNVDR1XTeMB9R9fJpgKnq2yw/GXS0X\r\nCB0sKz9rZwHHto9IfBoy017Z68lSX2pYQN2QT86QK/zTf1tI/P2YGVQHeiDN\r\nc8Ty++7w1SELcPOUKxzxSKq0RrDs8nn0/Ux+E+6sssepnTbEBYVc/myfQhp8\r\ndr2sDK1RljJsIu9HVWpOuCVvJJYUuarKid2ZqCaq8z+xPCchaRuG0MlCF++H\r\n/uHhnafTIBpSfBVqYiS4HbSeLEdo8M7DgJgaRhRImqDUWlvd+1Bf26GLVvae\r\nkgixWSBSpE2knROEu2DxAetP8LI8wu529oog6o+QeJvmHrNVgIY3ZK9wfbkl\r\nbEjW8hfiX+rXbEfnLUjq+rD44aYTZR2PAzjykU9GHs8JfWzGwh+kWC2g0U4b\r\nisR8xXP26i1YQJcxnena4SnWZt/oHmtJcr2DSKQpj2dJZazQ/eMOaIwbw73Q\r\n7rS58bc1Wg/sjwFPWWcYmG3f+nrel46q/kJRIpIp6BOLuzbuGCLtpSCuyRsA\r\nLSBSxx5UL2P2Pglk3Lp6G/YiErK2isB4KKw=\r\n=GMrE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrw3tB2E36VAfeqssK5UADkNWpTzBuGueqvoBE5AoouAiEAkroPqA0mSKMecBjOsuridFw/jD6taeq6u1CgS1mANgk="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.7.1-alpha.2_1645306543890_0.42344882122838157"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.7.1-alpha.3":{"name":"@chanzuckerberg/eds-components","version":"0.7.1-alpha.3","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.7.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.17","@storybook/addon-essentials":"^6.4.17","@storybook/addon-interactions":"^6.4.17","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.17","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"types":"./lib/index.d.ts","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","gitHead":"2239a25aeb399208db28c26a4b10aaaf74bc75d3","_id":"@chanzuckerberg/eds-components@0.7.1-alpha.3","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-OQO8uUZHCg0K3P+vDhTSLvHT3pbNUywJi69KjiH4T26n0vEypJGAXp63RgGQpeXDqZGHIs682pEOr4j4hYMqjA==","shasum":"adab4ffa79491a7f6ec85c3ef069a9facaf0f2e1","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.7.1-alpha.3.tgz","fileCount":426,"unpackedSize":323745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEWQ0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4rhAAgBdJnrI1dP48Y5lsK2dne7T+5r9MPOUGNdUIbbVCzCAOByhQ\r\nyJwmTQ4tDEmh1U1XSCedV7xMa1m/WxbSYhyKkflhRTQAmG9ONHhS8PLuGNN+\r\n9xc3zrK3mK5UIyoXmeIOQTfX9Fj8QiMU/b+05oo8WDvWqBqlxbaXlo9ElkPz\r\nAKW7q4opnahr8AlPc/bn+9byf1mGWjlaU+SmMRvNnUTRwruDYqHeBWJtn2iP\r\nCF3CJe42EhGt0RV8khEJqLrLPcovciecu6vFmqY0RsfLAsTjhWWQA3SHEzHf\r\nYf4x2FyWJijdfUgfA0zcO7gmh+wDqh340t9AQt/mZnmGmOsxBTGFoaP74cu9\r\nlEKhWu5gblp5Ki1kppzR4/uLlg+8NSOaKw3Rd/VeWPwFQnjN7gapopHB5PEK\r\nlJ4Oo/wvPUFUNqmTtTDEA5/EBCML6KBU2dVBziSpgSQMmsf+yIin5LkTNe4c\r\nxW+asomzm2nAYyjFRFE/AK32YEOZ5At2LwbAkYhlYRVXxCHY5IWtt0RFfJOR\r\nGGELIlwW6+C6eXSO84zlATmgCqquFvIsz2+SzbogmlUdxUbqgQ5yh4wsEIPB\r\nIAKmBaI8H+2azCTqnCBvzsHZ5TshIQzhoZlDBI2AkUQLmIO6kyfIJ831LCE9\r\nWjdtjnoHbpSRT3+X1uDAdo67CK+tdsOcOwE=\r\n=JXgl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBoq7rJm6eLo0lWK1qrjBa9c4tj7EgIbEeBdLRCYKJRAiBvHPkMcrGKqhBhFsRH8QZvbdU2BL2K5uKbRgOzXgVuRA=="}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.7.1-alpha.3_1645306932404_0.14622001131404283"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.7.1-alpha.4":{"name":"@chanzuckerberg/eds-components","version":"0.7.1-alpha.4","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.7.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.17","@storybook/addon-essentials":"^6.4.17","@storybook/addon-interactions":"^6.4.17","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.17","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"types":"./lib/index.d.ts","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","gitHead":"14843c3cbaf45b527746ea8a0e9cff8da4b3b877","_id":"@chanzuckerberg/eds-components@0.7.1-alpha.4","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-XuEOJeywAOmulG4imoootS3CrR6AziXKJahlCLQJzJNSHqw/JY26+7Dc1L1flVhqreaEUp9SkxaHgCkPQHhPfQ==","shasum":"e7cb903b640ee0320999384ba1c18d56887f5ec0","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.7.1-alpha.4.tgz","fileCount":426,"unpackedSize":326623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGRtTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopQA/7B7oDyxWWNoSxZAimefSjzpk3sRxMaPKuzrh922j6FymS8mSp\r\no79BgCtY5kWsc9ZDvWtLlha1nWxDUGwMh/UYnMBmUhOxpjMiFulH6LjArl54\r\nBRY7ARUPDuai/WhnNh0lRGmg3ClFvoNahfMGXEJ/Ik105wGnkXkxOhTIvxad\r\nBCyWHM/OJjDNa2XJU+I2z9pPWV6J3UHNXTsBhksrRnXAJWYzI19G9NwznLSc\r\nLgWEMCVmhuoVpfM/FjEfouqBvEIvYpMUs5gqDqzhTkjTVbAFGLGof1EGfdEl\r\n35RxefS5IUwCL7DTJnjR6RDGcT7lro4lfUwHu9dJ5ozedAEs+lQbEaYeDgKn\r\n6GwirTMOBRi4q9lcFYEqhF5LpQ/9q9uHzQ4j1K7ApeFk6sQ7GXLjY4sFRgAz\r\nSbMF1Xta+Wv4NK8BBcACtDOIV/Vze1afqVqFR6xm6Gl7jMd0QYK+4FltSAT7\r\nT/yM0zYp1nW5d3IFVhqjONrW5+jm8LsbT8se/MEGKfKKb/sJ77MxQutYFKJ4\r\nuD3Xz4d4CnEqF782/SknRYs7gzPFmiMDF0aP6R0E+2CvkGHJy+tRnpp0f7M6\r\nHFpUHN7+r4FEgNNZdsnd+V9be9LuG9W9VjPSfLsyXnTfs1Sy+FES2Aj7eYX6\r\nWPx/KvtPEkXPRxjUSSdhdht35Im1afnWUko=\r\n=BhgC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQWmOID39VBk9rBqjfsqi+ubnJMbX8rU0xl8zhDOJWoAIhAKLqpXSsc9wdHC+yeQOB4XXIV2Aprfl7CJ9CFgEf4R11"}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.7.1-alpha.4_1645812562927_0.2513754407845652"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.8.0":{"name":"@chanzuckerberg/eds-components","version":"0.8.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.8.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.17","@storybook/addon-essentials":"^6.4.17","@storybook/addon-interactions":"^6.4.17","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.17","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"gitHead":"b8433e9a2d90f1dbe491b3c332ac79997493f669","_id":"@chanzuckerberg/eds-components@0.8.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-ybs07/RGgIStzUWAVZ1EdeEL5sdlkmieufWt1tKoPjRExP8GZQLnMj3pDhK6dl+BzuMUVLHEPtnwgqpVH+9elA==","shasum":"a661e49b748da875c0029150ba61aa601d8c179e","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.8.0.tgz","fileCount":427,"unpackedSize":327689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRG8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7fA//Y/JGasBmwffalj3XLZnNrU5JBx3jIELFcK5LyyVOwyMapx5K\r\n1CzD6VxYgQq9bigaYWBqM/WMWydJEDV/yhPhTaf6/Uc4TgkQYr0Udt99ldXA\r\nGL1L2KrLMbv46YTELuVx9eYW8S5xn8vggW1/258tVa04qHqXcHWQ7MZx224b\r\nUE8C+hVpKdaKBXibqKceC0eKOC8/HCzVPHAZZmzBlX0llavt4H+invXWsXFD\r\n1Jl8zmI5FifuH08C8VQzGRkA7GOJHL0R7bzQmvbY3tjqIUF2u9cuBFyg5979\r\ngrUO0Pp6H5TDR0ch057wLpkFBrZXaXwvq5n62yRC29te/moyL5MjXQsbXdTs\r\nqomznVS7WXjgvgKOiXFph6wisOgWUt+xlBr7v5bzpqUHeW1RFuwgyRR3Gx0+\r\nSfXLL073J1ikQpoJvgY/MXAfKw0SQ8AWizRfevnvv1zDDfJ3bh2ORWeSxOIy\r\nj2iGRlyyDepyrr8X/fFa8tY9VgtzsrNyfmYyucdq+apCqICQrVlbMLnqg8QK\r\nLr//ob1X2NcqkUvv7ATdHxfiSobjQID/HdYdNhIfGcmqKAddxFvzLwgi8Nd/\r\nYQhXd/6/7Q+8rpLTzWWVVvyOF6CfCXuzz1J7EE+6F3NO62M8u5CRzU6+nfF9\r\n8lXRewxbE8CvwSHfXI8EvwZbq8GAGfmGcD0=\r\n=9em4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4uOBO9P5aPWuad8Bh80lg1qnoq1GuvSBeM8B+/SUTZwIhAP8xPXr3kIPN9lMmPU1vGNwx/PzvHLGUc2YRZE1535+U"}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.8.0_1646072252600_0.5895688489174844"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.8.1-alpha.0":{"name":"@chanzuckerberg/eds-components","version":"0.8.1-alpha.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.8.1-alpha.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.17","@storybook/addon-essentials":"^6.4.17","@storybook/addon-interactions":"^6.4.17","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.17","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.8","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"gitHead":"f5658f98d5e673102d65bd385fa81ca37e44f317","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","_id":"@chanzuckerberg/eds-components@0.8.1-alpha.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-G3mQPDK1hkKRZawcaoHXMuushkISGZZ+Tgps+j9NhG18CSOmQLiiMdH2JqLHacTCfszlcfpRua64sOctAOsAww==","shasum":"1d377421e5a0731c61243e95ce433fca4be13cfd","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.8.1-alpha.0.tgz","fileCount":427,"unpackedSize":327867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH8GFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZJRAAm1FffisJdCmommpOKuIeq5Qn+H3es4sGPxHeOnfW0ZzShF0J\r\n6JmYmbomM3auua7dPeXEplTvCc+6+w34XNLVV4lX8amEmaPfSu1c6aNbILL/\r\nPi9lR8DGw8q+EBcyR2QSau0Bn1x9qu5sXzsdjE5uslP7yFDYzthxNVF+5nLH\r\nrZbTnkOWZ3xwWcDxlv9JKnWqt2hiTiNKjhEACXeUBXnkmbmy/4F5lRLJddTz\r\nfGgEHhx3LI506oG2tisWE+hW9cuwqf2zCFARX90X8PHBfeNtn+vvWLKGVn93\r\nOakIp1JauCWEPkKchK2B8EV5phP/GL4i713ygS3e9sSAFVQdUNL2LfQr/b8R\r\nUn1a7O4okTGK8Lf+JIELDjxng4M18Vt41rwMgWVqHZEVqyjt+32lKzjO5Jjj\r\nZaxPnrqqC2BibBHgURUWNJ2cW37LuYXT3g0zSoJCIPXMNZIM5+apasYTcJjv\r\nKdvgTjdyFMrUyiAmXZoQsP5gJbxqeEfKt3mu2/K5VGWdeACk1hvW7/FFf4j1\r\nuqAuRD5JnK94v62TXrRD/j/usAXS4/kEOr2roYbmmj0gLts9QzfMkY3h7uy3\r\nFLmN9BPol/kF5jTZySDrEw4R0ettHGCKPkk5jkPMxYivi51q/IFUUYv5P7M3\r\nXyP6r41kPzlRIH9RubX26XJ7nfRRb32eb3k=\r\n=wE+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBDCCXEn5+WUetwc9bB4/zn+gqpl6OyI5qRiWVIUBLXFAiEAncYi9EV5RVG4eo63rZZWMUhsNzGpFopNTroLO5HW2og="}]},"_npmUser":{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.8.1-alpha.0_1646248325102_0.8466496376618666"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.8.1":{"name":"@chanzuckerberg/eds-components","version":"0.8.1","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.8.1","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.19","@storybook/addon-essentials":"^6.4.19","@storybook/addon-interactions":"^6.4.19","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.19","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.9","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"gitHead":"554d89a78ed1a1cf1f15d20908ae8a8a21e859bc","_id":"@chanzuckerberg/eds-components@0.8.1","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-EFiHKMJ2sd6wxIKWcHUux0+8sVER8SOQFpWz0lIRZzMvcX7PSugrV0QGcaNIKhZxYFh5VM7VGn2sRakCqNgdlA==","shasum":"d4668c3763874d68bc2d8056d8efcbfaac7287b3","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.8.1.tgz","fileCount":427,"unpackedSize":327851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIRZiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyFg/9GwAJhhR83vCAubx6vNFqSWZGKo5SMjXA1AtjqXf9vU8OfJFJ\r\n5m3H0W5Mm69ETfbxfzO0fgJ44aOgxoSGk/n1bgB837CZvBYyKPhpJBzstRFw\r\n1/PyJIwweVbBSxqvzXEy26MfzAn6DkxJV09K4gYrGByvc+wfyX0WoETT8dgF\r\nyKSSGOdFWHcvUVjpf9WfFLeZKcUcNQ7Jw3yCcySroj3FCiRLmmS2peSBBzMH\r\npngxFfMUdGRqTo+ygd0Qte6Pfqr7tb6PoBHiMJG7Z56jtNz+/xF7AIWKPnaJ\r\nZD0NtjN961r5H0T58y/LVF28Y2PRZdqJhiXDvt5Wf/CHDx+4/4HPr/FMOPiM\r\nbk4IkeelXWb7lyS3BzcrJLsIvXvsOvIUKCClAYPzsAXN1Uu9eQVvZLEk6Tk1\r\n/zIAjnxUCryYwRbqjK0QoZUijqrwTzqFlFg5TcTC5nhO4TBk3dt31NfPTKVa\r\nA7IlhLvb9oawtoJzehM38RFjhLIaKU6MaWekp8FPouhoSNXJdHybURrtlM/m\r\nUKRtpkA6CsJMCBX2I2K/YjeE3mKEaAfxxYnMBViGTWmsHNUoiWVM2ZF869/5\r\ntGtC1NPtQEffnh2m6SEbaH8RKKaJ48GD5cvdcPkA10iLKRLJ6IW8ItH6r/Kb\r\nCYLpxvE/edyE5sPfbwtJW/w4e9r17Dv8oXc=\r\n=Ecxb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/nunUDzdlYRV4WuHQ33lFYeKWKIpGT1IgD/wETX9fdQIhAMqI6sAzfIUXz7F3ZY8U+1+iHkO/foePyjKIqqGDsDKE"}]},"_npmUser":{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.8.1_1646335585942_0.8307313180532072"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.8.1-alpha.1":{"name":"@chanzuckerberg/eds-components","version":"0.8.1-alpha.1","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.8.1","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.19","@storybook/addon-essentials":"^6.4.19","@storybook/addon-interactions":"^6.4.19","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.19","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.9","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"types":"./lib/index.d.ts","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","gitHead":"b83ad8cf49b67019ba785c990ecd381db40c66b2","_id":"@chanzuckerberg/eds-components@0.8.1-alpha.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-vFpSc8oWr85va4y2ZGgogbRN5Ut2wcdgTFWuISgrNzrwPtrNPUGIWsGhSHfPsO67XEG5UJtvu3C1Ww4358er2w==","shasum":"9a96bd2b683bca459ce1870743fa80745de4b033","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.8.1-alpha.1.tgz","fileCount":426,"unpackedSize":326918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIj9PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYVBAAkbkgXm8pjMUSpGcT8F290PjCxHxE8yVvTRNn3jMOa8yMEWOl\r\nIFyw8jy+RIr228AHkXRjHYReXU3bLETarxZdBo8QmFJ2VthR8g4Q1fsHxWba\r\nO0odaVJI1rhkwNKkQfFDgV6b/mh2DaQ2mvFW5hloGoeI/0zuJBA/5bU6uspd\r\nx0HG/Hc8dJeUCwHLZ/V2Il2E2PhmqtWzYeXCUC0zqoaNWObAtx7geZD1P2E9\r\niiJ6LA1uQDxNt+BMEg4HeCUXcu+icbkhE8UgC6r5iQzYWlPuSbDHvMQ5VLvM\r\nGy3xdcnh9NvWtV1O9j+mRZmZEX43ap4UOG/WKSXnOq2PgnTueMtmAJBKhQzF\r\ndRIT8dckAS9/fV3OQbfFWuJ2GqG8Y8JJILmIbs7ITDXjDBQCvtygtfjTW+e+\r\n/eeE8WI2yA3kVLrDLVPuF9dpoXiqSh6BEQuJqPanvlEHx00s0ni8xcejalKG\r\nKTsrr86DDNSrevxdH8UXbETSBoWeJrzrnf8RaTyVgQwF7VeVQRDHxVKA2EyK\r\nJRoGDQKBYe4RR4n5EsnSE9Gbo2OvlBz9sL21+NbV1FSrg99jCqzPJfeeqNid\r\nDxqwhg/N8uTyT/P4/4bxS+o4GdYqheFsaNDCM1Yq+HAefn7DtWSvjC0GYAJ+\r\nlvr2QcDQ9s0apjQFlwEOxBBlwNcrfRQBLPk=\r\n=8FMs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1pvWzxHKR2x/ZzDrp/i5BNh4tkFeEJusGocDJ8dj7cAIhAJMycjDJfOIU/EFTyPekQqUlp1bMhH7eYAKjrxVdnwTd"}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.8.1-alpha.1_1646411599489_0.3769610082770276"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.9.0":{"name":"@chanzuckerberg/eds-components","version":"0.9.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.9.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@storybook/addon-a11y":"^6.4.19","@storybook/addon-essentials":"^6.4.19","@storybook/addon-interactions":"^6.4.19","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.19","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.9","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"gitHead":"223fbf119ef25c7feb71b9c56aa7a08185d72aff","_id":"@chanzuckerberg/eds-components@0.9.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-9xZj+OOtBxO/31XD4jrHhoWyoPzySzMwymFw4mIbOwvTThYEgmdXdlRx40pJk5o/DzznYt3Ea/DEgOtyJty+xg==","shasum":"5400b197d67530b429dc3fc94387fb860526d23e","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.9.0.tgz","fileCount":430,"unpackedSize":329355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ8zRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpRQ/+Ougd7lp0Yp/27xhloVNtOEVtegdaXJL3CRINkTFGMkdDPuZH\r\na3PTIYUZyfYTbj8p9Sil40zUARDSU2RoZTwLZmHEclgSg5oxIYfS1LmztUx7\r\nsNylShwvlCGW3B4ZEVrU1fSAUmnRyRv4wCWJI03VZ6BxrUMSLeBGxiGD8nl6\r\n4hhJBb2YlwhXv7D32loQtzyjmf96gN9b6Tz01vjbuDgLsrdDvv1NLLP0vbQo\r\n7cYLgP8ZYNZ6TturpaidGmBlCPUquDJ9152RLWBWZrfDmobTWXGy+GgFZQFL\r\n//1+xHjaKrF0+T42r/OlLKKkO4nh2Adpy+5Jr/6Dfz9gFj/Af59ZuruXAodr\r\n39q3GKsAkovt+FV1grj16phlgq8YL/xAxAZnXhfuaUKGCuGf47NKVd4J8PE7\r\n/NZQ+pA+jYGRptByto2w9aCDgTAfi3YtsYGFNA9T7ZwxKIRGRTNlia/upJho\r\n3RIviAGDOy7HvOS6m0B6UfcoVXF/6y4xtIexET51OE/559X2mEJ5nVrtNwHQ\r\nZtC6I/E3yIYSQFhjxArz1KhgE9ntpTEXKab4+Dftzc1V7Kvso3N5aB5RO7AZ\r\n/gTcSa8qOCsiWwWk97hzgJtOfYBKpF6qFWIGrP8WN9budRmUcSnM9K+Inffb\r\n6WHcTozzBMW5vgVugNl1ILgzn7p/TtsI6N0=\r\n=BX1d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbx7y8kUHa66uUlSpvHAUuG92QAJpYR+nUAjwLe7nMaAIhAPjMaiPkHaa+8d1UgVbgWW0+vH4XjzI4N0vhmWTxaaCm"}]},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"andrew+npm@huth.me"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.9.0_1646775505393_0.10456366953124951"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.9.1":{"name":"@chanzuckerberg/eds-components","version":"0.9.1","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.9.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@geometricpanda/storybook-addon-badges":"^0.2.1","@storybook/addon-a11y":"^6.4.19","@storybook/addon-essentials":"^6.4.19","@storybook/addon-interactions":"^6.4.19","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.19","@storybook/storybook-deployer":"^2.8.10","@storybook/testing-library":"^0.0.9","@storybook/testing-react":"^1.2.3","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"gitHead":"c6dc7704db0e8e568c1e1bcdf63ec69de00a5bb9","_id":"@chanzuckerberg/eds-components@0.9.1","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-GtxYu3MlFvFWI0c8NInUU5EH3fYhcwRMiZst1yZq2S1t1Iff0lcYW7SN0gJvCOmUiC/S5sc1F8Nn3tYiZxyuPw==","shasum":"3f1974919477b4dd5c4b9a7b83560d28fef30abc","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.9.1.tgz","fileCount":430,"unpackedSize":335109,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHhMQbTKH8I4bh++h3WV+SqqaSo8s73wkCW2gkFFXL1wIgc4r6OHv8j8Msee/g94DMP3YH9ZCYSTH5cyYhjwcYXD8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRIK4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcQA/9Ea9o0Yz8trLSRaNn4BO8be2FNa0B4CsXrLt1Zl3IFFUauMyU\r\nvt0SyvR6PcA3OzkvrlDQZB+vxoaPhlZAcUfdq8vEKACe1v90+qmc80i6eQaP\r\nOKKNyZP/XezVRee5ahyd+oCUPUyi/hMXCm2bUv2evKrCxCxKNy/+nlbzqAeA\r\nhr84ADHt6Yz2ThDkwtiA1O4boM7iKqGPZLL2jLQRaoSv+zdKAyDpbup5AgVe\r\nUdzQQnA47SjIq5JfihVF7AqarLMhiM+uUl4zyTDWNP3awoNuWb4YEQl5iqVH\r\nMoeZvKF7UbEMrlkK/aNTXwW9ZYMdT4uQ6DLGw22ROb4h2rbKdcl07L5NKsj9\r\ntrCipIfSeU5n4KjFajAhBtdO7WXGW4v6mYXIKh7SwZdv2rO2tZ/MjR+EKmm+\r\nXacmpbNFeTCLvx0eaBOpcJloWmJs6dGTgzlfuBSRk25ErklXkEv7E7WyDih/\r\nBW6q1XiZ4riZo22AfaZ6/8x4ERz68kT9zrAMT8Wo/hav+J2gCVOmk8Hcc3Ms\r\n97kH1F9UCoZ3OJk0lI7LVF1XH7fr0OUUc2W4+jmQp757eYWBPjr6D6daJjeG\r\nHE2OtORe+f5h9orSyUBKu7gAuCaPpzEWBk5MqHqw/KciWMxiyUWVBgkyp5un\r\nNhrhU2Tx7oae98sNYetC7jwUx8APiNy+7uU=\r\n=mJxZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anniehu","email":"anniehu4@gmail.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"npm@ahuth.mozmail.com"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.9.1_1648657080652_0.6405464813517898"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.9.1-alpha.0":{"name":"@chanzuckerberg/eds-components","version":"0.9.1-alpha.0","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.9.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@geometricpanda/storybook-addon-badges":"^0.2.1","@storybook/addon-a11y":"^6.4.20","@storybook/addon-essentials":"^6.4.20","@storybook/addon-interactions":"^6.4.20","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.20","@storybook/storybook-deployer":"^2.8.11","@storybook/testing-library":"^0.0.9","@storybook/testing-react":"^1.2.4","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"types":"./lib/index.d.ts","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md","gitHead":"c3c215186e0c02d869573f99fb7f9f9a8bb177ad","_id":"@chanzuckerberg/eds-components@0.9.1-alpha.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-O96HU3De6CpqmSgFzzl581dLse3Fhez7Z0AKGfAS6fghOkqrE+/xDTwgTy2lrohRUHYgLjs2XAawPLA8PTiIFA==","shasum":"24975271b338f8fb4eb0281213b8119f398efd64","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.9.1-alpha.0.tgz","fileCount":422,"unpackedSize":327845,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuyehF0XO/mVrttB40VkLGP/ETVrtmvYrHhXRdaYhQRAiEAm0ZfZNNAA5shTGJFrRiItikxkCJsd2xxnZpEa70Ja+A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUJ7iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFhA/7BiVobmubAh+Do3EhGcgArwaetNEgRUCpFWcj18P1RQtNti91\r\nzqKfuD/to7rMVvF3eWSPgCgOmZ05qgw4V9ob/h1hhmD6xrDed5c9dgNJ9df5\r\nZaXPzAvkM8XdqxGPOslJE/RC4W3hDpeDDJBJMhXI3XkDHbwxkCYwTKO1hdBF\r\nR0SfFripFjD5S6r93twyFPwssN3PXA79KkjkF8U964zt0+aBNWHiOt1EJXSI\r\nZZ2xsxXZdkZkMImmvRV/EyCt6LiULaIccv0sxy2Pi5jPwFb5U45f9U/58nTA\r\nLC4sb3rf0/ho3DjaTZFrfGqjYQwhhHIh7HlwI05aI7nEHeZTqVczi8qFCz+d\r\nR8eUkgGalW/AVd/FzfrwrPCeT6V++Ao/GDVL2BAOgFni0dUwCia7Ej7Fm4RS\r\nI2SP8FdBNf04v6c21egWPCNf7+4o+n3AAjNl0Xn2ECP09qWGNFtv2Y48ei22\r\nnVrxvC1Cn/LYiV8UhWuwNd/DHLFHksCvvLrkDotQVv7dbGpF1pUymj/ulwR3\r\nGZXJ0leoJHzI72D531he+B9FTbokBRkAPW1qSmYC3EHblW8I6DXyigpBoSsV\r\nO1WMQsbPxoviACtUeJEX2QO1h0QRSdutCHc79cd1eebSW4r8eRj4ji8EzVkp\r\ne8l/qJdJtvwaKrEHYtOU2R/Kcn0WiEWWZ6U=\r\n=R+P+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"npm@ahuth.mozmail.com"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.9.1-alpha.0_1649450722064_0.18406254254736454"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"},"0.9.2":{"name":"@chanzuckerberg/eds-components","version":"0.9.2","description":"React components for the education design system","keywords":["design system","components"],"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","license":"MIT","main":"lib/index.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"scripts":{"build":"yarn run build:clean && yarn run build:js && yarn run build:styles && yarn run build:finish","build:clean":"rm -rf lib/","build:finish":"rm -rf lib/storyUtils lib/**/*.spec.* lib/**/*.stories.*","build:js":"tsc","build:styles":"postcss \"src/**/*.css\" --dir lib/ --base src/ --verbose","build:watch":"yarn run build:js --watch","build:storybook":"build-storybook -o storybook-static","chromatic":"chromatic","deploy:docs":"storybook-to-ghpages --ci","prepack":"yarn run build","storybook":"start-storybook -p 6008","storybook:axe":"yarn run build:storybook && yarn run storybook:axeOnly","storybook:axeOnly":"axe-storybook --build-dir storybook-static","start":"yarn run storybook","test":"jest","test:ci":"yarn run test --ci --coverage && cat ./coverage/lcov.info | codecov","types":"tsc --noEmit"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"peerDependencies":{"react":">= 16.8.0"},"dependencies":{"@chanzuckerberg/eds-tokens":"^0.9.0","@headlessui/react":"^1.4.3","@tippyjs/react":"^4.2.5","clsx":"^1.1.1","react-uid":"^2.3.1"},"devDependencies":{"@chanzuckerberg/axe-storybook-testing":"^5.0.0","@chanzuckerberg/story-utils":"^3.0.4","@geometricpanda/storybook-addon-badges":"^0.2.1","@storybook/addon-a11y":"^6.4.20","@storybook/addon-essentials":"^6.4.20","@storybook/addon-interactions":"^6.4.20","@storybook/addon-postcss":"^2.0.0","@storybook/react":"^6.4.20","@storybook/storybook-deployer":"^2.8.11","@storybook/testing-library":"^0.0.9","@storybook/testing-react":"^1.2.4","@testing-library/jest-dom":"^5.16.1","@testing-library/react":"^12.1.2","@types/jest":"^27.4.0","@types/react":"^17.0.16","autoprefixer":"^10.4.2","axe-core":"^4.3.5","chromatic":"^6.4.3","codecov":"^3.8.3","flowgen":"^1.14.1","identity-obj-proxy":"^3.0.0","jest":"^27.4.7","postcss":"^8.4.6","postcss-cli":"^9.1.0","postcss-import":"^14.0.2","postcss-nested":"^5.0.6","react":"^16.14.0","react-dom":"^16.14.0","storybook-css-modules-preset":"^1.1.1","tailwindcss":"^2.2.19","ts-jest":"^27.1.3","typescript":"^4.5.5"},"gitHead":"43139061c3ca4bff2759bc5ed56735d2f79eef44","_id":"@chanzuckerberg/eds-components@0.9.2","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+arm64 (darwin)","dist":{"integrity":"sha512-QbzYoV8pDWaVJ7xDY5zYRatKY19KYeBLM1TWDzPHeKXpkhFUk2pkCn7k4rbwtJBu/+kYRN9pIFFywhKjHw1lyw==","shasum":"952004d5e271658c5d0b0fe8e07303ff349abf31","tarball":"https://registry.npmjs.org/@chanzuckerberg/eds-components/-/eds-components-0.9.2.tgz","fileCount":423,"unpackedSize":328981,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoLV+f8P/HUlYi821qKjia05rEvtBkUEjURPKTiizDigIgLy7Z7lSx69Kvm4Ikl8B5p8bYCEE8Fe3GmwWqQOYNQ/o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUKnWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAQg//ZzPL7Ay/nV5nUQE/jyFIABngYN3blF+wwzNSKBfP8+tRN1h2\r\nLYAR2uR/XCAKhzKLh0M25BaJ1if45bdekt4Q65RpQTER9G+PKs8GqMK6NnUj\r\nFsoAneDfv9tmuTOHn+iDAP6vFjtn3fTf9pWlSUbRUSHVeXuWLKKd7xzjtaO4\r\nqnW/0i0zVrUGWX+88b1ofaFr4NZ5NIZLRuoxs55GeDJW5ncK4hVlCFrYCWkM\r\nxaLnds1HsIhIDV/R5OWGhs6PdQEtWFusioFfBJ1QHO+3AjI8uL51/geJXjHj\r\nK44I+woBtDLomnOloRQbdB/WKjfyzn22Bbz+6HpUVNr/dgVckvtNbgh+AUkr\r\nRCaa6aejzIeS/R+/TRuW2Q8C/MD1jTyOYMTL/Yo1MojlWPAyeWDiA45fANXC\r\nSIrJrcWDueO9LGFuyoU+js/BenVHBdKtLtxwEqNhfhATOGeMnVLjKiCyWVqE\r\ngMS1L+oYhvLhe/tpXNMObToUZ6deUQKnuxPQkiCXa+pcb6NYREwqn0gztV4m\r\nRnUEUear3DD85Gt2uecGG/GFb0Bn1Qy5xjrSISu3edYSBoYWLkQSbOEGKv6d\r\nidNlkBOuoDLCjlWBdOvMoecdReTa0nXq3BztlG72V7F6D3nG0nSKd70/s7Hr\r\nO2/RHKCbly+S8UwI93jOSdMJaXi9wwgKVKY=\r\n=947v\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},"directories":{},"maintainers":[{"name":"drater","email":"drater@contractor.chanzuckerberg.com"},{"name":"jinlee93","email":"jin.lee@chanzuckerberg.com"},{"name":"edulop91","email":"edulop91@gmail.com"},{"name":"ahuth","email":"npm@ahuth.mozmail.com"},{"name":"anniehu","email":"anniehu4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eds-components_0.9.2_1649453526441_0.32064001400360365"},"_hasShrinkwrap":false,"deprecated":"Please use @chanzuckerberg/eds instead"}},"time":{"created":"2021-02-20T00:42:37.511Z","0.0.1-alpha.8":"2021-02-20T00:42:37.941Z","modified":"2023-04-06T19:03:54.335Z","0.0.1-alpha.9":"2021-02-24T17:37:17.928Z","0.0.1-alpha.10":"2021-03-29T17:49:06.658Z","0.0.1-alpha.11":"2021-04-13T21:23:37.185Z","0.0.1-alpha.12":"2021-04-22T21:42:36.027Z","0.0.1-alpha.13":"2021-06-09T20:08:03.129Z","0.0.1-alpha.14":"2021-07-08T21:19:31.010Z","0.0.1-alpha.15":"2021-07-23T16:27:05.166Z","0.1.0":"2021-08-02T21:14:20.836Z","0.1.1-alpha.0":"2021-08-05T16:29:01.697Z","0.1.1":"2021-08-05T20:22:12.540Z","0.1.2":"2021-08-06T16:01:27.962Z","0.1.3":"2021-08-11T15:17:05.447Z","0.1.4":"2021-08-19T21:06:11.446Z","0.1.5":"2021-08-25T19:16:33.656Z","0.2.0":"2021-09-10T19:13:51.602Z","0.2.1":"2021-09-15T19:22:26.531Z","0.3.0":"2021-09-22T20:54:27.138Z","0.4.0":"2021-10-08T21:29:47.361Z","0.4.1":"2021-10-14T17:00:11.865Z","0.4.2":"2021-10-22T19:04:30.517Z","0.4.3-alpha.0":"2021-11-01T19:37:11.870Z","0.4.3":"2021-11-04T22:49:45.125Z","0.4.4":"2021-11-05T18:43:08.323Z","0.4.5":"2021-11-09T02:12:39.104Z","0.4.6":"2021-11-18T01:24:11.886Z","0.4.7":"2021-12-01T23:08:26.081Z","0.4.8":"2021-12-03T17:19:03.782Z","0.4.9":"2021-12-09T18:40:24.699Z","0.4.10-alpha.0":"2021-12-17T02:02:57.243Z","0.4.10":"2022-01-10T16:38:58.997Z","0.5.0":"2022-01-19T22:01:41.599Z","0.5.1-alpha.0":"2022-01-21T17:54:52.698Z","0.5.1-alpha.1":"2022-01-21T19:33:19.526Z","0.5.1-alpha.2":"2022-01-21T22:59:27.510Z","0.5.1-alpha.3":"2022-01-24T23:47:49.133Z","0.5.1-alpha.4":"2022-01-25T19:18:36.018Z","0.5.1-alpha.5":"2022-01-25T20:24:06.887Z","0.6.0":"2022-01-26T19:21:17.653Z","0.7.0":"2022-01-27T16:54:48.819Z","0.7.1-alpha.0":"2022-02-19T20:08:27.440Z","0.7.1-alpha.1":"2022-02-19T21:05:51.159Z","0.7.1-alpha.2":"2022-02-19T21:35:44.292Z","0.7.1-alpha.3":"2022-02-19T21:42:12.608Z","0.7.1-alpha.4":"2022-02-25T18:09:23.360Z","0.8.0":"2022-02-28T18:17:32.861Z","0.8.1-alpha.0":"2022-03-02T19:12:05.303Z","0.8.1":"2022-03-03T19:26:26.111Z","0.8.1-alpha.1":"2022-03-04T16:33:19.625Z","0.9.0":"2022-03-08T21:38:25.592Z","0.9.1":"2022-03-30T16:18:00.847Z","0.9.1-alpha.0":"2022-04-08T20:45:22.311Z","0.9.2":"2022-04-08T21:32:06.636Z"},"maintainers":[{"email":"mail@andremalan.net","name":"andremalan"},{"email":"ademartini@chanzuckerberg.com","name":"ademartini-czi"},{"email":"jclothier@chanzuckerberg.com","name":"muggleborn"},{"email":"timothy@chanzuckerberg.com","name":"tzchang"},{"email":"booc0mtaco@gmail.com","name":"booc0mtaco"},{"email":"girish.patangay@chanzuckerberg.com","name":"girishczi"},{"email":"jin.lee@chanzuckerberg.com","name":"jinlee93"},{"email":"git@huth.me","name":"ahuth"},{"email":"anniehu4@gmail.com","name":"anniehu"}],"description":"React components for the education design system","homepage":"https://github.com/chanzuckerberg/edu-design-system/tree/main/packages/components","keywords":["design system","components"],"repository":{"type":"git","url":"git+https://github.com/chanzuckerberg/edu-design-system.git"},"author":{"name":"CZI","email":"edu-frontend-infra@chanzuckerberg.com"},"bugs":{"url":"https://github.com/chanzuckerberg/edu-design-system/issues"},"license":"MIT","readme":"# eds-components\n\nReact component library of the design system.\n\n## Setup\n\nFist install the package.\n\n```bash\n# via npm\nnpm install --save @chanzuckerberg/eds-components\n\n# or, if using Yarn\nyarn add @chanzuckerberg/eds-components\n```\n\nWe currently use Arimo as our base font. This package does not export it, so you will need to import this separately. We recommend importing from Google Fonts into a top-level CSS file:\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap\");\n```\n\nand setting up base font settings:\n\n```css\nhtml {\n font-size: 16px;\n\n /* or if using Tailwind:\n @apply text-base */\n}\n\nbody {\n font-family: Arimo, sans-serif;\n\n /* or if using Tailwind:\n @apply font-arimo */\n}\n```\n\n## Usage\n\nImport any of the components from this package\n\n```js\nimport { Heading } from \"@chanzuckerberg/eds-components\";\n```\n\nand then use them in your React components\n\n```jsx\n
\n Coffee!\n\n```\n\n## Flow types\n\nFor any component, run\n\n```bash\nyarn generateFlowTypes
\n```\n\nto get automatically generated flowtypes.\n\nWe use a combination of `flowgen` and common React mutations to get the best automatic types possible, but manual fixing may still be required. Thus, we recommend maintaining a `flow-typed` file with libdefs.\n\n```js\n// declare a module for each component\ndeclare module '@chanzuckerberg/eds-components/lib/' {\n ...\n}\n\n// re-declare each component from a root-level index\ndeclare module '@chanzuckerberg/eds-components' {\n declare export var : $Exports<\"@chanzuckerberg/eds-components/lib/\">;\n}\n```\n\nWhen translating your generated flow types to this `flow-typed` file, you will need to:\n\n- Update React type imports to follow `import type { ... } from \"react\"`\n- Update internal type imports to be from `\"@chanzuckerberg/eds-components/lib/...\"`\n- Update ForwardRef components. For example:\n\n```js\ndeclare var x: React.ForwardRefExoticComponent<{\n ...Props,\n ...React.RefAttributes,\n}>;\n```\n\nshould become:\n\n```js\nimport type { AbstractComponent } from \"react\";\ndeclare var x: AbstractComponent;\n```\n\n- Preserve exact-typed objects when possible. If you must make them inexact, add an explicit `...` at the end of the object.\n\n## Tailwind Utility Classes\nEDS Components is configured for TW utility class use in Storybook only. Please configure downstream Tailwind config purge to include app files if necessary.\n\nTailwind utility classes can be used with either `@apply` in CSS files such as \n```css\ndiv {\n @apply rounded border-2;\n /* border-radius: 0.25 rem;\n border-width: 2px; */\n}\n```\nor used directly as class names such as\n```jsx\n\n```\nUse the [docs](https://tailwindcss.com/docs) to search for appropriate classes.\n\n### Potential conflicts with other styling libraries (e.g. Bootstrap)\n\nIf you're also using styles from a separate library, conflicts may arise rarely between utility class names. Here are some conflicts we're aware of for **Bootstrap** specifically:\n - Most annoying, `.hidden`\n - Both Tailwind and Bootstrap have the same styling for `.hidden` but Bootstrap applies the `!important ` property, which can be annoying when trying to utilize Tailwind breakpoints, e.g.:\n ```html\n
\n ```\n - Where the expectation is `display: none ` for breakpoints smaller than 768px, `display: block `for 768px - 1023px, and `display: inline ` for >= 1024px. However since Bootstrap applies the `!important` property, all screen sizes show `display: none`.\n - This can be circumvented with the `@apply` directive and/or using custom CSS with regular media queries to scope styling into a different class name, e.g.:.\n ```jsx\n
\n ```\n ```css\n .responsive-display {\n display: none;\n @apply md:block lg:inline;\n /* or use traditional @media queries */\n }\n ```\n - `.invisible` and `.text-` alignment\n - These classes have the same styling in both Tailwind and Bootstrap, and therefore can be used without issues. Tailwind responsive states (such as breakpoints, hover, etc.) will have higher specificity so no issues will be caused there.\n - Other unfound conflicts\n - If the conflict is due to Bootstrap using `!important`, follow similar strategy above as `.hidden`.\n - Bootstrap [styling](https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap) and mentioned conflicts in [_utilities.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_utilities.scss#L46) and [_type.scss](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss#L90) for reference","readmeFilename":"README.md"}