{"_id":"@chakra-ui/system","_rev":"647-1b7c88d9e1d87422d56c27e5df1dd521","name":"@chakra-ui/system","dist-tags":{"canary":"0.0.0-canary-2021118164051","pr":"0.0.0-pr-202212011232","next":"2.0.0-next.4","next-dev":"0.0.0-next-dev-202241614737","latest":"2.6.2","dev":"0.0.0-dev-20231123223450"},"versions":{"1.0.0-next.0":{"name":"@chakra-ui/system","version":"1.0.0-next.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-next.0","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"94c7ff5b3fcab178d896d251bd9a0689fd1f6f6d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-next.0.tgz","fileCount":105,"integrity":"sha512-nKLCCZZBhkavvEJiQQ3vHPB4OMszIXeeMDocfmVEsWKM9r6f+cwLLdq0hWG/gMh2wLm1m3bmPnoYDbEKgvPToQ==","signatures":[{"sig":"MEQCIE/uGlcrsJroZFzG28bU5OLn6mpYXb84U8VJlgYdhrVwAiBcZWjUnoLrw/MuMOgMSgNKy3oyLqJrwX7D61xp3sDxGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7nTvCRA9TVsSAnZWagAAhr8P/js6VC6hdHo7VPRVtC/A\nWZN8RXRnW62yXELQMnFbGn3XHEo//srwOJNlNZQ8E7COqWY6zLiX2fBCyuSO\nXGv4xEo7yLA5m8RSqSAGrKF3HJAHQqpshcUudx0fryoDKJ5szqUZB6VazuTO\nhsICLfj05Wp/exgF5lIBm+Bz195ZCxAjrapm8ZyKf+dxgErARfm0bzdDVZxG\ngNBFT2sNukaBfBUhdBKQ5tHsm6snSEhM0IN2dPtNlqcmfVyJlEyCO1rEtncg\njS0L1l/sW3xkZXSiod1yEupd9cRUR9f+I2Bt4O6RjzuH4zBFCgUFPTqFZL3y\nMm0EV45K6TOfiVJoAdb/LSuDNkgVAJ8eWwoYUkcmcKTheazKrmyOFjhblYJE\ninVWUwrbq2aXoOP/u67n3Q3UM9qEDfkJ0cjfdPgSdkTaRArKb60w/RONd77y\nvP4i0sKPU3ZJVdfmNYcWj+83aTeYvI8OqB5bhztTKWQZBVwLhl0K2OWI8pRk\nYGrEI6IzmCNB5eGWtA7Kt3s0myhR88Mmi1EPENDeU6KY5wxtFiTIjgUCWYn7\n9oLy2RLF3UzDZ3o4HMDG9ABfmz7kzX0tH/rJbklCbT8Iy1XSXtj1MkcK/Ksm\nIY3MftBYNSSQ4l7H9tfUkdKcv5EoIw4rtm2YRhNqc/KUdfCcIVODXgN4gcjL\n+Wpf\r\n=rO6X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"ce6fe489afaddba502a2611f1fb1dcedb991325b","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@emotion/core":"10.0.28","@chakra-ui/css":"^1.0.0-next.0","@chakra-ui/utils":"^1.0.0-next.0","@chakra-ui/parser":"^1.0.0-next.0","@chakra-ui/css-reset":"^1.0.0-next.0","@chakra-ui/color-mode":"^1.0.0-next.0","@emotion/is-prop-valid":"0.8.8","hoist-non-react-statics":"3.3.2","@types/hoist-non-react-statics":"3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"framer-motion":"1.11.1"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-next.0_1592685807259_0.5496017519237408","host":"s3://npm-registry-packages"}},"1.0.0-next.1":{"name":"@chakra-ui/system","version":"1.0.0-next.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-next.1","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"96b1e77151c2b68f50ea8dac780cb53976050133","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-next.1.tgz","fileCount":106,"integrity":"sha512-iastf0oPrNPrWOLkSxCW6Ij0hG4Owjo8uNhA+iMQ0C8YCxX46TZlTyCTAc7mtzEN4CdRdRstNHhfCkFWDr4dhw==","signatures":[{"sig":"MEUCIQDUz6/HGq7Ocu0qmsTSy6FbEfyhC7UvKVAa8b+LBWW12QIgKFfiTqhd0mmt0Ts8DNUdhx/wW4Diw1MXunD2TgnSqH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ytTCRA9TVsSAnZWagAA0hcP/RKbs+qTRKt3N8GblMHn\nyJQFFM8/Dn14+/ChCkWZDA33cOeTxQUnm2zI6YgTeg20xR51GCEhu8UPde/L\nsHwwKVB/GwKSw5LUJag+wXdZlvfwG22rGreIUxbsYV+3ENQV4696Z4/lKRqI\ncqwEL7k0oVZxziDGlaskY7faVzyRAEFxTiMFzf1TOFqWfN0J17I3kTU2y/dP\nLepNNMf5uKKTyReJfiN6A2Hajoy4ULkJa4QB/CQsfMabeEOcl2x3EmF2+1B9\nSpm3xbDJGKpK2L0LCzLnI6oP0mZQye25xdjJfboIS4T8hWXw5brmqoYrUBH0\nDrSMpVPXxVlnkKCosHiEOkOFNswhSogDoq97lKhROAwOA4ocYyOA6Ap9kQNq\n9Ku4BIzT0QmTtGUR2ENkeeU3ZRWxIUXjBKZj7uZ5DZ5y6eaYVVjZgux3R34W\nV2G81VZoO0Np/i/YBG9dCbKWTv2cfq3mkkUOA9uTcEjTOFsk/3+UeBO8ToBh\nkoDNlCLUfnBHGCsvT8vGSkWfQtyw6FaXxmiweI29mUCK0A15IKslhvMaSvTl\n6U1LFBBtEd6XFBwze3BPvcB1/j1psGqITGPmbsXo0HtLa8ogCxlfClwgbiNx\nbyjtjQ1wT11rOO+F9BrHqOrh6qpOrEwgYi58/2RGJHnF4/BtSq9TM+BsOeAa\nTLJj\r\n=irM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"cabbf345518d70d446bf95410872f1a0c947ccd5","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@emotion/core":"10.0.28","@chakra-ui/css":"^1.0.0-next.1","@chakra-ui/utils":"^1.0.0-next.1","@chakra-ui/parser":"^1.0.0-next.1","@chakra-ui/css-reset":"^1.0.0-next.1","@chakra-ui/color-mode":"^1.0.0-next.1","@emotion/is-prop-valid":"0.8.8","hoist-non-react-statics":"3.3.2","@types/hoist-non-react-statics":"3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"framer-motion":"1.11.1"},"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-next.1_1592732498851_0.9676908271796048","host":"s3://npm-registry-packages"}},"1.0.0-next.2":{"name":"@chakra-ui/system","version":"1.0.0-next.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-next.2","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c768312962bf3dd99058cc67bace2bf23cf09825","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-next.2.tgz","fileCount":106,"integrity":"sha512-Wkp3Ycsu2e6xqIU4LPnG9kF9DQMas5tMys9oesBFEAciBkX2TnIbu9JdJoCCPP7t44wV3T5S92WDOXP5GfbKkw==","signatures":[{"sig":"MEUCIHhgbjNDgQXWAvFlxyPVq082hQLBAGTMu8iETLZ8ud64AiEA3yRGz5PkSQgmHcTEjfuTHbMOqTwcaiNh3fDdnfaJ8g0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":197233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8M/4CRA9TVsSAnZWagAAMkoP+wQZGNd4b+PxNc2ckJFx\nzJHQQNHhwYJGNStp3XihUFKqLMoUIXf3lVUe3qjqObrYOCoKLygwhVncyudP\nCqSaVDQYxm0W2un6EiZHvSz/+dOAhq03wneOKXve0frEF7A35hGEEZtMIGQ2\nBhmWXrObGZvaaEhivYJZ0dZi2IPKYKy+qwkUAJr/cNP8aMjBnW+7COf9l5lG\nsCIAJtygBHQk9ywrK13I4Co1Cl9TXUdAe2F7TFiS8qVf9zEHW5goeeKn9iVI\n3dAe4uKlq+vqoy3T8yc+fZyY/JNx+P0FwF8XnVbIETDG7WLdgr7Q6K8s3BtX\n/CB/AUgoz1w6gHbgkGlxb7kvcQkkRCDtvS98bkZL6zayXyo9+dxNkgj+aBj3\nDhuAs7O/EIjPSiG6k5Z2W/7q+uVLuyyF1xyYMsXZ8fzk/nQeXWqge/q5w2JN\nPSQuKNR+3IFsBbWalq4s0nKmUMsHkDhTkWpfDzuXRGQp6uMdluyTrsqC0sDV\n8bU5SO5TgotPjg/J6/4MCFUsB/nrpL8zCOEYFxHKLIdXcNFrydWOJQCVbA41\nZCGJTILpPya7uTyT37xMPIa1YhAtXi9oQDH+v2UTvy/HjmHmkqPBPPgqY5Ww\nw/lZXnXyhamRoPLFONOraJJsElS3/XLp/BPKAq45t0544nuhehuh+I1+ebb5\nin6m\r\n=l7lg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"c5b51e43e9dff400f8bba7da7ffd135f5d33628b","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.3.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"_nodeVersion":"14.3.0","dependencies":{"@emotion/core":"10.0.28","@chakra-ui/css":"^1.0.0-next.2","@chakra-ui/utils":"^1.0.0-next.2","@chakra-ui/parser":"^1.0.0-next.2","@chakra-ui/css-reset":"^1.0.0-next.2","@chakra-ui/color-mode":"^1.0.0-next.2","@emotion/is-prop-valid":"0.8.8","hoist-non-react-statics":"3.3.2","@types/hoist-non-react-statics":"3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-next.2_1592840184152_0.48563186553228777","host":"s3://npm-registry-packages"}},"1.0.0-next.3":{"name":"@chakra-ui/system","version":"1.0.0-next.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-next.3","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2424ccdad1b73b53e155a529c552606bea9fa707","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-next.3.tgz","fileCount":125,"integrity":"sha512-SlAoxdP3/MP+v3hN5RvpfN7wx2fSwJRn2leOgWgxmtMqTCNvLPRyKtQI8u1G1/2qbR+1T8SxW3Ib0Nety0bamg==","signatures":[{"sig":"MEUCIGj3YrxVNObKu9S7qh/PCYR71pd5ViaeV5zr0Pa6lI2nAiEAnexUaOlXVEcPirI/xhIrlBR0c2TrTZcMI+i5TPGwkIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+Mb4CRA9TVsSAnZWagAA78oP/0Ct6CzKUzcGlNasKzM/\nZQSdfCY/lrJDRPG16fC6EBUlH3ckpNmwHDfMvvQIyINooMDgoi6iOIR0Cm1/\nBHEkTINUySDR6UPy64TJyOy4J0BwRvveUOk67V2VKFVbinyBm74BkaosH02Z\nXuEaxfXlMmO0zwVQ5LAs7yBNLosV05g6DVrDMzpRGuYSVcDJShPZLzFES8kX\niDGBvT6DTg2n0PH/zNNVwM39q5tpy1PMM5mGKanlbRWTFXMYc3Oo1GDcT1QN\nXjJagUF3WHyX6Iamo/gyd0Qaom9sUW/sdxTP2YCaNGEDbWWxHKWsL6pOLHLa\nC1GSCWjdZi2YWXeO6cfk5H8PwYtpY6iA+b/yDsuqlGilGItju4NgXDrXa96r\n6XVgUofwuhZMQSIZqs/BYoh3WhyHTmb/qmshCVKJlW4qs7h4MgyesNHu8ur2\nzRzzS92fb76KyLHOKCtWA0LcvTQNVqYMKvIx27Bd4Ohcoxg0tkuU2nCrQXsX\nEPMxHGQhyhdTzvbhsLA0Ijef/gmfJif2Ma5EBTNNzkZHK68x90lbJEsCxAyQ\nMCKNY0zc42wubA4d/9aoOMb2vv6uvYCrq0Lk6uWWTNXDG4+5rjecvYMFpZtR\ns/n9GJ0VLultSGyl5xB15ccwNJB1J41GrHZFJC0ilTgcztX0MNSPC6KUTjME\nK3hx\r\n=R9NF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","gitHead":"d31ba9c35993985f49da4885dd47ab8dab49cdd1","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@emotion/core":"10.0.28","@chakra-ui/css":"^1.0.0-next.3","@chakra-ui/utils":"^1.0.0-next.3","@chakra-ui/parser":"^1.0.0-next.3","@chakra-ui/css-reset":"^1.0.0-next.3","@chakra-ui/color-mode":"^1.0.0-next.3","@emotion/is-prop-valid":"0.8.8","hoist-non-react-statics":"3.3.2","@types/hoist-non-react-statics":"3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-next.3_1593362167695_0.7209261845049322","host":"s3://npm-registry-packages"}},"1.0.0-next.4":{"name":"@chakra-ui/system","version":"1.0.0-next.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-next.4","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4b90ecb2493b41a2583666ee9a2bf3704d7e1079","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-next.4.tgz","fileCount":125,"integrity":"sha512-pC9LGN/ANKVijm3T2zJ3t0Pgnw9emho6DCgasQR+rtvAmLmTLTcV/Soc25Z113zLbe6pnaeM0jwazkT+IGMO5A==","signatures":[{"sig":"MEYCIQDVliDAVEQmHrKKqRkPj5lZRVIlxrhNSU25kMHvvBcBoAIhAJcixZ1oBqRwzBnf3/zPLO4dsIiF0oWrJ0XsYPPlrvnu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/MsiCRA9TVsSAnZWagAAki4P/1QqZivYRkdsON908juU\nyuboPwOyenoeplAbnuRa3/HfkuJgwmhLdHpddpihy8qJtUziuJghx2XCLy/I\nsL8zctWJ4ZHUtxWgX7CI/2YmVMGdoprRfsOsGN6pkDlkVDINp9ewpjx+zx1E\nVweRJF3ee/8ZkG0Fa1dSWustN8BdUhZ+dpLRZhbo1pt5aWoL52RHOLrdmc3b\nIlQWgdIFk6QSUSJMKE5+CRFAZuueDW7+9yTMJJ3j6YAmlesM5P9ofbi/imu6\nFB/gnL+mjTNi6Yoyo/JUSu+1xpIwgy/6Gg2OIPUkGoNd9CFetUQztocQNFga\nVgYDz8F7pBbMEwWcPkPm5AtNioZSsTi56Cxap8J/1XW9BZpj9BoNOVQNabbz\ntWdIQFyEZjK/jqSWGo20Je2aALCI8m6yhS7NfMFjOw6uSccnMP6sHAnn1dj8\nFJ02PcQspTwXwgakqirvY2ZzGuHgjOt1D5NVGYRpbZZeTD+eyXwPgl8Gw+3T\n/qpGTl1H7IhT9YRoH5A9UDfZ8rbPx3vFoRmcxDPi2Cj84opZqdDHB02Xyfhv\njeOOnH26uouRwpwq9KIUhFlyvX/PWId5kSxB4DgfVuf4GxvQWUlBBgxq+FOQ\nO8pIMJ243l5uAdcnKCi9rh7URa9la9RHAvv2ulx6RTYSzmlCmEe4kEVh9R+W\nxaD4\r\n=N8Va\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@emotion/core":"10.0.28","@chakra-ui/css":"^1.0.0-next.4","@chakra-ui/utils":"^1.0.0-next.4","@chakra-ui/parser":"^1.0.0-next.4","@chakra-ui/css-reset":"^1.0.0-next.4","@chakra-ui/color-mode":"^1.0.0-next.4","@emotion/is-prop-valid":"0.8.8","hoist-non-react-statics":"3.3.2","@types/hoist-non-react-statics":"3.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-next.4_1593625378482_0.3991805160643158","host":"s3://npm-registry-packages"}},"1.0.0-next.5":{"name":"@chakra-ui/system","version":"1.0.0-next.5","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-next.5","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c5c439145c9b606edcf039dbc85c489edbc3e1a7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-next.5.tgz","fileCount":68,"integrity":"sha512-9z7VtejAw1mEF+yVc0f8Ex0MAKROWOoVQpQ99pgTN7gsd0NBieKx/m8OmvPXy/BlIpl/cER3uczsc3yRl/7NMw==","signatures":[{"sig":"MEQCIA0UaNhsHhU0HWGMHKMPvKE6UHLudXYIvhoN3PjVb3f4AiBOoRhEuGYlZS46JIFX+xIf5QnkjWnPlbsiiuIyrL61Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":139695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDtxYCRA9TVsSAnZWagAAaCkP/0Si4512uFTTNzo6A+WA\nbat0lrKHjN3CCaLAAkxyYxhQzcOJChHkuyyDNm1K40I4BYQxzq61bkzRYbbJ\nGp5JPrMgFbDpFNciEDmY8BaDPq1zJtR9AQWxX2euRQa36dMGaiXLOvvDZRDT\nUz7sw8dkJE9vrMlQTOkWgdC38viQb9W6AZiNKOoohaZmbMoQAHtGnCtOThRT\nhKFNXdwicpQgssbHBsA1dof6Oaab41ugqEg3EDVUwA7PUE2kWr2wnBRqoY23\njwUtpZcYjvHvEZoZIKF4o8XqoVnWY9lpzAVZ3j49eOQF+tC2vXBDTDTksdO/\n5cFRzqyhesNMpacJbhcKtAuyMpkrOQrwRicq33LFdxBeb5+LMvaBXjxLTg9B\nwJ0r0pVVBtFtkDq6245hNTWWr3WhoQDl5nY+bZU+ERP7mqsd/6JwCN5x9Weu\nNavue92pxU3u7VLcT48bkFMx0MMF4UXHmQvm9Kgq5/w+/YW9sOEFY8oDE6gx\nN9gpPweUERRNrH1Ejd0WdLGL53JsYxy5+TkswxTB5jWAA0DAffe+y81Iy/HL\nxPPFMItbqZUkPQSEfhXT5jP2EHWX11/B28he4U4mhVn8Ili3cJi9L+6MlzvU\nc9ioiNAzykwbWBfRPfz5F0lE7e/Wfd0ZYZ3tQ/sPxcb+MkcQ5Jf/lyN+nMg4\nu2Kx\r\n=kS+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationMap --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@chakra-ui/utils":"^1.0.0-next.5","@chakra-ui/color-mode":"^1.0.0-next.5","@emotion/is-prop-valid":"0.8.8","@chakra-ui/styled-system":"^1.0.0-next.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-next.5_1594809432024_0.662823596629009","host":"s3://npm-registry-packages"}},"1.0.0-next.6":{"name":"@chakra-ui/system","version":"1.0.0-next.6","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-next.6","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f6779fbff5099b25b44903943cd909e8113d0aa4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-next.6.tgz","fileCount":49,"integrity":"sha512-bjRTuhcgqMYkpppDN/4wVV+b0PtsxvSFBrWbamcFWhaf4QHJh/u0Qv1qglkVhOz1bnDM96NZkwYWLof2KMTEqw==","signatures":[{"sig":"MEYCIQDyWKeLONMC2KPcGcll14r4fAIaz+2pmu97kimx6zTsyQIhAN8qhBadWcQC4LaT9jNccKfCikC8qXq2rHX8X/sios9t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":109128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDyJHCRA9TVsSAnZWagAA534P/20SnQGcm7+LBLZR487o\nLQhc/jme3nkejmWZVtxKb3U4cRp7UPEi7IOgdykCQ2WnntWxbjk+ZGAqaNPG\njLLrcXy31vS3Oa2k/AhZ9AfFT3tivmhxM0E0OoiJg0flthKwAaMUIjgzorEv\n+BsDrPo+ZsrcZydZuPRfQ8h1iApYPZoHzDtKZ17HwAnHA9udd3LEuIYx0Pr8\npQ7eL/QOZcMSj5/bjGjNNcWTHoQY8HDjieLRhRWrEgMjv3XzuVs6lov1wHKE\nD5aJUlFvOlCdlmdKWyzZVT0ZecAOCF9jIbhT7q+2y/3QzdLq62TGgWgXlsdk\nGr7ZUYcz4SQ/INiDN4LnkhuYU2xiUGCUa2e2z5kwVUsE1sFd5r+c2XQB7F/I\n1m3MOysx+qvKcPRY0mA/JjmwdYFTKrMwWNn9vqpt9pn6+F6nbk0KB0Hoxa5w\nEIOdQZgBvGKVOlFDfeAuIAJlbtufRIl2NZI4Oa3BeZC4IhGO5VuXXGhLJJ34\nacUtFj/zpHwiQlmnPLUSZjcXeK8h0InPxJ7zwC94bIYu9ykrDdQbQ64v7P4j\nFSrZ8bqRirEdNcp3CvDYb794aBw7K0GLPHIhyu+zQKSJPDmkWpwbixGvw6W8\nwDvq4+dprb+trXVY/tnE0ARam67OH7t/dTku6lWIuwVXGU/xN5aLZP97d8Ug\n+sJp\r\n=GWqT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"72eeca4ba3fc6e7d8845b0d283a03cb6ec384a50","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@chakra-ui/utils":"^1.0.0-next.6","@chakra-ui/color-mode":"^1.0.0-next.6","@emotion/is-prop-valid":"0.8.8","@chakra-ui/styled-system":"^1.0.0-next.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-next.6_1594827334944_0.72154733659698","host":"s3://npm-registry-packages"}},"1.0.0-next.7":{"name":"@chakra-ui/system","version":"1.0.0-next.7","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-next.7","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"749b473b952b79de7c1d48006c68182b8c66c677","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-next.7.tgz","fileCount":59,"integrity":"sha512-7cOQLgGW8p32YXJFgEI3Ka6380ej/Qjc9Are459YPsGd8C6Spch5HvffaSfTffC+WDcmP9PVhglqjZu8iIPugw==","signatures":[{"sig":"MEYCIQDax4kENn8ywmd+POdC+NH83FSy9S6pLM4hDn0TxEreLwIhAM9Jp+yP4NjlUOWlUUYQJ1+6DJyoZoV+FAREkjthoQXH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHX1YCRA9TVsSAnZWagAASYIP/jZ9/9zdDojI5Q2JCcUr\n18FfzIt2qu1uhwmngwmgFywZyZAcua+wFOZEmotQQ6Fbz/oSdslEFuejdt8A\nIVK/oMDmB51TEokvk1QL3lPMrvXqKaSCK7dfMTxxitre7f69OW2N1AcPYbwa\nWlANI/XI05hCE06+wSKMRWQAIvnKGVT27iZjKBZHgIHK+vIF3M6iMWyHoOhc\nvYdkn3olzNemVwqe2Iawhs/IUxF38ARRqMIKi5VaW/ThDaIIJbHpS78AbL0j\n0ICkYwzFPFwTg2h+qeYzmszKGqVu8iYW7rSVhf2nK0QLpJvnwlmbv8b+JK5W\n++X97cHWiJ6fZVNkVEY3bVIdRoD4FJw3ZZby8gA+XLTC4q2MN4gW5w1uH1Gm\nnaBe/hLXNWxtzmTRse7TrHSrkRrO0/I+eNe/cchCmaXKp4k7PvLc5k39rLKR\nnrA786RewZcst836MK5gINGgdJjOCnAGGSrhXUSrGId+oqpFuaB88sJ8yCqY\nkNevQI11Xf51VjWBRuQwyXBc1fZWMhVlxgGCiL8VSnRqranOSqWK8ON1qEaC\nL/cU4bMBGT2jqkZTGA88p5zzPBY1PgGbM7J8SdDAGPDS/3DzqsJlFLQRP6j5\np+nN8oDrMH6r1m5ykAT1Jkxwc/EnK5OS6mRi2hLyF1bsp5gE/acf8mUUamnY\nIleK\r\n=WCkM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"3dcabd8c7e21b32ae1b61485588f70370c4e626f","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@chakra-ui/utils":"^1.0.0-next.7","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"^1.0.0-next.7","@emotion/is-prop-valid":"0.8.8","@chakra-ui/styled-system":"^1.0.0-next.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-next.7_1595768152596_0.19518153022109574","host":"s3://npm-registry-packages"}},"1.0.0-rc.0":{"name":"@chakra-ui/system","version":"1.0.0-rc.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.0","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0ec6f80e7ceddb13026d4aaea2ebab8bec30eb56","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.0.tgz","fileCount":59,"integrity":"sha512-Qg6gvJ5OwjoIwXJt0BVLvvY5z51IpYI7KVRi/B031nY4th/JFnD1jBqTh19+qCAFRuizm/D3F9/tViChR6JJrQ==","signatures":[{"sig":"MEUCIQDoLj5/TfTPajwUMajZNShXJRc5akvEudFfMaiNspE7zgIgaaZLbNJg5JrkSIFCJpX8q2vl7f8bdgeD20iwKfHWSyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHagPCRA9TVsSAnZWagAAJPwQAJDPqRoGjSv5sX0+/Zqd\n1ef2gWoczn09u/ArFhdp+FGGNe7utFW5XE28GxWLPUxjTJc8RHVmQAN0OAya\nuSlG/r2sXJ+aDnRC+ABgrJwBWMi9RUD4gBxujQPLU++FyUdNtf2GnN5FHbBH\nXNt6AR7y+gjs1h0p4EaHEzWbbsbpWPSL7qz1d0mSPnoPWSvFJY4JEyKxeziJ\nPpSDoyXTWkczDyJ0WSbRC6k0Otgy28hFcfB5Goi5t/lKUygKz6ZkWeQN9lDR\npkVnWuUIz7U/3i2OqnAP8sfdM2rx+sEW1hMnBHdQ18fOf+p52N4nrHOqErJj\nH/cZ+NSUw6WLTWZvgoRZ6HP/SDhprkDObEcDj58usLxfI5X+RLVptoqxSka7\nXmEm45s82HoT+bc8Gs0EpRiCr3RVjOCYf/GTjAJrjYvL4dqlpmLVKpEAWjDY\nOM7ZJ9MwWTa9CmwaTzBk3q+gwHY7XnsshZ6UEop/UJoBF8zafGXwSj25UeGs\nZ9BIXo2LjGB6XpZqr1WoRbgxpe01nI9zataqXRauUD82ncLRgdFQM/xOcRM9\nJ8SyEtJOpcxlACGWlYzNjRpASq4l+tO/QpWkf86uwrB4JDWJZp9kt7Xvbtmu\nsWxXM+OPOnTEYz6UTgvenj7YhMMJOxE2lHs4ig8HBiIo1W37AouEdn8jkZY+\nJISr\r\n=rgY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"60392008d42867da38211687e2491f02da9975a9","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.7.0+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.7.0","dependencies":{"@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0-rc.0","@emotion/is-prop-valid":"0.8.8","@chakra-ui/styled-system":"1.0.0-rc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.0_1595779086741_0.4315820681321354","host":"s3://npm-registry-packages"}},"1.0.0-rc.1":{"name":"@chakra-ui/system","version":"1.0.0-rc.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.1","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"935c80518d0ca6d9e4e071751c6b1a16aea3d825","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.1.tgz","fileCount":64,"integrity":"sha512-93V3vfHC4xdxeaCi+ybQY8WHprInFxxfWjfl2vyXHF1UVvpbZqjAvpyR/UJqAEUjE1v09G4nKUi5oMEJWmtSpQ==","signatures":[{"sig":"MEYCIQCdsp7+cJVyCTTmIJt7Sy+jQX4nAnSEDYJf02erDbLHWwIhAO8FDpHiLmyxg3V9hdoMPaEcvYT9nwzC7AdfnWkutBQn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHLVCRA9TVsSAnZWagAAPccP/R8zyo9tCtEw1HMemPl1\nLcssQSHcu5k3X8CfuTfh3Op/M5C0xrf164NnVbk4vK5EyzygHsRWcKlEx1+w\n7oiwR0uyTcWQXUrCvakVytKit0igAbxPK6DTp0wbIAQ97qtvLnSxnxCgQsZQ\nfhWRRXKsiiyWETYj/nyNFQ1TISlWm/RJELQkgGnRYh01RZH8IkCx0Z/sR97w\nc2j141KY7/vkTl3BCCvnEQpLBAbP178jGo8vR9twzgefQGPcHCctUQ8NIYI/\nX9F1xNvQbpB7LRoSlsc2jGNiHXt8IB7N8M65ZkTG9IxtKnvNXJjGzX4uJTsO\nPwPe/xelqUdZLR8YK/G1QxFqpaK/2KRb2g6/jZ4w5vmeWbMcnJUAUm87yUQx\nXUxrS7OtDfgi7MpPkMQDhd4nQjTpxon6swS9BSB35mL5nBUBVcGtYYzwCDic\nv6I+QfXUMUvgw6cyBVzAcNmsVUHbDoNe1F4oBvK4EpkNT2BRQhnsGfVUJ99T\nS1VRKEWsujSxDjI5jKVt4Fp5lMV7i3BEPpumk3G8L8HaYBf8uhKqKFsqEY3V\nKiIzk+VQHRjPBfi8NfyXqXEtBDIq3DxGkXnaUE7X8f2idgTtabjUsG+DyXy4\nRWxr6cZp20+Lf5fLXdYGIpVOiNNveW083k8iRZ01vEe5GoufyUwLzmy5HWfe\nLkav\r\n=NaB+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e0470c73a9f6be24525dc5458d6fb157096b5ae3","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"with-heart","email":"mark@chanchan.io"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.11.1+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.11.1","dependencies":{"@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.1","@chakra-ui/portal":"1.0.0-rc.1","react-fast-compare":"3.2.0","@chakra-ui/css-reset":"1.0.0-rc.1","@chakra-ui/color-mode":"1.0.0-rc.1","@emotion/is-prop-valid":"0.8.8","@chakra-ui/styled-system":"1.0.0-rc.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.1_1596748501186_0.6339431393187618","host":"s3://npm-registry-packages"}},"1.0.0-rc.2":{"name":"@chakra-ui/system","version":"1.0.0-rc.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.2","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9e5c95c22f50a3d7fb11db38880a5aa17b905917","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.2.tgz","fileCount":64,"integrity":"sha512-rwOy1bGIZlmzgMNtcslsyts65QiSlwgfronlpN7iWDmmjtZ5XM1lyQH6hqzWzRo0M2i+JDpzmkOxEegJDVI2zQ==","signatures":[{"sig":"MEYCIQDh8gzQkcZAq7yuuMHXu9rabL0uCA4qERxeyzs0h498oQIhALh3lu3TWEqlupmJOmvQGX6m/28Giw9BfbFNoyIDPq4W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfL97QCRA9TVsSAnZWagAADEIP/3GCDIgo6shA29rP5QHL\n5eYU5oIcY+lmg+LjegVmKQTarq0mA7Lp+Pwwq9kqRzaMpTsJRZla4l7hUySa\nLt0yuRZCXwQ0KkvPEvRJMsVa3c5l7P3EdEWHu+i5Rr1NOoc1V6ajynV9/f7V\nmmMbOyLJr7TabSYeutNAYa5+GZwzLU1ClhJTgBP6d8ZWc3d8urTGTqqrGZvs\nfkmUZi1HKUSxwuwa9pon2f/b+W3/ryxlXUGqHZY/dUolqEyzo4F/NVfw3pCJ\nnHuKV10ha3NNTG6iMZLzFunPlM0QjmEmVsHUAm8UBmIur2yMVprXEmI5ZNJL\nopffYnjWDEOEKjEmvtP/cknpc/QLjkMkeH4EWeQWxgW4BO0L9WRCSdaFdRIs\nH6QqUDquyKA5zI+4rCu6KV938xllx0b7qjCZWA+iJ/3JH0u8ElRfDbE+AXMW\nRM6C/ok3EfiBxizQ7II7y7EuIC11NRyz6mNOWYsrXDOcuwkNA43waFG/Gmf/\ntRyt1LwY1csgkf4QdWwqrGxSIjiNKhPcP/w7gIG7UzhsvArGHbm2P4T/Czh0\nTdXRezBggYi/H4Ak/FVYtVEh14sKNEvLqhQsAYE7tGy7bDI5C627JAePyYNA\nW6sYsjxOMFXmA+W1PTQ1BOQcJ0OF+3/240clwk4V6a3lZiW34vbjKXv8jxn9\nJeWf\r\n=YAJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"c0a55ae7279887996fd2cbfb410476c86793e1bc","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"@emotion/core":"10.0.28","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0-rc.2","@chakra-ui/styled-system":"1.0.0-rc.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.2_1596972751802_0.2898782540699123","host":"s3://npm-registry-packages"}},"1.0.0-rc.3":{"name":"@chakra-ui/system","version":"1.0.0-rc.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.3","maintainers":[{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"69575f0cf74eb2f46a7584c013977652f8756923","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.3.tgz","fileCount":54,"integrity":"sha512-OWqpPGbpVbFzEHMWzjs6OpzPSS0GIoLVQkjSu/hRW/Jlk+CW8roCC4Qej18pvDvD0CeCzq5b9Gg6BHeE1WkoTw==","signatures":[{"sig":"MEUCICZyBvW4KFFPbnFnaPPfFIP5cux7zNwPTojsiaoCD/ZzAiEAkdPSQeimQl84DCEf+r1UsdjIWaM+2oQCG8RLkiLdNLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":109937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfS8YdCRA9TVsSAnZWagAA5voP/iWkKCUKSlZ2CLT5qB5X\nzn/Xx0oA+LpLCyrJ42KuIbHvRPWR7jFgovrVUCe1rf4kdSFkpningaQTMROz\nj9BG0UCrWk18J6xKbN6nS1sq0eJ4JEZarvqnYf8rtM+B6LbbXJDVuc3l+Itp\nsYbFc+Wsg9KhM4kH7KipqAaX8DOhTtOjqqQZJ4nrdC8GM7gIme7nTaKQGhSw\n04LLiu7zmBP11ET0eLrtvuIUPMWSktZXRnpoqj9HXpWiarfzjgVyhA1Xs2Ku\nsTcL9PhygUcLmRfh0KVL8keHqkfEDa2M5eO6wNtSKWXDA9WVFE+RQylDrKVi\npcx+F9V4omhHj3o+/r9nE7Nt3PThbCYiQYtndJ/5shGFA/jWCPBxT/lmJO9X\n+bstrg7wjoxM5gAe3U6CoQGr5mBtBocMiOO8wkCo9f3S73w6BDkuOA+KTz9F\n/t3ft98JamqgwujTIkL4ekrudSWM8J24bW7v6foJfihp4dZ5efauhnd+ShjD\nR1stVP7ZBZT9wIYoCuwgXoK1VfyMpHtN/v+9CKP5nnAHJX625Q0kIEEyWYFK\nJj+qJIlTXnrfv40t8porxkJUm6rJoHoryJMrANjgWrFX2WiCHS3HBkrjmkER\nq2c+7D/US+i0Sm/Kw94UWzGDA08U/caDCOWsbgU4hptc+DmRnH+t8B7C3dcy\n8yDe\r\n=IRU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a0b689f3a2b1589d58e4d9b0c8a9bbd02ed90f6e","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"with-heart","email":"mark@chanchan.io"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.11.1+x64 (darwin)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.11.1","dependencies":{"@emotion/core":"10.0.35","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.3","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0-rc.3","@chakra-ui/styled-system":"1.0.0-rc.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.3_1598801436616_0.9789498446187757","host":"s3://npm-registry-packages"}},"1.0.0-rc.4":{"name":"@chakra-ui/system","version":"1.0.0-rc.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.4","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"81af8cbe253b0bd3f867f7c9e2698350534a1555","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.4.tgz","fileCount":49,"integrity":"sha512-Dtxh+AGIdX63VCFQZrtbsw49pujDVsk4SWhwnyNh2upHWGn9JWfCUkzVQtgql+XyYcTrlorsXxjNqozacuBxSw==","signatures":[{"sig":"MEQCIA7V1fw2ryd1WM68uYeT7x5L9pqNE3AJRlSyN6PAt3/UAiBxmHiS9v6oAiYOEG1FDt2qUQiky5IA9QEiAIH/5P2QiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbfoJCRA9TVsSAnZWagAAZNcQAJ1eNkbVbQ2Ww4BhRDo8\n1cxXnMZQsoRZJlhnjyjuIUazyawFQNLO2PeHC4I20fsnc+FtRxlnFSDrDkST\nBvhPJPjldNEVi3e65rkcLL9yKKQo9JVm0Ard2QsGTY7Si4+eIYr2OHoWbApn\nf57VbtvRFB0zS32ZuBqisB/xZY0v/RSQFKynQfAghgrF2jASLKUtkKs1Rtzt\npotkF/WlpBS5FOPvfluxkw9CjRz7OymDHt20k5QHihnBN7+U7lM2qYdMdn9C\njWOOIdXlbM8GgTqe68g4Llfcl5ppzBuYgi3kLCd1ByNUTi8sQqDkJZlKrRQQ\nwKUbZFaJzQBpaYAxxR/V3noq2x2chF/f7zXZAEw2lFdH36O3XqqBSwthm7g3\nzrdO9kJ26pbDmPh2ISQnbsJytHYLgSy0aEcRV776FBwaCwYSIZyuBPANCvA5\nGpV8cY5sgly1TNvIuTkZzR1t1wsAFSnFHzQ+yD+WslSYccufb5ANMDrTEbU5\nsXlxLPm9BuVvar1zyW3OLowe0QQ8X+PgHyuhTO7CM/I3opluV4wuBvPL5ybY\nxDzO2fn5YuUqgMWuhAe3JfcAiQlSj2GkhWKIeEEeAevY+5IBDSPcyKogamYq\nAeR2P63MTDFmyOF3HztDn2azkGK9dVuFhMwus5XDilB5UmwqFk6T/to2kC5V\nujCt\r\n=LgR/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"830b8587c572a4c20d6b56b256accd6686255819","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@emotion/core":"10.0.35","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0-rc.4","@chakra-ui/styled-system":"1.0.0-rc.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.4_1601042953556_0.8582818436831956","host":"s3://npm-registry-packages"}},"1.0.0-rc.5":{"name":"@chakra-ui/system","version":"1.0.0-rc.5","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.5","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0019103bee78bd5f6380f24926967ca8c4dd8e7c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.5.tgz","fileCount":49,"integrity":"sha512-xk49gdxlh3CBICMFa5XH5XXI52kMXgeTRe7W7IdUaDWXBDpSrBW3LNEOsUMwox6L3PYGrl6fVggYBFLFEBAukg==","signatures":[{"sig":"MEYCIQCCniheWoNIp9F+lvCiPH7H4BzpaQAkMb2CkDBk1LSs9QIhALfIV3DGLomzY0wycVQmScc3s2eNwrdPvYHYChc3A1rS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcPXOCRA9TVsSAnZWagAALQwP/3PH0D27BEh971bvu2MO\nF4HY0tJjxb8AJ2jsf8ZiOl76jAiTsoQhvI+X14rtEWeJ22fOYTcDFZ7kWzKY\nJGFn5KjV6+t9RUVYMKtcfIdpzbLqs4U0uLh5ROz1ilCb8DxhRnfUxbwIBaMB\ngR83BeSKPAwG+60o2sruMVS1sdhxJSkp3Dv0rixIUqnjZRYHerd9hB9buW8a\nYnrrzzYaHVlZr+RBSuRWc/NYqoVkEmY+/NnCMoEZW55TnQYbkyvYSl32asC6\n9xDainDR9WW9biJ0Q8BCJtKNVjjQpdwvnGPk7e9eda/aOBNwMB4QwY5noK0W\nbXgjVySbhwqTiwpagenxuUSmVITCuOn9z7knmqHrGJOMHdwJHM09lY/a09Um\nyv4f14D/IDF3R8XQLzGZ2/K8m09JnqJvN/wePKJAma8ohTXyGdW/pMyyVsjd\nsqDoJZ1zQPD68uhDAxVgpyhIIwyfyy0XHS1JZUeRlrsnJS9uxy3CEBMe5nV1\nk1YdTiU4tO85/AMr1rU35r/UGalp6bbqD3wO+63Twv2M0kNG9bOUQAXk7PL2\nWzUz6zFfefm1j144hSh+8W13AWGiCx2yj/EPpyhK9c7hP1I7fKMrkEX4wovM\nSTwvfmHhMh8TbZENmnMl1WMnLJqvN5vVIjYvEenhZYW9QEB6//Y2/zIdi4wA\nCVcz\r\n=+DOO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b5c8482b778b19f27ea1d6c8ab6d5ed39c664afa","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.18.4","dependencies":{"@emotion/core":"10.0.35","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.5","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0-rc.5","@chakra-ui/styled-system":"1.0.0-rc.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.5_1601238478323_0.9905438592173323","host":"s3://npm-registry-packages"}},"1.0.0-rc.6":{"name":"@chakra-ui/system","version":"1.0.0-rc.6","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.6","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5ff5f44253ca7d69ea80dbecb9e42edf9c1c898f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.6.tgz","fileCount":49,"integrity":"sha512-K3WNq9O4DSO3cqlWW1KHufkGIJu3sBaK6YS2Yygx7rjamrksLwE8wwQO8f+f+oOJzA7cKTeIGFMDCH9aIh15vw==","signatures":[{"sig":"MEYCIQC2ir2mp86Lz5yehnz9SzbX4b/2aotxeFSb3LJXKM4RaAIhAMEtEnmpWYkYo9vXcW1Q941fGDuIvqL7Maf1htUVZ/lJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflZ0YCRA9TVsSAnZWagAAPe4P+wUL2hQdJB36FG6IdCTb\nHyYPC+mIlRC995OnT74S73DANPpPU8l149Z8GYGYER2MTY0Q/0l+iN8wm7yH\nEdw1VJswNfSwkIRd+XGT8nMQeyZctMW2aODUJtrRdA8SY4chKmrduuB/WGiU\nWNCzlPitzu0nn1xpOGaM6IYM/JgXGDzuVT52H+jQKV90Zr5R91S006ikMXnn\nPexo+UIiRotA2uB1WoE+lR+x6WVu3yEnZz3dQOCAzTHIPO7Os/Bc4GTiwehw\nPZ/3YLo7gscpBMDI8GUe+oZXDu4xf21h5Xq4qN1Z98mjK7hFuQDAuovLf1Uf\nQuG32ZAfClsKkTBE4iNqdSRMWzVQuDrJeDeuZ4A7uK+fUewOW/rNzFnSlX2L\noirKeSQUYtr53tYx/rwG7tYpQqHz8zk7AFINeO5M+YfMFy1f5cphS/ZV97j7\nQoXPDXGMRp/OoQNFbcaOB99Yk1tteWatZj4lhT1KdAxcv3c+As18TT2hdjhy\nujwN+RFQ/5neMyvgfND5i1szIFuprz0S3xwPFgdPxfwPkGFV+PB/aBBuFujk\nhOUJDXVcOgoUFwi6m1fNoGm+m7jBkeBj0nDuyq+cOieOZ8ryUUxx3UDwCEEF\n/ILQ6SfnuhapW+s54HTy6KbTD6FFvRcuaNJvs2qnmT6rX67fCidITg5xdd0P\nBaa5\r\n=6EfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"e55b45840d1edc821ad0bb45632535333be5bb86","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@emotion/core":"10.0.35","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0-rc.6","@chakra-ui/styled-system":"1.0.0-rc.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.6_1603640599722_0.9912701325058537","host":"s3://npm-registry-packages"}},"1.0.0-rc.7":{"name":"@chakra-ui/system","version":"1.0.0-rc.7","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.7","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"35e99632e8cb9a590b7510f3fd222f71230b9809","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.7.tgz","fileCount":49,"integrity":"sha512-4juq5IlSZhBrf0izCzlKakZn2vBG8j8AuFy37OWMHuO9/4bDtnK9mOKLvPcb9gLounbHSsCw2wB+wMRanrvpPg==","signatures":[{"sig":"MEUCIBe/9cayUwjtZFnCESxTxvDjt07ASK6bH6nEyalsio2GAiEAzV0YRMb/v7Mwf4ppeIL3ZPCtufbcUWX5GfNS63mOpqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflfB8CRA9TVsSAnZWagAAR2EP/AwnuQ25tb8yVm138ZrW\nLPQgg8hUWYxNmQ1FrnUWhN69qr5DBmhe3hLH14xEfyhLFhf9BMz98jPmabph\nAefRTX2pmYkYJUS371HZF0P/vm+XnUGDO8uyrW/QOq65YU+MXzPwVDg89tmY\nTOgi3i+2wEqCnhESdKiBa5xMgG4NXkatPTjKKkE3SiPwA/9xwcDVuGJCzBGS\npfVZobLiD+W/IOUv74LHHBhlhOs/BrPYw1JsqjvHmfCzOAh/zCWsjK7l/jf0\nU7wrzGIU4gzwFfqfxGtHP5M7OWsyeZUltIUgJcl9qU8VasZK10GFwP8uFp7m\nNFwv0SWIlm7N33bO0rBzRs2VssunDdE+eYjbLx54OfCbpq0eVyWi26P8iKzl\nCyu1T7HJ+9oJExOkOptwIBmsds47fmqm4isoHCa+o2WhdI9TnqJlMH+rL3+l\nOnkuFMzqJ6+N/w8CWd7Esf3jc9QJ5yJxcOC/CCSdb64J0tKNM+t8ph7DqoPV\n1M7wJJzdGn1Ch6IxlPdFcbwaxh7nBH0gwvyhs2jZuw+AnJvmTVIik4Xoy8k2\noO1HM5jTaaHDF9JtaeEWGGSBjOf7KPPNZ2CgoYU9MeJlCoqQfd9Xo0Z9cwo5\nw+Q9k/hTgC3KQiSk0FYrvs3E/rrVLz+Q3gL1Lz85NYclGkUouCBfBLUC7hu2\nAq/V\r\n=1giQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"6da531af61ae3780c764590cbee62297fb206e46","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@emotion/core":"10.0.35","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.7","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0-rc.7","@chakra-ui/styled-system":"1.0.0-rc.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.7_1603661947687_0.0048476086835167465","host":"s3://npm-registry-packages"}},"1.0.0-rc.8":{"name":"@chakra-ui/system","version":"1.0.0-rc.8","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0-rc.8","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0bca9a5d649ec3c44004a872f3e171567ccd6c7c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0-rc.8.tgz","fileCount":49,"integrity":"sha512-+jBXq15wwzvUht8weW/Svbuw704ArWdnto/mrfMJdB+ZVpyekhiD2lRoMJu5bxX7iD8sKhkKr5UjSRh97Gcdiw==","signatures":[{"sig":"MEQCIGGBRlJZf/tvvcipqyxqpKcdMO1wNrQDesvuMaolyHMdAiA8y4wApYN4LLMQA9f0f0cwSjaNLzu6UxKBS7D+bS7U8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyUaCRA9TVsSAnZWagAAvVQQAKGTp1NxkNBwFNFRVCnB\nc6M7w4geubOtY86Sh9FGSK5MI+ERYSd7ecBLrK7FGqISFy4WRJ00onGSg2o7\nIYhYJ3/8nOgjlKp0R0mFhmKeOP3JvVkvv1FOoxd0660HJUWbEIdoy9Worqba\nuqTz+hApi9tfp+RJyVtyDVvnGFoTqGQ7a0tP8bCRO9M2vf4kKgpFtsYka+Wh\nKLhRSBlW6SJMDOqVaAB93wTnuDs8ReX6W1e4VCQM7XX83nKG3WKLO9XxJW9t\n3b4o6s2ltNe0+kZ6RPl+6mvfHlNerZ2yDYeNi+yslABSeXxE5sSuhBxc7TlO\nIjlP3E8lSJtiqTj1fIb027OcB8khEw//r5q0tCLo3xI8i17DjcnG1hm29InG\nce1LPkHfckkvdN8HC/knA99G1qCnKfzqs7cjXA14JtKbxiOywXZZRckkvkCG\n3iEQoZEHOU3OFazK0v71AN7OCkdCGRxWP0LLWhgnWn0G4388YPCu7FLk5ZhK\n9bsxK8xbK/GnZ+tDPtZYElPS77lTX2S8DJkw/QJo9Bsxy5DxLpCuyenlLqTx\nWQAJdvoJPtUzypE+/WOqUni6NZkQQ2ueaL92ofnPXYskQlC3j5sG62PPQCzj\nkVNwfUdinr784qFrWKnsujfLXKkcPnuu1GfSjRH7bGQ9DvADS68yFu+pU5Qu\nHPiw\r\n=4xWB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n\tcolors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n\t\tblue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\t\t\t\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t\t\t\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/core\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"de4cffb1638e8d10cd74515b0289d70eb94931be","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@emotion/core":"10.0.35","@emotion/styled":"10.0.27","@chakra-ui/utils":"1.0.0-rc.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0-rc.8","@chakra-ui/styled-system":"1.0.0-rc.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"react":"16.x || 17.x"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0-rc.8_1604003098100_0.48512511533658254","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@chakra-ui/system","version":"1.0.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.0","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"07a535f19a68b715ae709c47262b948872597f44","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.0.tgz","fileCount":49,"integrity":"sha512-sK8FmX6s0LXViZR0c6Fy1P+uICpin8PGD9PUcd22PbgEeu+TtPrmHw8SZZ4jhzzPTDeeINmjDl2SkH0LbfQAcg==","signatures":[{"sig":"MEQCICMsFPmhMZl9YiG6nBfzT/WN+XDtXao1I2EpSwxP7f7TAiBlHlkyi7/mXKJPPx4FDHPdaEiqpBmwIuhOWR28mGNvAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":116642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrl4XCRA9TVsSAnZWagAAB1oP/1Zdvhx2Z0Hd+FDMelot\nIWse9clZxzSCu5xbfZqTPY83uAhIbxZJ+dzM+Qy13y7cYy4739Ng3iD/MNB6\nWSaleWWv7bAuRpBncHfWDvrL7TEYYXw8KbLXF5G3zcN8P+8qg79JtePlRBiG\ndLrc8xEs6EUJ+yR/tlHrPpMMd505YEEKjdhf+S/1GtcVlJEq3hFHSu82a6JK\nHNk6lljqaOsh+QTo+JqxDu2FKraVcW6gM5NdCsZ7id4zdkEiVUDpp+iczfU9\nQ2l5HmRPqNT0P7xPZSR6g7MGnAb4dvRubs/4Cu09ds9NBjtWOz/6Ogi9AV1L\n7Xvs0pSy2NRT1BR1pyFr1+3jS6NHI5qCnJoddplLwI1Bow0VG9PtYGmKS5Xe\nPvgxSQuOC21Mv4pudaoCcfYxW06rVdcUtRTqBPBdPNX/eFjDvWBX/09ufS6L\nfezIOlEMDg03hdOdyUpcxHsNc0Zxgd7LgTUn18YECAq7GqRbCSpY/p/RMbVm\n+qZ13EBcA8ksHF91GZiPNsjppdFjSVL1OQnHnC4JjYxhApwCW+yFQcII1dFj\npgw0+5UbhLU4apJmjGkbB1MpLDFGs4mGiaRpuhgN/40hjfq+u6PhCpuGcB+0\n429ViqISMs2ZGxrVYuG4QihwgYQHDkma02x22c8Ji4v/wg9btdiOStH81Ffw\nWYJ4\r\n=889l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"c98ca366cec7151fe7ea4e0b6f893088797c5398","scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/utils":"1.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.0","@chakra-ui/styled-system":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.0_1605262871480_0.307769755339516","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@chakra-ui/system","version":"1.0.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.1","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f5d7dcd8911ebbfeefc3522d22905f19e7137b86","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.1.tgz","fileCount":48,"integrity":"sha512-xN5f4Bv8x9Gbb0AxWQcSAcr3YF5JWH7DynVUpBl47USdaLZGLEEJ3oNTBeatVnGAEuYz8iO6cRz87gYDwXN9Ag==","signatures":[{"sig":"MEUCIQDh3tso7jYmRZwJYI/DYkq4HWXBYRk+4x5BxnhM4KV4twIgZ8lcTBZls9el5Rfh4DxFgh82J19G73dv29xSXUp7zIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuB34CRA9TVsSAnZWagAALpUP/1W+9Uv49l1JH1XzhBib\nRmswxIl3vIffCGMOu0PFsFP4+MPQHqZ2D6Ottu0XibmZLtKd68DLokxS/VNe\nYILo75vbeUc51iDLXMDqjXK+W1d0t+hKUfkvkWk/WaXlAPtYva9ZGDxoyWJB\naqgUn8txQ/ACq2Jf40RxjJEE20hQGGQIDhHpCxPa8gOFm7rlufso26Yrtw6z\nUkfF8cZx/LdR6fwqhPkAy+D82Lyj0t2hc4kySHl28khTuzj0g+bubxZenrRo\n66UeKMqU2JWdf+rsc2uNYlcc8hyMtpWjLt2+Mya4bxtyf4j7MrAa7/m+dU68\ndOy4SlKjFSgwAuMilcP4NB5IEORJ438y1k1OW8InH81Ilc56g0T2azh6rm0e\nbwoTXm+eExUAWRo1XRpofuvksqhIB73m89H2d0NNdpgWvTy9fXJPnkL10GD0\n8E9nxhL1zQxzLtVMHiMHD+p3i0ORJZ0GluGRGG1ZFTQvwYjwr9qi3rxajQmI\nWXQdr8ZgGjr3eb0EVgIBSCzucdLZCB1ciogac29NPBh5K9bnWXC3N3ZBeWfT\nPxinqUPWOxm16coK6i/CkS5JnR4/B7WFUp4tpXOP1DAHt8RSn8n1y7IfGRnw\ns2Bd/weegS5t3viJ4ncpdz+QW8DYVXY1HBMAOXMctI0YING38cTuaG9XIxcH\nxktp\r\n=7UVM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.19.0","dependencies":{"@chakra-ui/utils":"1.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.1","@chakra-ui/styled-system":"1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.1_1605901816202_0.9024575324118929","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@chakra-ui/system","version":"1.0.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.0.2","maintainers":[{"name":"with-heart","email":"mark@chanchan.io"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6f539b316cf6dd1a87ec87d97f6db0037b2e89cc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.0.2.tgz","fileCount":48,"integrity":"sha512-4hfUfy8U036mx9LnwZSDfX7uWI5UDv8LyjPkik3ZYXYDftEdwSelgyRv5+YKV/hOnHiYPdiCmNrR62VpAAVVYQ==","signatures":[{"sig":"MEQCH0oBkIOEdmysqIsJqaqRHws10ANFW1mrOfZk0UvCCU4CIQDmXblN2kvzfC2+H+B30OZokEnhp1/w6NHFCqLc+I47Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":116961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz7keCRA9TVsSAnZWagAAnsAP/RHg3o4pPoB0bUrvzV70\nzpcli7yUj5IlC5a+0CvUzwbDUcJQF4ceCWlvp4N4wNc11ipjx8GpexbC0QCy\nFApH1eiDgdfbeItn1GWgKai70EPUTEPhZZ7S827FcaBo+xPK4XBX/OkNlzkV\nIsWwNRlQxAl1I3TtUr3WXAQgEYlXsqiVstzRArCCRsUmEkDMQG682z4F3IpR\n9GsiRagUu5OqAVjWawAlJl03v6qGM2qXjXjNIsW0z1x04L0ED22R86k8oEd5\nLTGbAdxwl+RVYzVIfgPv6zvPZcuBex72dUELDj2VhFziDdkMtjn0AS0yBvZa\nlFsaMKjSzF1FhV/XYEQgxwUI4GvehTTr0O+WBxEwhBRXT4N67Ea3Fi3RZCnx\nLDLBV+OSfPcdAvReg9+xy2zUVFRZVQzCKQRwvsz0MWpOKLULk0a3li5bM6wz\nJcUppMOmQIBH8/IA0wDnshNA/sNi14T/IYSdI4y33JOxdeTVxWv0sqK1QSYr\nBeEIn7UT6dR/DfqdAaXNzLulAP2ESuKOQF1qdAhM5ySPc6FSGETUp+AJ976z\nQ0tbMNF4I3OQY+nGYFv8AFyPVCvvUGJDzpPmTAS+SJyxOzs5GPDzHtTJXwNz\nw3qQegXIVQYjs6+FamD5ocSrxm994695Qx5JXQKf9UUT0eJvbI2+Yzg8cUbU\nAXIg\r\n=II+3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/utils":"1.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.1","@chakra-ui/styled-system":"1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"11.1.2","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.0.2_1607448861456_0.21382503510092854","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@chakra-ui/system","version":"1.1.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.1.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3b2e1bd440b3fd0779bda191b708dcaab1a51834","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.1.0.tgz","fileCount":48,"integrity":"sha512-R+rEtcAekS9BtgL+aQHPKZLUU449xsBeP3SLVc4kYuA/sPUDkFjrfZ8o7C4dnBvL2oXjufJ6dllZBrZw7zurcQ==","signatures":[{"sig":"MEQCIGsEHG850taziF7K4x+SZBCyEJj5VRYMlvoWCC9762PWAiAeG7CQjpprhaJEZRwbQJU3j8h8kCYaij8X0C84DrfDqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf29AdCRA9TVsSAnZWagAAarIP/jMZ2Zl/L+Udw+eRWczO\nycsCozgos6f+fhzqQLKuqN63ID56O1SCy7Mrhbwg4kSuQnDgv8tcr7uZhdtb\naCLPWypCgx8lkzPWFrDtrOpkS1urIzyDmPXxkagSZrrjuQoJLqm1NATpkBG2\nSqdUifQx8GPVSh2f8gIrUkyh5gkGc2IZjarY9GjnKViT6rtegKZDG01rlBRK\nTm/L77+iXqm+7JRHGcP5vvTSUhoQlQshcGs9nNG5lkYDRvLc3mqNesh4NEC3\nrIM04G5Ws/ny18FKeu5j2Xo0+S8eShvdkHD0SakNspnxOeUfptTd7exo0Zq8\nbcuUM+96kYDbbV4ZHb98GcGhULjowr3svwwXnyk8nDwzDD11TdWjWmDrg8KI\n14uOKelZpVGmy24sTJ519twOwZWEzadRS9+WG6fFwhxr8vWn1wCca+YmZpEc\nroy+z0zELxwXdNADlynIYp3ekZTzkMwFs5CaS8uq0ZkvG+eqJ2wggkDKFcZZ\nC/Ob4I862vfzbQoUR7aO2FThgeBus+OErcBsi35OEwkgZjqtl1nFj6vu3Xm6\nautjZ9xiejkdOVpwztNbEjaqQj6ttR58nlwLhkf5DFjVM5l1enXnlDZz2SDf\nVime+rStRtxtMLIgT3RwI/nJ5LKpwNl16F66ZqgNtzSWpAliOBQU4AII8gVG\nm/+l\r\n=h3/9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/utils":"1.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.2","@chakra-ui/styled-system":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"11.1.2","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.1.0_1608241181443_0.339388635274261","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@chakra-ui/system","version":"1.1.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.1.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"abae2513eab1e77d6f5c20c9affb07cda4eb03a3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.1.1.tgz","fileCount":48,"integrity":"sha512-5aucdR7sv9OQqCUmGAQg3cPkXTKTRXbzk62yzSKoeGsyVfD15oMkC3jh+Ndzm97TZzbTRXnaP7gFSBJ5KMStIQ==","signatures":[{"sig":"MEYCIQCVpajSVwfltXII57lmapJdX8X3DPCCZIQJMIBVE8al0QIhALx6/jzmvh6gEuqyS2CHQfB9/orSnEvf7xU0Z3NzHTP3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kUOCRA9TVsSAnZWagAAnmsP/1c5uKgsUb3u/gSAtM5g\nJF0vFAER3S8FR9B5v1iiZozMa9R03BfPZGD+hH38q11t4FxozQls8kVuhWg+\n0Ap+locpObokejUuLlVFeBKMC7LU0G8ah3uAL5Etaboqt3+7rLQ9fC6Qr8Pj\nUlzdqgJ496kcVc4gvZ0fbwMSz/sXSMTA+s55m+VzQ5WH7DVt/fVg8wrSxAkS\nBqtp3brzfKm6Y+65oQxY5cGWZRQmKAYQ361muKtAxkr0Tk7q/7i9pO6Jiudc\nWmpffzbU00IOKwRhmpOcIJ7Spb0/Rh7eVfRtPC9L+nhGQFgz2VK2CpkSCpBH\njTIQU5W8yXjfXZJG6ozMtgnBZb44a2wFmYVrFq20q/RAc/vuzDL63hl33WtG\nA7qVbuqWlEmaML2LvJR6905gW8OATzfeg49eONj+UDaEtyr7ZwENBKnHLRqF\nTUnTpXEqArswQXqnTFx7r3AoFrr+qjERTym93/ZXaLP34o6pKYlZ10uHQCMO\nGs4RI4EgoPNM59LpvbFQpZOKpThbMQ468Ooq6MVXdDxAwFZFIxMCWl/vXsDB\nK8iXFAFLlJdJQf2iWAFkTg1vLZnhwDkFTsQEzCaAXFFQUzpiNaVXLNY8LG92\n059XAA7NzuV2KnJB7QetMBvmKiJlimof4+rg9sCAsANnyyzsaQEzWan3cpg+\n9cJT\r\n=encI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/utils":"1.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.2","@chakra-ui/styled-system":"1.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"11.1.2","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.1.1_1609188622349_0.8676450178003761","host":"s3://npm-registry-packages"}},"1.1.2":{"name":"@chakra-ui/system","version":"1.1.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.1.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a5f089075f39a550fc05fe9bdb4e0580e90b0f50","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.1.2.tgz","fileCount":48,"integrity":"sha512-0JgY1ch4JkkJCLlWUeopew7kcSC3a6PJjL06y9ilJU9tSoIgoA6QKNpEgy6XQbeclS/wXKm3nQWOWEoxS/RDng==","signatures":[{"sig":"MEYCIQCrBX2X78qidYxmSTdE/4jArJ9MuUdgAuN2s4vfff61BgIhANnzrDDlibQ+RIUxRgnIIB0gHg8HBeNtUFg5VdHXMt0+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8cJVCRA9TVsSAnZWagAAmaQP/j4PuOKJmuyq+PQHI7JG\nigm3uUQ9pF0goy8PW+rBg42Ce2Ax3Ql8RyuWe42EfStcztrvqHakBsCLhyw2\nNHuxuyxCgHSniP87mI+z0RejvSj2azEFcSiKmRVrwyEY/Xi9KGIlXpzsEBi+\n7q2GehK+/2JVQwB5Uq1iNIy91UtnozdLl7KiLqRKPPSTJ1T8YIOjNgzg/ezf\nbcbsLIwD11+AK+5DhxyT3gaKkg1y+il6hseM49WZTMiI2WCEQCr896U9EfzG\noxJQaY7NaSpgjcq62ad19xuDJX++pHOKyMS5Gz+lbd5oiWBF6NsmDLGXXvBE\nCsIVqEymhA9yEX/fGph7bSME/4miLVL4S7uQXo4EXmL3Rtmxre+Tov1WNnH/\nfuTnCGh6P0mOYq4TarAcqsh6GK+av6L3BgIN5Y89MCCkiLH8EL1RErA5grhh\nct+Vk/c2sJmQZ9mm+RyqXD1EvggzB7tsygQrPh9C4WOsKujxMlejDNGA0nFh\nk3b1zGJn2MmEh3frcoVSnoN4HxtntseZt+k1psRyC5qxlsmP8Iv4KrpMNlJS\na8QkJuT89LZyFixaXzfwUtiXVbXtIEp40lhHhD6jWvu4aCGEFL5xMJHyZk+p\ncVKJsrHZGnk7P0rJs0/BzvSmA+rMyuKLEaM/e6BH4NCGB9M+daOmr3RiiO/v\ncWum\r\n=aBlL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/utils":"1.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.2","@chakra-ui/styled-system":"1.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.1.2_1609679444578_0.8124240708945263","host":"s3://npm-registry-packages"}},"1.1.3":{"name":"@chakra-ui/system","version":"1.1.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.1.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8d8770899402a27ee47c852dd803ed849ba41324","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.1.3.tgz","fileCount":48,"integrity":"sha512-U6/Iuyi4KStCghB/czpCfPZTRzeaHvREivlWLOPy4UbnuqT19SEaDl4mV7jz664LpiNUSo9RQCWCtCLvQGv7iQ==","signatures":[{"sig":"MEQCIGSMpYCL4duLi6DZTiR2uB2caVQpKfAeWG3Ujme2Bi0vAiAF6t6svQThWJwuPI4X2amg24UYJHS03hydq3X6/iAy6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9ZrZCRA9TVsSAnZWagAApxcP/R6OseairgdE1h6u5OFZ\nKzJw3zvFaO57ufR1rFOXo6Kix9zL8a78se+l5J1YD+zoM+IrT5fmTNauZERs\nFNBRGmtTYytOQxFezRLxv3D9Pdxmf6ANp0WJXx1KBmlmtosd596ISCrC4wB4\nYlvzAHpdzUBwzJNMJ0xIJvNZR/WUOvoUg/A72Ft3SfiBMNxYhZyszyQNcdhb\nWXNeFtjsCJ8FgSueclSDvZFtHvR6f/2jMLIfPDzafzxmjRUgtXaTcxk6eKEX\nx5zPGqhsM7LZTPN2pGuzazAOs1/GCS1Y+I6rPfwaGBZeUB/ZOIn9aLnswA3l\nWvjJ9WFDmpMoJ8I087RAPZi8ALDoWkh3YQFvT4L8PvVMkwTGJkeE0oZ1Poka\nduFuEO+sr8fl5s0e4EFz4WFTxpuKkD+GPmv/YR+VS4BPJUT3LpCmUjId/wU7\nzZQzqn/wj0LGRfWtC41la2U5yGUkSAnsVTbYwYabpeU1fJDlVCpZT4qOtqK2\nLNnYMF6BKhKduhvxR0+AznzvO0MxC/m7S/BE0AE+g8g8Mp2IhWXqEwTEZbdf\nPDygbimDrobeHTDMjleApp/HPU0yOf7DUD7fd8hwMKOkIyId2+4q9E11uWMi\nRTobVLutPLeeNuotV8/Bzce2/+Ug5JPOxtngZtTf5wVQcIi+CPrSOHdz8XX7\nCMTS\r\n=zK+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/utils":"1.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.2","@chakra-ui/styled-system":"1.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.1.3_1609931481292_0.49801371855806553","host":"s3://npm-registry-packages"}},"1.1.4":{"name":"@chakra-ui/system","version":"1.1.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.1.4","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4cb8a519dbb128082fbce5e41318cf9141ee70a0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.1.4.tgz","fileCount":48,"integrity":"sha512-r1CMRnmfZVTRiCDWgStxeZDIHKePYed32wev6OsCApbHx0DHYtJAwjbZnlz7XOsuKw2bjcB8QWAeQ6DuSurU7g==","signatures":[{"sig":"MEUCIQCQMn4RlLB9eiZtqxo664DgnN/Dy+A6t1gkQQ+VPNLdAgIgRNukRuPCqOup7Ns9+5dUzH51y8rRC2niFvxcOURp6H0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+1DGCRA9TVsSAnZWagAAy/AP/jtdVfI6zyj15eeM4c1v\nXSRVN9Bo3cmR67h3ueKdZPy4Fe2A8wItl0ZBwWsJ1+Ee1enLGhywDDrfDzBq\nABvzRxhMIFU/Shy6a7loT+zH2hDnPoQeGcB5cyEX6CdvIdUdQVdXCcqDtbkA\nOTb38uMcBoffJ6F9W+pbpBs7BNe60dhFn7GwHHRD6lpfhpjaqMUBDtYZC0ed\nd03iCPRmk8bSBO5gPeRl5qbiu8JAN9O94yxXFVmwt/zBuZJUHK9D57kFqyNA\nN6QIB3+NLT48Jgb/0WPpkJJuKnXqunIi02qjNDlYtgDoma9c5nTx8H1mzZCF\nbM5wKTRG7AoORRW91Ed4Jh/gBK0WLXMrHXvTpBZKyepssGsGZdLSb6xEyv/3\nLRcixXA2vTnP0vtBelfO7N18RrM9GSCp5w2v2MjoljVvk/fdbZskscqTYRr6\njMAoEuxE33xludb0XGWgjLp9UZ88rPpjwGqrefYvkwZrifBEAPVvpOkkEBKA\n9coQEc+3RSC6ZIVGnlaiMyzAe9M2bp1ZNps9dtw2WVKhukQun89BYNORkMgX\nHMLT0l9shaBriztIoe7Nrk0BOGWPIL/hWRQ/xmE+N9L8KQn1ZmgNDQZEZZIz\nf3zYGN3ZufgTnBCcLvU5JER2tcU7c4rluUswz9i+lGiG8c9eJHfLHcqkTZoV\n+aad\r\n=k+Dd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/utils":"1.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.2","@chakra-ui/styled-system":"1.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.1.4_1610305733458_0.910125878872714","host":"s3://npm-registry-packages"}},"1.1.5":{"name":"@chakra-ui/system","version":"1.1.5","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.1.5","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"db004a06210379c0068e393bd843b3fdbc212be2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.1.5.tgz","fileCount":48,"integrity":"sha512-qP/zzn3/EAUFefxGHRVXxvQy9q5RA3RLTxhfkAg2+MPipt0fbVuB7qPKu3VtSo7kiDsdNM8XiMA1EuNzpe3vXg==","signatures":[{"sig":"MEQCID9T0iqWpy3UL2lmqjJM4Tfx8uqlIKloblcbinJgaiwyAiBHEZs7dRdgY16FCY9iIz/zo6oC+IEZGDr8evs1hSREyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/ISTCRA9TVsSAnZWagAATUEP/iGJ6DqhftDm1w1DzzA0\nJkABTyYcVeyURNJnfYR3qGPnvkBJ1TeShJc7hWN2boRAEdfOt6BUN4+yJS/b\nnpYrtQpr8V/Lh/g/8qdt4dRVCGeYpwmci61V9/KvvmPXSCOe1KewoLp6Pxz+\n1kXOdtuOpa9I6HmpgjBx3fGMoulOi6Tuh1d46IV+GoMFJfTjvswzQMDNxsRk\nSrrb/+DzRGR9nyHRJhBtePyrs2epNOlA7Xd4HEsEu5mNO8BfU2iR/Z49krRr\nx7mVavs26sDh+aVZcr2hwi+tXXccRPSUwUJNwOYJVy0NigmG/ADlHy72kUqo\n2UAc3CIeLiNtF6tl8h1/4zyYWhkxH9zvWYHj/veyE+qK4JSnWFL3BnzLYJpy\nblyNAqcpP4Vpcvynb33gYoZO9amT63KRDZ6U189WnWWWnIXdExjQFRmYENKE\nD5NltCgvMYXVgkNi1oH1ZkyELA+LXypkw5A5OhUgph/fhCHF8RHkhAWthvML\nn2H4LgUhMdvAVb/tDTH8l/rquUYrPGShRllnrhThznWsxX1P444hALWVmvCv\njK7p4MsbdyFBcSLXQwbqWvBWFJqTCnKGp9tbYlG25+XBou/behQRhhu0UZwN\nuu5dZ52FAbHk507MlUvF7f36d1ul2EUP61VS7u26Mif6DMDvdIdoh8eOoHt9\nmi9r\r\n=0rKd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/utils":"1.1.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.3","@chakra-ui/styled-system":"1.4.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.1.5_1610384525467_0.019428499814433176","host":"s3://npm-registry-packages"}},"1.1.6":{"name":"@chakra-ui/system","version":"1.1.6","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.1.6","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"16aac556ab5a967d6dc05803dd7b9608b31d6849","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.1.6.tgz","fileCount":48,"integrity":"sha512-iMbuYoccz3Q9kZwln4KOwznpgT/hfZNpFj616dBdT9lXy9BvzjvvenRJuKAsaOADb0u0oZHQmV7bc8+XiWRU6Q==","signatures":[{"sig":"MEUCIAvQKOVpfwreP82wYLQanpf70hdAYoafTmhSuc14/iZWAiEAxTvmCRvOFEgBPHE07+XKS5WxtM2xEsQKGhxLqmjwwlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBJNvCRA9TVsSAnZWagAAxkoP/jsHHbvW1JYN4XsVXbpe\nmEkN1CR6BYGRVYiFYGOALm36Zmo/BH3zmvhexI4qKjeAwSGV2QuYwaW2X1pN\nOqjSIDSAOzraAg67aRdTmgV5XJeg1g2ehYPeqdz+bVRfkQPN24f8+UZHnn2r\nXa5CTSDl/AbzNwW7/m6USs7RdmCAQdfDbluM+b229tKYwfcfCGM3UXsRqxxL\n60nKDdF09A7hiwc5JPKMGxtZ66oAbciLGDC8HszSrUhlopD+vVeJDdBeNjog\ngZ1Mh3CD+EAVTLV545MwnigGyfZAoHoxr9/qxJ/BcyWPwRfWVYMsCc+HdtwD\n5n8ZRuMR6I/AZQ7QE25/FvXtkmz1FdrqwVqlBv8tuDVr8tnLbffPhcIwiH/9\nHVuYSo8jKhj3xKU+hlGtVawWLdSEviqmsloMsVzZlG+wCEjNBZ4mBAqRmtD/\naHnGXwxviKtN6hLSKnYVAQzIpRyj2wPbFLAy1HWhPNC5zf52obY/imx4I+1t\ncEp8VaLu/9dFEMhvHTN70gbQJrJPqtEP7e+vCFa8Dj6kN4CMZPhW5U7pQZgE\n5D4GUiaLraczVaskYjcrhtRzjliUbg2bQ4NhmpgnQFuqQ6bX8C93NOqHzg1k\nT4nNu68WVaIFBY5vMXIrfIPoH20wrmATYGWSO1JvVb8Jj+t4ChuprWzce9Jw\nPeJR\r\n=8z34\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/utils":"1.1.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.4","@chakra-ui/styled-system":"1.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.1.6_1610912615578_0.05448967549037431","host":"s3://npm-registry-packages"}},"1.1.7":{"name":"@chakra-ui/system","version":"1.1.7","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.1.7","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e1dc2d344e7c724f0b47d175de5883adef5b532b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.1.7.tgz","fileCount":48,"integrity":"sha512-45DbG3zr1SqW7NL4CFt2bqWqOlSl4B+LPq4jhMbmHbRMbdJe07GwQnpXdqz0OO16v4Ne/3V4XgngKlN2vP0q6w==","signatures":[{"sig":"MEQCICK509Wh4Koap4nyvAt6oTsS8J4LnKfyj8J1v4spTDJ0AiAL20b6weBO+02zpbv5UKr0t4UqU7m4O2YGBGWpwq8KEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDYu6CRA9TVsSAnZWagAAX94P/iUm61iqqJf33m4j0O/i\nfW1kp/S7/oTcxxT3mhRzvyedBTvNrVfx+8mvjkwzdrxjsa1C7MQAVG4gDbKm\nvu5z18e5edVzzH21k4+BeCaj7jTqhSOXxzyy/oUmJO+2CMGcaQ5z33gjkd01\n+a3s9SdjrLn/REIQ8Kakx3fAfaRbqZ49qPRd1kx9zAB3rJzLA3jJYnruH0X/\ntWUKi3CvPQ18gybUkJVYOIJFhBVMdZx2WaRZQHnjtG4UvBipmXjodYH+xMAZ\n33fyuSrwGXo4qqhMY8xTHu2r02C0vpcY5KQwd0snPyhHFh+cuCSsmVJkRDqw\nzn5+Z797yxkBnsPozg9YtGo+Y/VHyj66Ktl3kd9XIBPdCTUNSYIYKYlBMp4u\nRGD0VkuqKczIrrJY07sYNDS3r1XSpaEjqZ12mRf5J9WH1VaGQJ0YuLxz5Cjl\nCAqVnGfz9VD7Z5LsfeiBfiBEKDue3sNsydG7Fc51VrfEyI/24QemW0JWiPh6\nlFYbS4tgGhZPJVSXuBN6WxoXgCygk9lllVJmRwa5Tetzl+RATYWArDoKZVpe\nS1QI/JHe7+kROfLh3B90bbRODHFeqxMJTyuPCkqtPjhEpq6T1bOlOCxdz3yl\nCp5Ol0bConvTUGXlAGY17JZj6O1LZy1+mfaY3u+mlZMPDS6XGwTk89BtPkrD\nEWE+\r\n=5tuO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.8","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.0","dependencies":{"@chakra-ui/utils":"1.1.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.5","@chakra-ui/styled-system":"1.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.1.7_1611500468280_0.5378984543397547","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@chakra-ui/system","version":"1.2.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.2.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3db16767b872bdf1564dbba5b9b6ae7d6f6d76c8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.2.0.tgz","fileCount":48,"integrity":"sha512-cEdObWAXKfvTBAip6msZH/f8irR3cFZ3zGICgo7RT2vbQg3e8bfh9sygxJY7S+QV9hyFsdC+A4UwtwYI2QFTOg==","signatures":[{"sig":"MEYCIQC2//bwf2LJy0JyZoK6wHVr+RM/XZjJRGWOs6lOUePYTQIhAIwxIxf/eYFY7EmzyOQQfliUZvhU6gqUxekLfnK2dDE1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFdUnCRA9TVsSAnZWagAAVDYQAIUsLbATm6Ta1njW+EP8\n9W3ue47dAoUA01rybWIYrtdsUZIH5clfRWWTCdXbDi/f1tXpZZLjhNIE0OFQ\nrJYZCLjT/VGyddgODR0Ytcg6lMlH08A5v1v9tc6dgXqxI1AhkKBEKmPDfYQ0\nSu8yeo+wxNvJCQ8VJ4s37J9z0fUlvmUNhDbWzT2zIZvZG8AbXMZHb7HaP5Tj\n9/AGkQi+dVN7BpkCBJo7iYHxJBQr8zvaKiXaufPa43lTunTq0G2VtAW713Qt\nLU3A0/dFgFKUUFM3khJMtjFHaUyZku8LWcWlqYLqMTLYPWGina1y1wdfDJLW\nMWwcMdsNHtm4MG7OVktfON7muXgZDbg/cV6l2rx3ueNkUL9muu4v1PWQZZeU\n9ebHmIdDSYajxYbCSNMY217BTFiczNyPzFC+NqZ9ycvrDzDkIqHKU6SAvLLC\nnQ2rAgQY+E8CC3GDuFMCHrD7txbppRYo97m7/Wd0S73NNnAIg6+vjplkEkeZ\nbHx/KMSMC+sGYg8NejybLs/UPXuriuANldH41I4evbcvcc6i06IpSVKGd6mZ\nTTfp2OB6yAMCpZosRAwntzr/D/Sh4twOd+bzNvfgxspClR1HoZQDldF4jrS7\nCBDNr4iXGSR5FN/toEEYrIuYvDBcR9Vqy4sqBaoKWr+ZJhtd45fW+qfm16ii\nw05U\r\n=oREB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/utils":"1.1.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.6","@chakra-ui/styled-system":"1.6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.2.0_1612043558613_0.06013623424094816","host":"s3://npm-registry-packages"}},"1.2.1":{"name":"@chakra-ui/system","version":"1.2.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.2.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9dfc01b16c4e86eb9c0b56e87e77d7185b882ab9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.2.1.tgz","fileCount":48,"integrity":"sha512-s992HSyUHwJ2rLFEXMwqHgYPzDXLAz+C6S3KPfhLh9hCij9WCLj+501QndzbqO1/jl7eJpxk1jztRLJkPGKUlQ==","signatures":[{"sig":"MEUCIEPNBloSb0khzwNMUPOdP/NHsFDtt21HB5lUdke3jd5vAiEA1qR7xux00TFvQRoIPW44RQNH0UIHWOxvQ+eeHZSOHBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFf1aCRA9TVsSAnZWagAAwWIP/0J4FV7ie4eK6G7Gs3aA\nLUZPq/rMbjJGtDyO4+tSy1GWRP7eKEQohmVvorpbo7ZZu5xHEDt1AVwxS+fM\nSzNKYnuZWGLpi78qtdcYhBp+R0AZURDOhdApj6MC4Ho/9DRsUVOQwlABVbNG\ngvs+8t7mzHL9aA/sXdeGZcgbC7dwS0i1CmQYj8E0aR7Pd62tWIZdiD87FCL+\nXzdZ8SkuMqkoCAj+kUqVo493pLiirXsuSkaRCU802lUfBB5AlsSw73wbD9tP\nDSJ6fjL+hAccvZOVt0G74rDPeeLTebtRVpvOWoWPGk5RkKi4ghiaJrC4tZdZ\nK8EKbr9pCekVkt8RnXsoeSu487N2aziEsSys2+oDYj2G0vEyKv8W86rU50NA\nRj7WR/HilJ63CRyNnRwthkMsdRfrqJ4NPz1fOvuhRfsVKIbqiMPRnaruImMC\n++dvmYeQ5p4VuIJNvj9MPjUw/NmHvoX9NBhKg02mzdj1hypJx4zy7/wmXpqL\nu8c7E2Z/mAHLOvaGlYR6EAWrjNN+MFtISq1Nds5nnvFAs17/WWw6zOALNKGX\nb7MkIioIChHJruT+j3VnRBXqRlr/Mp3TfuOl8Pc089rsrXDqxVPAbLT8LnRT\nNNW5EBhtIWXnFoLSGWgQy2asY5mrksE/XjaJn/v0LUeiHGGNXvVcUUHeNI8B\nRGRY\r\n=nOhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/utils":"1.1.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.6","@chakra-ui/styled-system":"1.6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.2.1_1612053850058_0.5668919212929071","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"@chakra-ui/system","version":"1.3.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.3.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6d0a27b75dd838f00b1f139147a561562f1eb766","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.3.0.tgz","fileCount":48,"integrity":"sha512-A/yJ8xcrMr2OiyX2J9OS732t7pq+ye7rT0FQDl4H+YObOMsq7B+0JJEBpTP5P174ZKCTOjBGy4muwa8o6GCNAQ==","signatures":[{"sig":"MEYCIQCM8bF9Gp3IzBrp8kuBdtu0UBwFu9EDOo+Xg3GqjxFeMwIhAKfS1NLa8NYNo9wKDmKbxm9nURtR8qJe5H+vDKInyeuC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHoBPCRA9TVsSAnZWagAACBwP/1HsE7iNqKpd/g8VDPMG\nvjI78+kqSZ6A7IlKqIiVcHNAbWrCDKP/Y7ixK57nBPp4r0FDwQwOakMf6Q5U\nlwypbWHPlKdI8xZli4P3K9ql8aDWHDFwQ0r6l+SJQf//Q3a9JYA6+y8WQVcC\nlvGLezwk9KY86m8J7qcAJmhgtMYZxNR1XXai4lfNr70UiMD6rxO4eEucDpvR\nnG0plyZN28EB7VNOf/Bs86hUMC0vl9c/4XpXJxRrNj2Moiifhdm/sA9uM6QX\nsVMiAU2XPFqlWECs8hgC36MmPgmjSCtgNpBVh2cxwdHq60Dz9+2AUBARtT7Z\n95BCZM6IrK6a5wCL0g8UDZsDH+5XItfOVxIYYLC858EH9pkqA3uyvLZ7/DcF\nnFq1YaTSA+vwxYXAmd6gXIPvGpFaErw8bR1K/Bdp1VIK3I6WNyTqMmR5Ua7N\nrbPHkx9Lghjj2xgBBltqDwfKg5vpk52IYvMT8CwzGstqNziwCkQeDZmckd1L\nkQ/zpuioDIo/e4+OOzQif+Vu8g64WUJTFoPndLj79StXSjxSaaLqf9sfjQhh\nH03kHIp/vstTHUod/FFAxRN74OkdGN7DE73u3quTKcGUZLTTYfNLWOspnRpf\n9Kv9NfSNt8ef2V/Y74AhAK5Yp7yPvlNbIJvrdpkhGdmmCSI0oH0s+vf7Z/FS\nHIwB\r\n=URLV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/utils":"1.2.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.0.7","@chakra-ui/styled-system":"1.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.3.0_1612611663273_0.6892910943194357","host":"s3://npm-registry-packages"}},"1.3.1":{"name":"@chakra-ui/system","version":"1.3.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.3.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"65d5d6af288d4b04df088cf3e7c94c4c15b40dad","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.3.1.tgz","fileCount":48,"integrity":"sha512-NMC0ajaCUIYnVxYBS3jRrgRmqK1p39MX1yB9J3BRgfVlKbDizkUOAJaqe+FX//3NVJ++QPJOjUu0azmlR6HYZw==","signatures":[{"sig":"MEYCIQCMeVjeL+6TYPl2U/XpG8Cj1PlDwARYvlLxlSpfIi+j6QIhAL6TgIUrp+P/r4jZOSotcsBwqKTq1ONmIPx4W6nzAEJr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKBCyCRA9TVsSAnZWagAALbQQAJgzAu7ngLXgQm8GH9uW\n7xIbB5w5X/WwaeFPlXdup/ebqkCgVqrP4PNDJAWGT3DZksjTC4fKqC+SlJBk\nd/GEKqotQa/hxFM1KAh4r9vcOVnF5F7CUUHps30Kcon8MRPAS5qpLPUurcvK\nYu3k9KzP4SZvAo5WvSAVHakNngR4wbkBIonReLnYgH6jzNyhuePUJy8cVCZL\n3QH8xL14/G0tl6BwUh87/HQaDPz8UodvzjXzRr2bBTxUpQFsY8DGQThWqs6c\nzph7m/rryro+/X7JfnihaKN/7M+6RMZ3edqXyjeHMG7HPkqFB4OVVT8kMKxN\niL2D1W9i67FexUza8frTeg1VL/xLO4e8zzFYh1R8+ikO4K1xL6FRCj7VhHui\nhuOpcT/NLhwKqg9mo89sPQ5m3Lc0U+hj3pQUMQ083G6qZ1hS0/XaSXma0qOX\nZbQzWbJMXJ2+NcoFy/q7N0FJ1Am5fzizy5ydpWuVOIMytIqW/EUp7tZt+sdC\ntsHCgWX+vhd+psoCwGiRgFFEBemeIx6SqnwmloKgjsvW9UNSKF3NStZPOfpy\nUeJHELdbjXOfloRHxaBdFGv9k++74jhdlH0bDZ95b/w3kqM2aJUnWJ5yQL/D\nM7HOrWbPwtdO3h8doNNaGECexMc0EHC5wqeQ/RITV6TcXHjnaKvka3ftfqhq\n71qA\r\n=Amme\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.10","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.20.1","dependencies":{"@chakra-ui/utils":"1.2.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.0","@chakra-ui/styled-system":"1.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.3.1_1613238450081_0.6221717964527453","host":"s3://npm-registry-packages"}},"1.4.0":{"name":"@chakra-ui/system","version":"1.4.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.4.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d459656c3009b6339bb8992cf900712d8de73731","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.4.0.tgz","fileCount":48,"integrity":"sha512-AvfrF/eVMYJEw5im6sXFcbkxCYQP6RrFcpSjcQ4aD71tfnqDCrlr6oQ8P+fugbrUpGSERoVWpQs1rK4LMTWNLg==","signatures":[{"sig":"MEYCIQCWU+vymsGHjM4UAHroZOxQ5iTl29RJ70yaaRjRImuqzgIhAKTJ+aKxKEzTSNj9IouQqhexkY0pGTT2Qc4qhHuB9xoJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":116909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQo3nCRA9TVsSAnZWagAAbRgP/38eoi8N/Nev5zjNtbt4\ntkBbpMC22nvka6du+XC9G4reLe1TvQCLiDQO3PWI+1+xA62WEM2R+rKPrl+N\nhMFe8ysafuEoeFzZAbNXOAZiLU2wIgD+FsAmZGzTvULcEMnOHJX8nYgsNFlS\nVbMg4ZCScfvn9vV1Rug72xaJdELGTSdA2AruOdvYJAlqci87utgZEAetLlwF\n9J7nxeA+x2IyAojrAnRsD8uot/I0girJN+mC+R+EUjuLWbNrfLiaCWnQkeiQ\nsE48q8CQg4BZfRTTSqwdDl2HOqdVNamWTWFgUYDtcoqH8BjcW4HdbPYIUCc4\nyGDqMJjlP+HtR2cI7XwzUOkIBPgMFu1auu/WQk8ohMbhckgU8Lr7Pv+xSQ2u\n1aurnxASLd0yXoC6b10zl5iZsOGVejnYa1/i00DNI1956kTr25mS+AJO9/Kr\n5FPafajCdIDMKXahf7rO68sukO8dP8/98fj0j4lO06Cs/2IEpqIuxWPDCral\nNF/gkyDP4wOH9k90e1Lyhy0yx2CC3Pyqgrj12iYljf1zb2BDOTfVoaSYcl97\nGFTPmStw4bIOYPxD4Pr0z8je9y/TAEZYD+47cBZH6/z6poBTgN3NZU+xOM8T\n/z1L/Mbc7tqQyIWchI473lFMvTS3YvHxfbRIJ7nWId/aOF/BlksndLV5uhff\nktCs\r\n=BLAt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/utils":"1.3.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.1","@chakra-ui/styled-system":"1.8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.4.0_1614974432142_0.1787111363664884","host":"s3://npm-registry-packages"}},"1.5.0":{"name":"@chakra-ui/system","version":"1.5.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.5.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"feb83e9f69f17f500bd18c944ff489fac6aec0b8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.5.0.tgz","fileCount":48,"integrity":"sha512-y6yhz7pEKrWYjkLyCquY1Wz5FbO9qTucJO0aHqUBYNrWWRcmcKgNNgnEmgJlUdQotey14UvjwNuCAdkb39f+Eg==","signatures":[{"sig":"MEYCIQDTr87r4iDXWKIANMEEUWAPPep/579FFxojZSPwQuud8AIhAPOER6NQs3698P1wpFZDRFrha+4KIlepNMOIbEBdkR4a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVukhCRA9TVsSAnZWagAAYXkP/35Hkbz/Jk/XS/OfwkYT\nYbyn5lSCb1an4iI+xVhh1m2ecKTHEH7MRW6WciwIFiXO8ZNRh6bVrnrOA4y0\nX042Qw4WWS8QV3jzLtV2OqB+IsVA8sUsftiD4nZ4WaloNsX2cerHDUrp4hKc\nKVUh8zSBMLMncwrBuhEuJOCILHOjavVuIfqXm2wsG5h0d73AAWnzDXGbKuv/\nv8+rtKTtHUvi7YQmw4fTqaUFuzfGbxcXbSa5dQGjoPADlJjI0Qzpfg6EH2xS\nJ3zVehkGi6FgbYCGEX0PYSymkWseBeh7Xls2FKpQM3na8Yq1j9mnvRgeAiK6\n6T8ROyd5npvNzlIium89TSqytBcYGWg4M05HeqFjvgKUT/aZQFIbFg6GAKQc\nSAsyyk9Z/s46ulrp456MOk5UNW/06J89MzqVMv8UYvZI3kaAN/DpHWD78YmA\nEaL5U+QLQSAsdMkc1tnJbBaEYsJ1w5Rcai+nWFbyWpibmY9ZDyHaa6Y/P1wB\nZesjA7HNljmDOOmmt8zcfqqqTLt6FGo6iirEhtXKa2lfq+gERMdFpvInFMMU\nUsa6wSHZxfI1u3sRk6InPbqjXjXFDnCFeCT541/o2vRhqH8EBfH48wE/ua0c\n/baDmoovCxrDcqD5Sr5L1EXn+2CFK43Ed7cO48jROMTC9E/KLxqDbpxMzpVT\nPKTx\r\n=z749\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/utils":"1.4.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.2","@chakra-ui/styled-system":"1.9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.5.0_1616308513069_0.5463433211977955","host":"s3://npm-registry-packages"}},"1.5.1":{"name":"@chakra-ui/system","version":"1.5.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.5.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ab668a5b5d8f8899cd18c14d59546dff7df4537f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.5.1.tgz","fileCount":57,"integrity":"sha512-rbuCWqWHYvZ4Y89WsSkMvTPFP8usz3JN0/a36nsLzQ0YLG0Ehi6jUhjDSTbm9pQXh8cUpojGGNFtKW79HyIoXQ==","signatures":[{"sig":"MEUCIQDCslsZdGnl95gmJtHHLWRyeUNl/Jp8IGIvYWfyyv4B9gIgG+ZDznmV68/uYNxSObS7fJ6vvPYPuJPKZQBKG/yktvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgV2aBCRA9TVsSAnZWagAA4SYP/0L+z7yOdgraDSJI0DiY\nPOaWfKt7anwUyt/ShB59qs7ossUcMqlEeRNCl1Sa/O3rrisbOvDgh0lSL//1\ns7QX0GL6yKobANUCM7XMPBvuQvoTr0cvtuWtvGl2qLETUBR9rZ64d9qHqINZ\nPkwDXH+7FXSRf2GNncWyh/i40qlFbZIRSO/c0Q21MJkshz0JStmo+C0xe7Uc\nAJHgPpoel5buDYYmAA/ii62jP89w8oEE6ttosbXE7QZujcCumheDFFi9X+qC\nA/fK3UgrM9YgFkGkF8+Jue/LVUDcxQUt7W4J0r69r84MBDINYetsiRSOCu07\nQ/kUUl97Gm266bPzjniEFO9O14ZiZWRnvU++lUqOiVpVJe57K/euC81uyUaI\nku1tqWD1D7kI3FFATkhLGTt/bLS+kfnwuc1Vb1LVph4O8QJdN1gQjBttpaEZ\nrjMnIwryprIcQG00ZxL2cz/tAZk50TRps9a/Lxc96AqPH8LJwvAcH7uT7b2o\nI+t4TomdGJsEHztCkr/VR06RqnWsHG8311Xp05dyAnATGKp42+ydveKpqHUQ\n5FJ4prpjnvzf41XmEyDpHD+muL9pd2xBUlT2QcS4LmxkW1KX6ujmAWE6156w\nrDpFcOqgFS7sL4xSM6/YP2oPK2Nuj8qVR2p+p9rJ184CeEUAyuln2s+Mg8KH\n3zuq\r\n=rwfZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"7.3.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"15.5.1","dependencies":{"@chakra-ui/utils":"1.4.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.2","@chakra-ui/styled-system":"1.9.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.5.1_1616340608931_0.25876596943209074","host":"s3://npm-registry-packages"}},"1.6.0":{"name":"@chakra-ui/system","version":"1.6.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.6.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fed9393928b9cc17bdb724079aa6990e35aa6a4d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.6.0.tgz","fileCount":57,"integrity":"sha512-bkw9lnlLd8ZJL+FWGSrBOmnbpmC1i6My/Jy7KOVIci5hlqmsC2DEojmqNRTj0czRg9kULdSICR3aFeYaPpMacQ==","signatures":[{"sig":"MEUCIQDUcHDyCYb51D5DomCHM4tkXUOjhMwXJK2NHd56gtIWAgIgaa6wZoPP57EiMqfzFyNpslnJRDL0WIRQwUV5uiW/PwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYxjKCRA9TVsSAnZWagAAFU0QAI3YAG+mO4xxPuGLVVoa\nMLIPi1sNk00m/UkSlNGq+QU8WNnuWDerEYSu8aN7dwpCWRRG1HUlGRCMYCSa\nzcPQFc8luM2GCozXi0icf5uezzxhzoB+2JU+Y6QduP0kN4aSBylnSDVyeKQd\nshrokih34EWsiFOjFQBzpeItOPsBvQH61/0PNF8Gen/tH2+dp3GbiAJKsJb3\n7aQLhNEzqgbkbNV5pgEU91ZduWBuB1AslYa8Y+LzVADp27bKo8h4KeCdRkMh\n4ryHPENSIdEv/ab67i7zBGKrWEdBm36l5SMvEUbAYkhVbzCWZ7/kFgLXydGy\naxpal4ITxXEYFzUI24DcrWwHPqhtDmetrPSa0Bi06V7wmFVUy/LcoWIADJNb\n0qroFLZURQjFXYkvOGwxyToCFsOsQtI7PPhYiv+kzhAhIO5yAOpNwOmGWxST\nyLAB+oEBrka3zYfaouw6V2JyyvuOmdUVT8OttTZ7Gg/KNdy+4BG61j4r7M2+\nLfJHoa9QuhW/EsoR+CqckDuvlpEnVH0JqI+GM9f5qzVZMMrQoMZE5VTPGnBh\nOUoNGJ/r9ZHpMZ2dfKhy/DncsCVRtUddpseRo5zbUw9oPrfgWQZGYFee5rZT\nIfXT5YUcPj3EVaJyKGh6p66HVN7RNmKBkt+VaxX9nk7WaaxeXQzfNKEa6rbw\ntaDJ\r\n=S+gQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/utils":"1.5.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.3","@chakra-ui/styled-system":"1.10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.6.0_1617107140314_0.9301148913901098","host":"s3://npm-registry-packages"}},"1.6.1":{"name":"@chakra-ui/system","version":"1.6.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.6.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"20ca13148a78aa3a1662df8be021449af8b712dc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.6.1.tgz","fileCount":57,"integrity":"sha512-zwH9jiGcYd5IZ5454EMfslEcbpigl6Kz/jBE1gsAA97SZFPxUhVamYKn0l2bhaYoRS9ZnDpKx93pFskLCMhBHQ==","signatures":[{"sig":"MEUCIQD/aOHvzyME6iojw1lHDHwh0rZqd6PhFmWAq4HCEAoDGAIgaqDZo76Baq2uPPcHGNXYVH4e8eRo4eYLtO3A7s+hcFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":128214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbcqsCRA9TVsSAnZWagAA/2UP/339FV+SUVi0nyXwd22x\nKRRUnT4TMLpEwZs8iCNXPhxj0lVDSmqoF5YOf6iQk8Ghg+6gtCYy62dpiJrd\nAG6iVpBnQAaz3uAikHUB7Yj5fKrEokECCdEbeZZsr/uVb5hnHLBzSZt37CDy\njNPi7rDink9gxbnkvFWcXfOnzz73FqJMGJT3941UEwZy7oVaH1JcIOlHQIsB\nLK3uubnt2TbGg7wpG6p9K776GBikO1+u6QnAipusjygQYk22wb2y7hAoHTFR\nQkUxvU/wzhWBK3Czzq7qCgrHy/BlwUC4jwqi5e4SjaVEM64If7DLv1GxDwF+\n6Ouzg7L8zhbgmpBUEPhpbsEOcCuVtAuulD81pBb4EeD+z4ahqREzlHotiLD+\nfnDl7qlKOFwpLYO4o/fbq35s5RqK4B7RC5sOy7n3x2SDn5fLu00pIZJ+w1bn\neFGB5bJCmD3Eh3WhFYhYOgorAYelxGJ3MF3L1yz7bI1bx+jCgvi9h+8Ty5Ci\nmtm8BylsmvQcKbJeKKDB45svgLlvIu7IlhvZhtxofonIfR3nm4F6kzy+Dyrl\nReU9vMep+gvnH34s0bXVAH6uCRiznmnHm4/ZjA/NEnSkynqsdWwvSOwyU5kv\npE/WBfwCRpNp6UTl0zFBeHisbKgxj/6UaRO/zlcWLkxntxxExYTgffi0o+Dv\nLPFx\r\n=qdtO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.21.0","dependencies":{"@chakra-ui/utils":"1.5.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.4","@chakra-ui/styled-system":"1.10.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.6.1_1617808044130_0.7789197123684473","host":"s3://npm-registry-packages"}},"1.6.2":{"name":"@chakra-ui/system","version":"1.6.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.6.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"14b7310e961e680197c72c87271cfeaccabfe267","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.6.2.tgz","fileCount":57,"integrity":"sha512-QZ/TrStf/bpIeNe0A1oMEnotPpUA9cDl+8U3fGeR7lPjsWL8k2vVLpceSrE/m8I1aMeS9U8SNqiwWtXH02c+0w==","signatures":[{"sig":"MEYCIQDxnyyVH8N9tiHyRxsLl5bVNTcclt0ziGe7k9NNOYLfjgIhANZDCtQS0Kk4PI+fKUmIojt+YzFPpZDRo1J6QZksAFuD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":129224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdhc1CRA9TVsSAnZWagAANmYQAIV6qLYXSZli0NQcdxfQ\nyN/NgQAJUUawhXId7a99eoFTEPE/fiKC/4dnwf9pezHv01jXboXRtvgK1hMP\nfgfuLPYwViM0PFw1KKHmltjFQDqpaso4es+nclBdlhnnkh1+zLoxYQ+MAvWs\nsASpqE/64rqWMKgmpjDzWSjZVnk2tSoXBo39uYgi1EJh90O3tXmBbtrwWEfl\nQ5iDEdu+W6cGSzRlZlGbkFLjUSDzqjJEO5biCjg6BKhzRlWXGtk5QNVBtPya\n/IiVpG0WNfx0k4IVb1v2/+XXBft8C+MKyCqlb/ZzNeVXJClkQONVKKlcRXv8\nopIdOyiIzWEp4WvRDOP5DoXZx4wzdY73AjydPGBzyqOvOzOn8A0xb2RFHiVE\nw6roWCcDs9nnVd33ODG0O7jLYbAKK1VeFNVBTqKu76N8fdUIk8GruOh5r+q/\neip6YmfSO8oHEzDDSg8G9+TqZSskFUv96Gh1uCXiQr22vKfnpVLUgqInQBKr\nGQf8TgHgRwsX1NQ2dLgdd7+PjCTcUFSDpZzr6yy98nGVbaS7JXvDEHOBbzrP\njBRqwFbwuw9BrTwqnRSWUwZUV7crDWcIoMw3+M1PlUTqA5e4ENyg1HqwNmGi\nKqHW/n9ogc6ggqgWdFI1JFphRYTLE07jcmmMJflEm3eN8oEPh0gA/SE6boiP\nlcKW\r\n=GGhH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.11","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.0","dependencies":{"@chakra-ui/utils":"1.5.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.5","@chakra-ui/react-utils":"1.1.1","@chakra-ui/styled-system":"1.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.6.2_1618351924968_0.7895733753690317","host":"s3://npm-registry-packages"}},"1.6.3":{"name":"@chakra-ui/system","version":"1.6.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.6.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"93de411087a9d49eebed9e36fe975aded6ce3d97","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.6.3.tgz","fileCount":57,"integrity":"sha512-AmzQGfOFYs2pgZv6IKxAjv1kOGtLnehh3+dalNvXYReSh33ceS+ZYa4RMM1+YII+n9S+5f9fIe49inRiw7YtSg==","signatures":[{"sig":"MEQCIAigj1wgI+o7s+6dHj9yYutAZhZXaKR1Jx/zaQ9BA9fIAiB0Ir8MvDAicMzNcU1q35F1bFc/pQ3dKHP6DqmJ171u5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":129689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc3tCRA9TVsSAnZWagAAot8P/j5yBrcNexaGiTxMjR40\nyaa4XS9md4jkGithBLk4ehuTPME8Ti7mePsdkYBjpqCd/l9CgSAf7m1D6xmU\nsDaMApxsABBEfiV/44WEscRfnUVjYApSRcGKDIJCvM/faL7Gup9Mz13g4UDp\nfIVLvy4Wc2o5UIaPCB9firxpNKSglBlIGlTZbLfMxGV4f0qCfGGY7heziMP1\nzuskEv2Bo8hHKvEp6sBXPNy81MQODnItAxQZnDQwzUzxEQoVxN/ET6n3/0ss\na5iJc4f2+kaumyL6FxU6mJSxn191IA/Z6vu+uHV2MPgTIN+en4dlRQGaROyb\nzm4bZPkdaTA4jRRbwNWqaDEVbFYoyTYwhZfrcKnRi+hCBiPff5nvghFAYa7W\nmbwPdhdH0quIX/dR2XACRJ60oj0Aq3pYvhgBeoof7EbiZP1Sy3jt6/1Q7zDg\ntyCx3JH9K1RC12MdtfqHu1wLnDwNL+BAjdYdewh/m4/8AcRaBdGVvlWmUct8\ncb5feD1uh0LCQBKD8vGncm7bb65f5UIVOZhVX2LueFXCUZ+xh3kKlsv+Lmne\nvCIwUU5A0zs5JrhvOPtjRtmzEsZRZdBkCr7iiiliJcLzjQTPKsKye43/TJE5\nL1VzwBIwNdsWd1SYeVEweaq8mBHMVH7MBb6Sx2NlZBWPMgQj1vEKo5whb5UA\nKfb5\r\n=T3qp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/utils":"1.6.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.6","@chakra-ui/react-utils":"1.1.1","@chakra-ui/styled-system":"1.10.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.6.3_1618857453184_0.6099353272842072","host":"s3://npm-registry-packages"}},"1.6.4":{"name":"@chakra-ui/system","version":"1.6.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.6.4","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"827867b9bea2c9ce72fdc31001f2cb1b07df6ed2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.6.4.tgz","fileCount":57,"integrity":"sha512-sj93AHFIC8XaQnv3CgQt3Zyr7P3fYUbGMxHKxGDMcSplg+lwOoWVX3UhY3HKCezblsib1+HFhB37oFp7jHlJ4A==","signatures":[{"sig":"MEYCIQDj9urkB/7acVwijDm9fIiGaxFIiQpsXz82rDtaTqdBzQIhAMAOkVJD3N665OlH+ek4yR1hzkfVrjwrou+zYvvIAz47","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwwECRA9TVsSAnZWagAAC3kP/A4vcC+kosI1rdrXq4lF\nQK2ESEM+fgnaYLZeA8iAHZ0uOiFuyPo0gQYbJH9L8hUwmfUaHcKbc6rV2ddJ\n46SO67HLzUNCdu+4iNAf7HT8rULYGE5/xl+xUoC412NgQxXNzYRIh7NDdrZ5\nGxKwyFWAY0pmRRhjNgAGP5J7nLcwO9nmJ5UJIaB27a0kOJvvXnqPI/6iher0\n33juhgMMjPlQVFWwyn47oNTB3OIoOrPfL18sua6MkLI0MYjnb0O4IOBw+xyh\n7tuL1YHbjKE1l8jCIxXmCN9vHcWoVGgo4gK23OD6kGz6soj3Z/wnSCOyAgFU\nfxldIO4anZBud1HJn0zikrJF9Zvdt0h16BcLF+0JkzhId89hWOrc2j16v/1j\nr4M8B3lpYAS907ScgMAEmaTCzChTuDKhvBJnnlKFL4xm+s4A/q3K0giDLgZv\nBIaiN0Cmfb3QWqS9el6XZrBVzkaAtUz9LSzZf7M5drqud69E7bXwU3vjDUiI\nPWoiuvdJrm34FmkY/+maj1bKh8/UdAik3EFDzrmnZCXaG9y+tFCQQiUgVjfE\nSINtr8oFJ6n+AyJRHyAvAsQrRPTQ/C5elJtmM0M0QjLHcqou7J5hZo9x2GuF\nlC6WN2V6dyS17wnzD/3HKWhqb8zJwzlZbdhMYUV1uumIHzKCnP4diNXcFi/3\nqEYF\r\n=w3cy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/utils":"1.7.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.7","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.10.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.6.4_1619201027987_0.4467539748275522","host":"s3://npm-registry-packages"}},"1.6.5":{"name":"@chakra-ui/system","version":"1.6.5","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.6.5","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9b44db4573e32af8d6ad03047a0a1c6aba407e68","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.6.5.tgz","fileCount":57,"integrity":"sha512-mGRl+fhypY9ISFD8VrjVGXBPb2ds1TdpYbfJlRZLphZWVze6W2z1Y5geK67ybIx9pTzcChhsgIHeePzWb6wZaQ==","signatures":[{"sig":"MEUCIQD8lsa/MDEYt7LEjf84F08OgpCg/q09R015ezFCj6E/VwIgbJ+VyraWp79bkcxpDDDtoAlbTB8S2NjISCAquMQ6Rr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkn2uCRA9TVsSAnZWagAAXGgQAJ2HjjISI49aS4w2FWzc\nDhfBy4Z9TQ7HM8bjEy/6ROJhpgr8HeWi97P6TmNYXpUgpyeW/USesGacTsch\nzPIUZYW2QgJTSV49C+OWMCMMzJGSS88PcNy1Zx0+oaXo6qFX0U4R3BelqqPF\n5pGhjTyi2Eo+IuzF+fKcbWrD4qLdSmkEX73xpRyydxQKnG652PxEMIh2pgSy\naCUGyXfGnufF+L+2tqFNzdGqOEghi+aXnbzmG5bdwfUdfFcpZNFCI3Z8VxRT\nAJX4fyZG4NAKamgUe6dsXdCJqF5LUqxcCMsjnYuxZFCR0yiTqFHgdHyKt71c\nuG7m0eeXULD7alxQY1MR7DCs63+xZ/vGp16MNtrk0ISp7rNeVLM4yqb11ytx\nAWI5D7J4hsMzRSfh5RK2jbLR1i+BaovXOCFQbzWs3Y9qQZFeKs9HWCR4WZBb\naUFqkq9SHbUvZ7p+ARj8TyelV1hgZ0r650plaxj/yWbKQsLiZ1fnDq42mUwi\nd6FWan4aGtbbjuC3W1kLlmPlWr/JthdfnzdaCVrtR2Nyw7cbTsCJFSG2ToOE\ndlBGtcVUKln559WJGm+FZjOwfQAucKpbV0RDdniduQkADchSwrM4TFp4I177\nDAV1EvlpVJBthCCUa8rNFRFPgzQBOJjMyGtU6D3PgS6oFxEvGdKrAMTQ3WSb\nMeSf\r\n=+ynT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/utils":"1.8.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.8","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.10.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.6.5_1620213166022_0.7537367178901853","host":"s3://npm-registry-packages"}},"1.6.6":{"name":"@chakra-ui/system","version":"1.6.6","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.6.6","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"33a48cad11158704b098cfe28b8cebafdc8611b3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.6.6.tgz","fileCount":57,"integrity":"sha512-G4DACxyNogHTr0fD/M9GJnudqPIE5N6DWnZQNjoqbTdSmi3+L55yfxY/lwzd4ppgdE2vGFWz8acYbp90waxtUQ==","signatures":[{"sig":"MEYCIQDyprxo6IkwH77iMbhtGRsVPK0YC/rGVdbt693jV9MENQIhAI2ue32pfpJ6jbp62mIqqAxi1wdSa31jPGohj2jRnHCG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoubrCRA9TVsSAnZWagAA4+EP/RyrHpljG59Y99Ry5W8y\nQ/W6FtyrsvNyOcS8vtu/PRzcSe74Xrj40SbprnXkYvy9PQbxJ+Tc7Kc0Fi0Q\n9TJFiwi1Dn5zg3NOp32gqkOXYcHGJAYD/m2v1f9VojFngWaFx0OwUppDEK1H\nIY87abTMBcefOKCDcWfpHjvNLco8sglVow218/6d/DZ12BtJK6VLbw1XHXxX\nPNCkaPG0ppsaA0jVJI3VODVFTSu9tJGGuFCMbPHKvemSa+LyGn/UI3hhI3J9\nvHFAE8+Ntw82M4XTALkVTzSNlU0S6dSEj7+1VBAQrfLGVPAZ4mpLXowP05F/\nGBvp1MA3es6hnb0A+KdVBga2IBXOHPfqTRcRrNKx1GO4TFT0Rf7qj1IXfESj\nhvECgcy6xc2QuBW9m/vyXJWpqjq8yOWpYnZvgdkZMIzTXAyhouHuaGkMygl7\n/u71czZ0hRx4Nh+6V+7O2mp8pBdMDzX0peejmPGKsq1Ex9G5Dg7mhzebwal0\n0LLM+FfXJCCJ3VTorppQgZbs2OwGxgncoTa7ce9oMLlLNwbyQcWuf9d0dMf2\n6TtNyqRpAhrgO4KniN7shhMdTWOXAMMtxSigz/JQb/FWFugbgj4NJjDatJGz\nxqt2xcD9606NQehi9Rrvap3H9MWUTRkRSUkTtjSTykpPQ7LrDms82owizd5j\n5ZxQ\r\n=nhpg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/utils":"1.8.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.8","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.11.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.6.6_1621288683521_0.5985079507997049","host":"s3://npm-registry-packages"}},"1.6.7":{"name":"@chakra-ui/system","version":"1.6.7","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.6.7","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"aca7f18e8932a87d6f3c77d619360fd1e403423a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.6.7.tgz","fileCount":57,"integrity":"sha512-dEZzEzrEF2p/b/9b+v/RNoTWCBcbzCz5aTYC5ZkOfYQt/BQ9hT0b4KGuklfvHkqXSbvbwMoTAGmgTV99h8YLcQ==","signatures":[{"sig":"MEUCIQCj4ahXgoW8ov5WpE+MA6nSkr9emuTc1PJ6TO/JtaoZ5QIgPbtBbVcMdF9UTp8sHlbV1xWAW2Kpg1MzAAnO+HbRN1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrhZdCRA9TVsSAnZWagAA+SUP/jc1B+WH2DF/Y8H+QuUH\n4RQeea1JXGJ78GHrI+QrTkuwyE34mOJQ7xZFvHXc56yUys6u7hDEc2iEqgZw\nB35zJkajBzZ2fPy2NU59pCF3KFKizbtAHFXcmqVWhF3VG5SC7tuz4wiOCFVP\nS5bqiJbSMB9yEJdcmSU+eiSM6/tX5SJb3n1gYVJouV2rhuvIrQ54118yPyEw\nE+243nNMLOycH2VM+0USkjs4lSS0hxjAd9xMJP/Z0oxFe/Vn04nGnrOjpzuV\nvyqNAhGdeSYlwcvUADbDKG5pctYdE67jQgbr9H3tDhpd2uuDLe5FibTy8l0u\naEM0Pzdqv7y6oryVxx+hCTIbs9dQURKQZp4eMxX7ammxGuOu0md7LCqkf8vF\n0EUxdIPHGbbCHPyxxBz80sZjUmYRf2bUT8Fxp4o3sE4lK6oY5w9831RZOLs/\nAT8xHc6BVq/It4cm76CHNEmq3lqRkbqYIokcBt1Y2qB/jrKtDQJUqGuz9DIs\n9F/3/5sGHE9p0yOSaQGxdcwLwzlJ6eJXgzxmyjws4TjBkm5byZvM6saGNWKv\n59LbWurdvHX74hJEbkUKjZI6wRtcg2R6/mMYJSYz7VRvSnIvZn/W/d3Q6d2o\nvKoWTq6pmpSLIAnP6X+uDTTsUw/in0W368m1/k4+Q6afvS1NhBhgP+5+Oupy\ngJ8w\r\n=aunB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/utils":"1.8.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.8","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.11.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.6.7_1622021724712_0.1906951484382804","host":"s3://npm-registry-packages"}},"1.7.0":{"name":"@chakra-ui/system","version":"1.7.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.7.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2cd05beabeb5a2ceceaaa628760b194093ab93f4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.7.0.tgz","fileCount":57,"integrity":"sha512-/ke6XjsZ5RwSuxQh9BKdAZZ36buDmUjZb6lcYgYdPW365L9ZwFnT9jlIv3ch729O4xfzXPuIh1pCdrv+iu4PWw==","signatures":[{"sig":"MEUCIQCotJTbU34XaACaWIQcaODhQv63EW9D5Tn535ocOU+T0wIgXIWZBomzx8PT/t4g6xYCCvCpJf0nWQWwO7rNBtMpVz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzNn1CRA9TVsSAnZWagAAgqoP/3QnulE24Pgj692O5vpr\nerDhPk1caRkIVpikR8+ooHK44mnbNYs1FI3RVJKu/uXhAXJS+Qns9TOkx/Q9\ny8jqokV8fR1PYd/PWhkdDMIBdeTZ/tCCQ1Bh5363tNbu3dnCKjwwG31b3dkl\nmjJ/YarNjrgWZRt1BLCz9yX71OhWn23A0kqQKZ3IBJFTjOG/3T7yCu8Zncmw\nobLrO+IpgxQQ1KUn3PrkRMphklnutYFi7MeTyuJqhOQjBnYgjNrSdHjh+8AD\nLsDFxwOHrirFJzPSVsoxRacP04wy8dAjNACWKrWwNqAuYvMcYAHawB7OWGlt\nhEk6r6xPejitDQwFQekML+wSLxTV1C5E9NEIzLuElMlEgDv6R0bzcMCgrSXN\nhsRb+cWYndBz4mLKPtJ/b/GiI4CqHTWU9AhsEVlE6tx8ekqkmbPaW8z0JnBk\n5iWDdTx/c+vSkz6+nPFjgP0qJXPUh2YQDxnqtQKhvub5ncQ38wYofS00RLI7\ndgvdBMixPQSQFyUX2f6fnevO5FUbuWwbuZI6/wUUwpXwpmZvRruKW41yhTLR\ngxJD0yuUPrHwZT77uMR3b4OHBIVWVSysar7ZK7hJpOAFXYs4DBYTXSzdloiU\nFf1k4CEjtWnM3pjAnB2fJVxTNfFCDd005eB34jccbmPU0HQ/yqB6Cb9nd2KM\nj+wq\r\n=BQTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/utils":"1.8.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.9","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.12.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.7.0_1624037876789_0.19067925197073587","host":"s3://npm-registry-packages"}},"1.7.1":{"name":"@chakra-ui/system","version":"1.7.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.7.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b1f311a75963d5ac1f86873d17ba2ee5db59027d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.7.1.tgz","fileCount":57,"integrity":"sha512-1G7+mAPbkGqtowZ4Bt9JwCB2wTJt701vj/vPLRW2KDYqlES5Xp2RomG8LdrGQcVWfiwO2wzpCYUZj2YLY4kbVA==","signatures":[{"sig":"MEUCIQDWpNhVw2RtwguUTOqWCsiocpILZrN86smeordq3au/nwIgVfV2gRXXq7F84TWTzDloivc87QO62GvhtQDPKuR9NwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xQ+CRA9TVsSAnZWagAABDgP+QHlsBPXQPr2mnIMipHy\n9VGDwALsIhFqlbWSKUFIvoe6kCBlC4EQ50v0tt9iokEHL4N6bc1q3tBYESRx\noRtITVOSmyBbv6HuoNmK5mj7on1SSExV2LgZbNqxGMmu8L9AjuogO8BkjAqQ\nf9kzbCOV5YBUkbaHMWKDshj2TK6mqMpKtfPyOgl1VzAJeCxm/JIjiPFoMLrK\nEGdpGEd7J1KEGCwzjk+k34JFWKNwtM59Y2lv8DddHOLjBr6G4FOLfPvL/FSm\niG8Mq0IolfIIgkP9sC3PX/YeGEaYL8xM5Ox+adN0hQ/RmYpuLBX1NLE3l2fO\nKa9Cxdt968Q6hHMPfP4vpt8hLrnuUek7MQwvrJOZA5Y2z5KWwA9ZEyvRbC20\ncVOZN+VlTFMvzCX5iWfeMExdpFV5hptP5x85Xwtt9SuL4TTXzQTb4VBaRCQ8\nasL/1npn+sbk+omgJCj3Rh/zGUEtfQiOAjpmbB49/nzCdDQHQJ+xGqadH13S\nJUfJfHv7kyISzWPXt3b8H4b1WrjeSZRciWipj0Pw+O0LJCKZd3Orwae10JuY\nfWXWcyY1nVw4Gw6JQz3dV28YkPsxgmMgOqpxauw1qjIxIoN5XQCYH5gDPt5t\nXf+OXVJ+ADXDcuAta/fWQ58Xy1RqblHJd91nAzzxcD89G+peDdwWGufm4YPA\nKVrA\r\n=GTch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git"},"_npmVersion":"6.14.12","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.1","dependencies":{"@chakra-ui/utils":"1.8.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.10","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.12.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.7.1_1625756734043_0.8624739980454705","host":"s3://npm-registry-packages"}},"1.7.2-next.0":{"name":"@chakra-ui/system","version":"1.7.2-next.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.7.2-next.0","maintainers":[{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f6241252483e88d7afd905bf6e266bc4badc4bf4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.7.2-next.0.tgz","fileCount":57,"integrity":"sha512-KYkJBaaqbUhcqd/ZRXzRxAAYMqxjevxdzzJbuePvWlsmIfhVK05DDA1t73cj5bAM8C60J7k8Teo6vdbhaXrMsw==","signatures":[{"sig":"MEUCIQCWZmMvAZpcPwIvdvrwjiaS79VNaGtU8jPOnn30RSMglQIgfI4l80PSpL/W+NbshQbyX/LPO/mvYmh/797FOrHMbdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":134835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDFQECRA9TVsSAnZWagAAznoP/1eWIT25NID3bOtLSr0b\nrEKLiYZkyf2+S0ptwWrXoc+F6DE1xUmPpQUQcC3Sfvjc6XOTuF2YUY7Ze/SU\nKFrO4jD8EJ5kkvS7gCgrCIWTdjAoFxBGrlqzlAax3o64n9e/JsC7abjQiqQq\nhtJ1TqQ2UHdryEEEAJ9/+g5/yfBjL6UJq17GEl1Xl3l86CbB6kHDNR3rX1bu\nugI+6kw66CbTDKClbnF1BrcH/CZJ1L3Q7oCdZOGLsLZkqYouz7b2FV+WESWI\nNfw3NVqL3AapCnlN2zG6xFkwcXvVeAIPXFy2ER9disPCAvwwqfYQuxj76gVo\nQONLFWVFz43T6dC4H25oCdmu9DSkrTLt7Sqz+Pn5l5+td37EMhFllwh0s3/N\nS4MoaYot2PVISrU0++CcKs/fQ9qDxXuHmGfqUyRDng4DY4sS1nkmPfug9EqU\nBMmK5s9ntLMnKpftjpRxfCzF4olyOaJYpxXQBbwwsGTfCkBp/goJHLKCAMul\nOrJYkHopWP7JLNgN+iWEGnx0MbKUUyHg/p9ppuThF82WiGQA7qwingAtJWZZ\n/vXjWLCWWhKBsYNbEI9l95lALSAF9EC/pagP6ebyPM8ZBIyNX0yySS0tzRXg\nB5e93PtOYvRGmxtf1W9KAs/wSsHmret07JPQiB26NTz1HsIm0ZtYDcV6KhT7\nMToD\r\n=PEqy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we think there still a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-component. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API to design a common interface to style any\ncomponent give these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"6.14.14","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"@chakra-ui/utils":"1.8.2-next.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.11-next.0","@chakra-ui/react-utils":"1.1.3-next.0","@chakra-ui/styled-system":"1.12.2-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.7.2-next.0_1628197886091_0.1805598328660709","host":"s3://npm-registry-packages"}},"1.7.2":{"name":"@chakra-ui/system","version":"1.7.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.7.2","maintainers":[{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c06874a95108be959e54542d7019d179138843ef","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.7.2.tgz","fileCount":57,"integrity":"sha512-/j4VJdsK61fD51uZRltN1t+FiteVAq+Np2lj5RMscieD8/jwYxRvl2j6kK+QdEogJjNK4VrRg66D6882mL+8qw==","signatures":[{"sig":"MEUCIBSSdWq3o7qO/3eR7QnSDHrxa/O0+BDXEeSkqgl8vsRZAiEA3O0ZND8lqQBjfMxSo4N1S/svJv72FR6QVf5dx9qmA6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":134732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEQMKCRA9TVsSAnZWagAALOsP/0YDSEGPuUOjrKYVuYAD\nIPd9nyBCiBEhwPLDW6ykuDcWl15nve8atr+WcsFWmL3hHyERW5DXxRd2fxWP\naTQoqUms9epZfNizM1WP/t2HwJdvijTJAbbYlKXJQ1dxr+Wy2O8sQSEy5k7M\n/RpNhLBuWwErSf028BTOFtBh5PjltviQmCBlLEu3MVYlv9RrCyq7nMBYdKll\nZDTX0GCs07kVKGvUk9fmpPKNS2mxfeMSQsZIFeFk/xKa1P7E9N52gnAIrMrn\nsC1hb0K+KxyFe3qh3yTlwW3SJIN6P/MSIfkRCFkAJh4J5hAJby6U8bhJVygH\n2mpO8zz7Djo9FofrJsYLW0kDv4Q2BsLhu9sGfcga/RsUJVkYZ2+RRdE3RvyT\nFwNNAJoAhEDeAGswGVVKc6Ngn4jQG/pY4zTkhLbeQ1uyzhWcEx14sm0eyLCJ\n1C1cFmgOmV+deEjvcmfD4CHWRbjCs/JQ2aOeXd9xtzfn/WjK2Kx7mGYH7Rfu\nBud/7qH78+7LL5YSIv8qgkcd70IF1wmJKNiIpgRvs2s7gSi1UdnYIVWQh/oz\nr3AfDqKc99FM3eTeJF2wMxdoW2jxflHqNnbtTAB6o/kBebb16XHSMMIDZz3C\n33ukq/LljF8jjgOtS+joEsFVMDS97xoH6h1R1smAZBzwULOEGp8fFCGzwdsY\nN1FP\r\n=MBqG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"6.14.14","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.4","dependencies":{"@chakra-ui/utils":"1.8.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.11","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.12.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.7.2_1628504842011_0.3373440004962198","host":"s3://npm-registry-packages"}},"1.7.3":{"name":"@chakra-ui/system","version":"1.7.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.7.3","maintainers":[{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"344031d27555e8a436a8aeb266242e3c4eb51b24","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.7.3.tgz","fileCount":57,"integrity":"sha512-061lcraf4tNB4ixpnuWetZjr3fAEmj4zHfMznmMx6MAF6lHLJR9tsCF+Cuyj6m9JPwstbBPhyb5arNRXhZGvYQ==","signatures":[{"sig":"MEUCIQDVic+e8cYx9sgVbuRMRR+gY/rLwow60c/JY8B8aXM70QIgXSBZy6JyyVVN7g+0TxZhNrzzThJY1um5BpwQvK9bCws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":134276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhK3UDCRA9TVsSAnZWagAAcZcP/2xzAzRIgwyeW+zFq+CZ\nX4EBWJfof84b9v5v+wnm1xwx95PSaReSuBk/deFiCm+JMdk0pYejGwRmlqu/\nC7IGPNHBv8mtHgptEpkhjfCTB4hoyPrrH0YO42A20gI+m+lBqkzNN7jWWqnk\nXfX1qBKX0AteG64B7kT7oUxcbyh91qvjf5o7lx5N9dHAbFaghMCvPbKSSydK\nRzzIUq+bBhoLrT6Rvq3dH8zkBPM9sr1SE9hpH3DHU+vdpSWf+nvHnuDTqAOT\nIjhy9Jdhn9bGx7f7nZcgmdZGKjgjouudEV9V+ag4DEUeVzPZ/1U8EF9czuZh\nXQMWOS2KAXw0T9+wLIjz46CZv9ya/QW+LY/YH1FLhdhQMIlKa/uEwTasFOFr\n7vrmT3z4jLC0RQ+SBz96+2rgtOHbcVGd1J5S2Ha9pq+NQ7DvBlqYMUhPq2im\n/8fQSfEYcm1ahHJYAfloFZdjIc4xtJb3aH+uOorq4e1koGVTmdnL/VyOQy+9\npbQnouxuArpP7Ev0wuugIBb+XCAQuUz5a0SHuTpv/XoJ0qYDHxQlihtbQTmW\nOh6YKKi4/RM357zLl151PdzkWi7n6ygR9lbkP5Mt2fMrt6YB+3UsQbFXfdnn\nR0PyMlvhltjaLTIlYISo2NQdWxrEgf/Om91X1EjURp1ANAogLxh1k85uvS3v\n8mDb\r\n=NFIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"6.14.14","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.5","dependencies":{"@chakra-ui/utils":"1.8.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.12","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.12.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.7.3_1630237954871_0.8860952920970171","host":"s3://npm-registry-packages"}},"1.7.4":{"name":"@chakra-ui/system","version":"1.7.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.7.4","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"183917e3c2cd81ab8c1591c7d7b741cf69c575cc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.7.4.tgz","fileCount":57,"integrity":"sha512-YZMPP+OCuV5edxXuwDPP7TEVl13Kziq0vf/GjgnCizcgUImSRL9eUaPcF4INvGbvS/rcAeG9mZn26DMpFwVV7g==","signatures":[{"sig":"MEUCIQDh7gBPBWysqFKHngS7QgM5XCXVD4yA8KEiUtKRbvJJ1gIgLwDd+RxWmlU+2yosxmuuqSzrqNhQU2bWtDGv7bykLuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":134645},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"6.14.15","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.6","dependencies":{"@chakra-ui/utils":"1.8.3","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.1.13","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.12.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.7.4_1634254425971_0.7796579485755228","host":"s3://npm-registry-packages"}},"1.7.6":{"name":"@chakra-ui/system","version":"1.7.6","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.7.6","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"641b7c3d97fcd71eed3d085d585a40cd532815de","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.7.6.tgz","fileCount":57,"integrity":"sha512-83h5Ky+Ks8ddeU77ozwZlyxU1+ESysmrJ0bGCohmD69LxUZHUrcK4csUOJl9AuZioufoQdYvR3xUJFEM8v0d2w==","signatures":[{"sig":"MEUCIQDQNuDY/WPVj0cljcK5ZlAzNdz30N10KgLp0hCz41HflwIgUFNqTZA+Ns9/RltE1qg7Nw95V5+WbTYSR55JzcHKu8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":138256},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"default":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"scripts":{"lint":"concurrently yarn:lint:*","test":"jest --env=jsdom --passWithNoTests","build":"concurrently yarn:build:*","start":"nodemon --watch src --exec yarn build -e ts,tsx","version":"yarn build","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","prebuild":"rimraf dist","test:cov":"yarn test --coverage","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","lint:types":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types"},"typings":"dist/types/index.d.ts","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"6.14.15","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"12.22.7","dependencies":{"@chakra-ui/utils":"1.8.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.2.0","@chakra-ui/react-utils":"1.1.2","@chakra-ui/styled-system":"1.13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.1.4","@emotion/styled":"^11.0.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.7.6_1635971585601_0.1669591664926211","host":"s3://npm-registry-packages"}},"1.8.0":{"name":"@chakra-ui/system","version":"1.8.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.8.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0e9e3aa97cc9916486488a71d6249b40d1a189fb","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.8.0.tgz","fileCount":17,"integrity":"sha512-8SVYCmB6qNLS3ZLkRjqAipHin2KYZdavw/GnHh6bVUnog/6smn13iHMQTd31m2w0qmtGF1rXws85Us1O2ApHJw==","signatures":[{"sig":"MEYCIQCFJ9WfQq9yEuQCN6pHEBRmbRq3lIZb7cKLG0gX3ZO+9AIhAPpTbcgtDu3GjOsQzYyCX02d738uIAj3AdI2jOLJqIJM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":72505},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"6.14.15","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"@chakra-ui/utils":"1.9.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.0","@chakra-ui/react-utils":"1.2.0","@chakra-ui/styled-system":"1.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.8.0_1636649816363_0.1425125541421548","host":"s3://npm-registry-packages"}},"1.8.1":{"name":"@chakra-ui/system","version":"1.8.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.8.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ce6c5af67840e20f261894c0310a0547314b262c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.8.1.tgz","fileCount":35,"integrity":"sha512-CFHdAjXuEDIAvNBatTBo1Tfu/HJ1LfbmjGWI4uTRfA4sDIt+cCRc/VKSfl0IKQwy70yJOMoTehZBjS8g3RTymQ==","signatures":[{"sig":"MEQCIFS03EMv55uyn/0riXEl0z5tDF7lyzKvE/htKzCOJF+dAiB3Q/PPcKO0p2Ozg5VdkRhRCdEmNU87Y/OHWAnmgjvlMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107997},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"6.14.15","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.14.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.8.1_1636746701759_0.7414966640334741","host":"s3://npm-registry-packages"}},"1.8.2":{"name":"@chakra-ui/system","version":"1.8.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.8.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"tiolukaka","email":"kolawole8tiolu@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"243820e8b0000a6874cc57218245462d11001695","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.8.2.tgz","fileCount":34,"integrity":"sha512-k/43bv5exPGc6hBVcq5dUdGC+0pmQthJP/VqcTUt0oIc3oyoVSAnJhpmBkFHXYNqj6yYd2K7qdD2PjjbZ5KCLA==","signatures":[{"sig":"MEUCICdYYqQx1cJOFdWr2xc7mgpfGsy3OqF3NVUesCn8ZAjUAiEA9nUofQqfodVCDPVvphoyB+jCtYHir0zu6AnmkMld46k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlU+BCRA9TVsSAnZWagAATGQP+wd7S3eRX64eN8rRY6UD\neMZvUBth2JJMaib/pFSRiGGuhl2bYhIpjV3OSFWztTtMzeFxlNJDfB7Ev9ap\nLz5DJ49Q0QmEROGl4edulYzTrqe7t5PGP2dn3cBPRJdM0SWoHxlDVj85YQ2I\n/nLjB54sS9UATfMZBbAel0NMb+ekQicdHTJ4/Mk5mTR0Lviar/3SHkinp8c3\nXcpxqNWutBFdtGs8hNzsI2UehXiXgdCOO11x0KJDT7DfWcvpmHtjH1nrsqPF\n4JKY9eaJxHZupCJdkjm4tAzN4TosuxCFGub4Rj2AJTlhAYqgIhcIVI1pfeAv\nJq/278ExcwTWr64LHhHKIC20WTI31hnaJtoYU6M/Z6OrMcH9QcSGJgGoW9Hf\nc3+hdJUl6E+wYI9LjDGJZFHgc+F2cBuAQUICMcVPpsexWX4Ol/ABXkFjisZd\ntCXlkOy80vZ1Ou4g67rHcV0yFaA21TG48NV3MMR+h7DHIc+mQLqqAjsUq1XK\nlP6h3oJuCTOWMp4+icmVmBOSpgEQkGfJHsrGIUjLpbyra9MsaJsoShlhCn6/\nufxdhU0e7AvpHwrM/TzY5STFjV8wkCvvg1PLviMlI3E/YPMAEUzopnpiR0MN\nJVYX5hLhLqzuL7LUws857F5fbFSMn+HdkQph3YGQNVbqpFVMfXgr5YWbxe1Z\n2cNJ\r\n=yWPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"7.21.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.8.0","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.14.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.8.2_1637175169412_0.685766296180323","host":"s3://npm-registry-packages"}},"0.0.0-canary-2021118154929":{"name":"@chakra-ui/system","version":"0.0.0-canary-2021118154929","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-canary-2021118154929","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"574df9f40854ec41d21fdad1b624d844ced33902","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-canary-2021118154929.tgz","fileCount":34,"integrity":"sha512-SUmK9nPV8siHicpzDwqnZ3DOlf5nx5ygLL/7N0LuoGZrLHtymt3qYKsEnZS/muX/S7EQUrW8ZOuLc+J+r0/duA==","signatures":[{"sig":"MEQCIHiBkSv44D0GQfYq9vo6Q8CGyUPu4ockCro1TnzL69iVAiAnh5IRme099IineOP0iizK5GaA6JuWOWIylgMy/Mti0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNQ/CRA9TVsSAnZWagAAvbwP/jacx6reK7/r8//SXk3H\nGxwapL86LW4tis/mXAQ3Vd0JXm2CJLpPc9JH21QZsQOpJtq2movlAtBZu2F2\n406ZaXq+l3qa2EsXpSTvcmWMQLKdBOmZDp+ei4SCJG0MaGxyRokCFtv9fpVI\n61HoKtYULT2MeyN+7rxuGP4JpAD5thvaZ5RuYenGJfP1IqEdHRkio0BcSNNG\nJlrVhoSfEBZc3jksLzlFx5bAqGAoogQX1nPPC6YB/DbTo+hNRkXUnnltJ0h0\nEe80TN42cc00gPRHRpssOgpV18G2C71bWokPkd+JIpKtjbi8Lz6/VWBr3rdO\nEN6vF9NHVz5rPzL+UTn/4We7sFvXfcPvno/9rjj9Ml4TIeElkeEzpbixkvYD\nVKN/s00pM/Ff2wyxBxDKA4/BESF2IcDzRaN5C91jYZ/gGXixrn2oD1YlWfQM\nJG3Ga2QaNem14gbZ3tEUtBqjOtjwlAlz8WGFUc3u2RrrKwSPR56QNmvg0W6G\n/lYuZ0Fr2B7yFYEanMQwL4s6HfktvtHPmhynG/fanQGS4qGTlUdD7AkpyFw1\nXPrU2wN5up8oAIjZcxA/jKxVr9VkHe8FIcPsVT65xUHycLWZZxxX9E4Z++Cu\nPens1a/f/5VzO9B1XmJ7EX/ibHtnRXa5kCBoIFhXrw9xKPKUu+6eRSQT23ec\nmoE6\r\n=wPwp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"75e26734137b20dfd350785999d3fd34dcf43011","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-canary-2021118154929"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-canary-2021118154929_1638978623352_0.9915684106592322","host":"s3://npm-registry-packages"}},"0.0.0-canary-2021118164051":{"name":"@chakra-ui/system","version":"0.0.0-canary-2021118164051","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-canary-2021118164051","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4b8b57f4c74ab448a082c8ea027218f052c84bbf","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-canary-2021118164051.tgz","fileCount":34,"integrity":"sha512-D8hg2zmDg9pYPvm/ZI0r5VXzRHeecyBH0PGB6lLsj6dnlKwMfO4wzms3gBIbKPZruihSE5vnNavaELh631lqBg==","signatures":[{"sig":"MEUCIQDh6kyE4CaxE9gVHw8nPhtY3XrTBu6AX0rEVc9qlcetuQIgE9Juw1We0rBkYO/6LnnPTtVqFjoKeBCHkbgjMhlnMNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsOBHCRA9TVsSAnZWagAAspkQAIDV7rLVIGTztEeeu8OU\n8e5ls8xwqX2HdKRKzAkwXKWKS/QV4rhIjaAONMK6TykGYwciZBYjtIDTXVh8\n56pmkMfMb/CFUSGaMLl1mJCSpEZs/FQvUeqHqL+GCeMEgHj05cF1N9FS3ryg\nBSwvVvESEQEYwuF/xTcmMObJHVFF8k/f1LThtKPbQUUdNx6BYy3D2V3Qr9tb\ntZjlFb7BwqyOskhgP+PWPEP/ckhacjDSAOPw9GnPb3fAiAtr7Q74hTNfgo7U\n+Y0jQsh9QVer98c0TjYv5CkIk3g/o/k9qKeei7nca698I+g9hYai/tlfxSno\naZvejbO8ECLpXuYAusCVfHzlQzYuyVOr6Tq8xPSyXYJU+HpghUbmzUoDJgy9\n9WVqdFTWDym1ux/3+oWH8JmJ1+2nte3s5dWMaW4GBHlFEPz0GuZFSQ6MwixH\nhUVZnUP7VlI0UXF4vqZ35fgE9Gmd+DalQHKIcv4UVaupVF1IPqhSwpmIPQWC\nhQZBWZ/cI4wD53OaajG4jkBMo63IEOBC5fbOlTW2DfITrzFqYrVo2O8F762R\nTozV9WrR/l4chxyJRtJqyabfwowrzI8Pg5RwihaK/rCV9yUbkUARW9KvG1DS\nL1R0oh08nPInOoYTaoCFARnvQXBBl4qgf/53SnILr6EtxUMQQohIhSXplKOw\nCRtL\r\n=lJn5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"3a6f4a7ab1dae9e667c49a3441edfa8282deb094","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-canary-2021118164051"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-canary-2021118164051_1638981703688_0.7318937884601604","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211191288":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211191288","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211191288","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bd5f592613ecee3642efc89bbf1b7ed82a4fb1f9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211191288.tgz","fileCount":34,"integrity":"sha512-5WErzMwgP1zT5zOCHj0afR6lutnLgxh6SNIU4DVUg2D92I3XjSFcPAQ0VMHCLMpulujKi9Ee8oJy2dxg7zzP1g==","signatures":[{"sig":"MEUCIFKnczuVBorQ3ZqU+wkVqTKbkfufxMk7OyIjKVHcNyWfAiEAvh5GFJMuL/9EmJIpW586QR+TpmI2YCpguWTQavB9/SU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfHRCRA9TVsSAnZWagAAJQ8QAJmYMVsbctPcO2C526gn\ngPArF9FOE9/dK4MhuIi07DcQRhcrc9X6haUYZJLRxHo4F/HcPpc1Dlx3Y61x\nCnqCr5D1IbR7kYbcTpNb9+fXSutDyqzuU1a2WandpPnmdK/xONfh7Rs/w+a4\nw59Xkhamw26uyMrkSrn0sqCotw2dt+nYkijxZmzHYZdNqB1bC03KmGF6MiNy\n3P0HK70TGcMg0W1TyhqkyzEWnZxKnPZ/+zgZiPi5F/bnFtUZrhDAPxn9GTTl\nlcPhzRZCz1YogQLxX5sODai09gvFpwOQ+Quyibbj6DnHRXIL0AIIYUhboPar\nUOvWKKMMj6WgKbDrPRtk9mWNx/PPLGNOhEbyul5ISfnGrmjn9WTQAn8XRP/i\n3Np6okeokjQ8eorpCGwpmxoFuyjwMfOAuozKRhHO+rUTAmK6NORDeK1wwYJ+\nTx4e8DiiM5LetjUe1wRm412CKSWCDi0iLrl6ZGpg2MSuZvL+AEKY/AKfDEkR\nXjP8zBnuSpZVacFirFL6qgPDv8seEn14kkwOLmbtD8Iapgejn5OTKlFwWH4P\nUlwT4jAJyzFHtObEBP6LU1ycjCzeoCgYAc6L3it4NCaoFCF4OvyGV7eIu5tQ\n7DkCij8OStXoSOUqvVg2OT89aTSKuT93hObJtnngJdTEjGq//kfQ35PeuI4C\nIbQB\r\n=zxGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"c7ae55690b66f09cf60a289647dbc49c000ef21a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211191288"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211191288_1639051729303_0.9068767489392895","host":"s3://npm-registry-packages"}},"1.8.3":{"name":"@chakra-ui/system","version":"1.8.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.8.3","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bad447f4fda427fc28e234470d9fcc5a9b524d62","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.8.3.tgz","fileCount":34,"integrity":"sha512-6MaevsT7A2ifgOGQQCQsfvzPVd0kEXqFrX1Oxd842bawaqthmbFdo2bBTdaia/+Ivq/8Xot2uAQSbU+3NuRiUA==","signatures":[{"sig":"MEYCIQCIDiFAzUIQEW7DIOh2eed63FzYIXG7VaReiRgK29BeeQIhAPTSvfjQRM5SqHVIRcTqjzvpx0g5vROEdQbVHBpVI0dq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsgTmCRA9TVsSAnZWagAAU64P/2DnauRo71fT7WnZJnM/\nbJuM/vbW6LJ9AhdXiHcMcVOX+7V/x7kWJPXk4GkDTgDDspmc+A7h8VIA0HGm\n5Uhyn3eXJANBboHFQXIz54nJoFeFf7PoqM8pfurOf+0seIrKE410O6cJugaL\ndoYZVKU867qupx7v9utOslzahdG0nI/nFZflQ1QenolR4hNBSPUbOAQsef4c\nvgTMkWz8lJovPJaCyoZyMO+dUcyELNsUcUXD1u0Km94O/zcGXR5uqSEtC1+e\nT2bNBY2GyLyXAQl3oa5E5xc/NtCtmoeLVJlSV9JgOUuiuCpCEjseThRuXJ+U\nVqRNH5B4HzMQNtKfpVLvI1YJDdRBp6G9CR4t3YKadmXH7F62Y5+NdqjbB9SB\n/Up+93DRcLDLt8EgFNjBXnc5Jbn7HesQL063wyo2oI78FcqQupcchLL1lXZ1\nS3szeVZ0/BJkGp7C5mxc24rzy2Ggu9plfB/9YVd6Pn9CKAaV/J1kdQUl22I8\nGBeyFCSSUDiFox9bh1NZtkrWDVNr6rmTlJxIWYR65y6IgNLjhTxcHs/lDkfT\n5ewkpCRFBoSHX0gt/PjICnuY15AfoMT6I7VuMl+La9fnJCWTW3blFdDqgJPp\n3So2mkCmZWUhlsI1h03mEQq0TPdMRlkUDRCPxv5Cnwaeif/72KqHOW6KLayS\na8rX\r\n=PNEW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"5aa302a018a724ebc96f396fd81e95713969d4de","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.8.3_1639056614714_0.1721211063564989","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111921327":{"name":"@chakra-ui/system","version":"0.0.0-pr-202111921327","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202111921327","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1926c0a6e8f055a4826aefc81a8d3f6a28b608d7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202111921327.tgz","fileCount":34,"integrity":"sha512-V7OemP2/oaL0l/8R0c4ZrT9ERmp3K6zAm9Kfzkb8YBGGoJeUqhv2JAoOiLWRvHUt3k3sUa5huRWW6Ra3XM3ECg==","signatures":[{"sig":"MEYCIQDXY7pvYqAy1aPbowV8SHhEHwFZSh5do3XkaEBZtWc9TQIhANekiilF9yZNQ72xd/wnFsydYyDnRw0GuDH/bWTv5OFG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsm9FCRA9TVsSAnZWagAAvBoQAJ+Z5W9lpZ5y3V4UyWv9\nDgpbyqGR2pt4NHt6QEjkTx53kIfctSFukKMqD7e7F8YDIDeNlNpFueR8N2ET\n8aZ8Nwe+MhyiJYT8wovVCDtM/a4F5SCx4nz9BrxHyYe3jbP7/2zcyu4sEOAm\n7ZSkTsr/1ZU0AGDMzWv05l5z31wMlHJNhb25foRwiiGkzIRK5ca5V/AkXX/Z\nGd43ipdvLzgWFHdvmbZj7Ji1aOMZ0FUrsEiM6viFCEjEOuFL42T2VYtL3zBO\nFx06xgrBrsILKbOcdqNLfPRY1NSxm7q+QYtp6vHJRX27Jzk2yw6ljbzFarCn\nTcUUsvvgmCleB174DzN9b2uoCfbgzmJk0OK/2leoWM0aGbpuWJ7op05BWAr7\n3hdrtww1YoiCrJO9rLW6nXmPLJQi4YIxB6AV7FnjsvqPJu9MaOSX2/xHTPPZ\nLlRWax/joA+yGmSZTYFyVyeAC9S6RHUEDUt9psS+2Wna+oGAOQEyfN/BdDcH\nlW4nga1MS/kilde0Uy/Qy9C5yMvFZnHXhw2g7Og5COgljPBRKP6QIcKP9Fsb\nYHuDiJCgGUFeHmZ4sXcM3jV+8Xg6kr3WqKIlUnWl3ggR5vfr3f3yfaBCsgV9\nX3Si9LiJGD68NKOaPDWvU8CF+EK/1hzffFxrj9SfK9ieLMx3xcvGuXdO0e6o\n+3HD\r\n=8St3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"ef9738bf9a9871141527adf7bdaa944f50b105e5","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202111921327"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202111921327_1639083845421_0.703578349584679","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113195848":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211113195848","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211113195848","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0ea4d0451b3944c3acb3025af984d920dc1de581","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211113195848.tgz","fileCount":34,"integrity":"sha512-RMfTeKQXsot7laal2FLH2qhZuo4zGcuJPeb1Wd7MrQ3vGHXL59iXmLTmkLpSh7ughSflEx5LBh2hgyRQgx+F3g==","signatures":[{"sig":"MEQCIH7SCMja7OFEnIPN60wvG/X/sCkpcXgNZLPFlc14INpBAiBt0zhP+JvKHo2pbAI577g6SEIss7hGsHawMH+1Wlcesw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6YYCRA9TVsSAnZWagAA6vIP/3svCCmkHtAUboiSD3fj\nkyjhcMBrZjV6KDpYhIXJaNCoJ5ZO6VEcZuHHxYpuCRDt61UL0WGfaSw4TGBh\nyl3d7V7VVgLPxP3XZL9GCNhZcno9hxN522AUYKk1ODUv5yxRAZ2wQk2le4Bm\nCPSbxCuxiJbYQBJsft7ITzyz0lw17f7U+c2pZNbt44A3cXB9NUVpqirwvnPB\ndptOiYMknGIEhqVP4H/uF0KOW/pc2nLZr6acVrO3uIKUycQhR7Aw+cu1PeI3\nksHBCo8KxIZEO81wui6D8aTR3dM1Dm3vSvEKKyc89ySrSBFVV4O4Fd/XXDKV\nvY1DE6HlKOBByA2JkadiNOQcn3QHKaPWzt03GvyRsVjP1MPPuPq09Lg1toit\n9cnziQMt70vjTjaSVHv3JiDa/Bpfue3Ytsu+b0IPl2Ux4YxNBOVWnoRveR/3\njiwQBNHM87ujCGl/OlPTXGP8Fv758Kp+eOhp+HfB97oYimtirXtpXg79CZ9p\nXHoNyZ27ZMmVpof4fXDyLH+9+yLUlydkKqm6nIVw6DBW8bcjrn/hoI+lW65o\nZUlquVBQ31TdY20bD7k7H7B3TAh1sqebnG3jt5IHJh3N8O1WNpJ7UZmoJk/z\nGnp18ciAem69OCoc3joyZUU3gLnteGEZCd7kFOm3jztANfS1hX1KvTnmxkWA\nhS8p\r\n=umRH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"720158df0e7984b4e09421f4ef22d8bc5017921d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211113195848_1639425560787_0.07978009842427602","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021111320052":{"name":"@chakra-ui/system","version":"0.0.0-pr-2021111320052","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2021111320052","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d8b22db6542a064405613f89d96d2b3fdd0133f5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2021111320052.tgz","fileCount":34,"integrity":"sha512-EGIc/vQ73eh7IzRpogI6C5NNqkHdJ0/kqs3YLTf6FNr1Co8USdTt1BZ6AcP9ermPqw1qCTkcgJE5bOWxM4QNfw==","signatures":[{"sig":"MEQCICdou+2ozJlG2Pt1SEdEpWE6EKXerp1fUh/Fnm/FvVqjAiAlmjgPtUOr2hpp5O5KYBD6geXvH5aGKuIR4qnx9Krvpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6aTCRA9TVsSAnZWagAAN7cP/jCS42zgldMAz4ctu5c8\n4eXuxxhEEUjL8Vws4ilDfOewUaqHAzRVHH+dzAGlem54sV9N7qmdH6I7+zX3\nkMbuWW7mv9FsgHsuLuleO4P5sqJrH9LdXXSqL1Mj0ry93ZuENbO6xkmnk3b+\nBg7UfsO2YRx63OU3XEnwMNl8Byb3M/ppZyWNCaNddJhts2ylXf7TcX2bPIET\n/hih9w9NXr74OmthJE3toX5jvr99Foh4DVHFkBiaBIvCiH3QYngCc+bwukrU\n/JQm0x2pKzmU7HgFxfTu++z+2aoorHJfQo6i543fdvXl16wFS1L10+tDnwdd\n0XhYex8fdQTCWtaTRX+iQ2yd2z40qWEgHmu86RC8dujeY/477ut6c/qlQgiy\nJckhrmuzcEm6msIZxPTabcpV8L+a3Xthpn1vSX1AJ9PCnHGM+4gsLjIilcMM\n9VDVhdwofmHA2VWQqb3dcG3eHEviq9l8TflykT0ieHkB1CvB3efXfr5AHo5B\nI3wvwneYrxp0Mef+RYs40t2aIBcSRAHYg2tYMpqKg4VC5a/IP907EN+49F3I\nSIXvZstwnuVvjI3QQrwkb3AiFh46f3CKpIyW6zUrNc/WyyIyv4gK0A/tSSFL\nImzU3N0nIQ70/hA0jp49uB5LSKTukkFjazjp+CjULgZLDNucITMYij9QqtUc\nCBER\r\n=QKJA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"3f403d40620547c166c60c2d3dc455c6114f7928","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2021111320052_1639425683146_0.6832665943477285","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021111320117":{"name":"@chakra-ui/system","version":"0.0.0-pr-2021111320117","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2021111320117","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9e7b7a2e5f138a567670fbf9aa4c59961e29c41c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2021111320117.tgz","fileCount":34,"integrity":"sha512-F9ccWcpvAp4SkA5EBXigdu6rZ/LSS6eWp4r9+6wjD8ReYMbIQcJFWhK0kw5y0s3wxXJwosOnf7PTlukFBAd7oQ==","signatures":[{"sig":"MEUCIQDtLSI2FpTpF5nfEvSIk/etg/ICi7xqGsUVjX8uRZm3OQIgJyO5Y1diN6R/XTjbwgoNOKu0tz8dkjBuu3eYJJHphGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6j8CRA9TVsSAnZWagAAREkP/0TIT/uxC70+VZy9KmW7\n+TmA6XW+aD84q0LjjefDJmhH5C10zdDBwXoN7l/t/k8mi9q1nLOzevaLCwA0\nMrXgBoS6+lBgFSNCnDYsMEs/h0nI6PXpm4aCnw+QUsqceqOeGoiqHYc7Bh52\niGURbQNzhw4zlmo3MQRVblc/OpfAQmvAOhrEwcFM2plMhZQ7GjZ5CQ4SUTSu\nDwHTew45HZwZ0arN98RzqwvvEO1SR2dCBMr/hJ//GExwSE56nV2E2QSyKa+k\nDJF3nSSg3ZwP7FA21ktL47a7ZZkllNoEzkgTu7bc+zEZoLtj73wLKK2kHHMs\nLr/MBrnNTHy9S2dNjS61HRShbjGqPicuo1Xo842JJT2yL8ag51AzbAimyPe+\nYmNCLEMxS62FlqzCZiYt1g068dc3SPS711Ihj6AIg10j6UPcmrx1ThqkHtu/\nUIMc9mbD5OM1LqUNa/PGalpZUPIyiuZA7mK7MLG2ezGtsFWLyoewkfE0RukR\ntXQ8kedMnsuLhc5UgGokgaE3jTS29/0wbjlg6o3DMwoJQ7eYVc4jh0EMFz7b\nNhGiIZnLVXv0+XeIe5S0mPOCdlJR8jds3vDIph7K4CXd1NYRttaNiTYyiRx2\nNxYOclfxYGrSuwn765IIjfyKa68nq+eGisSISwoD0IH4LeO6Jpg7p2uLMFpR\nIPdt\r\n=lVgj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"3f403d40620547c166c60c2d3dc455c6114f7928","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2021111320117_1639426300469_0.1944211312551205","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113201444":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211113201444","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211113201444","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"543d2e4ce978ccf47ec4563b3ad77fd66dad0bf0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211113201444.tgz","fileCount":34,"integrity":"sha512-tcdBDhAQmGY+pIwn3LfBoFkR57Cun+ekjBrXZNC9LcOLWeHcqbefI8H7w2nFA7aBss4457UhpnNztCfwygknLA==","signatures":[{"sig":"MEUCIQD5RuhOCiZitWGlRp+10JR6mS561/uhsK6MevKcirCSQgIgCpf/oFxb+CBjv6w0U7rxl+c3BK+8bL4bQyxQ9B9ONzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6nZCRA9TVsSAnZWagAAvbAP/iSK1wLTli7ek8NQMWJp\npoDJx6TZy+rRKL0qcOv378R70qd9rRNg12imZtcHe/kvjrr+85kNaQ9hpzVp\naA3XkHQ4FaYsHJlXWCFFLJcOC/fh0mFqhJ/gBKNWgs/BDB+VymJg6vYqmIEa\niuouqjtomJRwWsdLeqWrO3ypd0Y1ZO3UW5iQ9HtrnITnDFCMdRZYSEjDHiU5\nhOewfTvrrdDh5LMeSYiSK5xyuigoTiMFI7zPPgfA2HiuvRPGy0RzPPuTcRe5\nWyb5Og8eU++fGPXZL47RB9e1sVLfLeoFIja2silzTkrvkV633taHofXyYglc\nmbFCzzhcXwcdA16gZ7ocRPBD1lg7g5Jr2x2E3Yh1L5epRF2E5KxT5Dmonoei\nheGnsRbd/K/4wFEB7Cvive8xdt505wzO63Q9etcy6YK3FxLd3k4A4rUWMTY/\nqi2oNuToFiBJKhTtIh5T1PSvOW7aNCdVLreV5RrLhtZ1He0gNshT4QPRLLPH\nr/AQ+zas3MMOedwRqRD46DsRlpDtLG3mhsL5rmfXBMFN0tZKMSFPV9GhG+fB\nUprNMURJgSsvjSpjO0XQeDCwhkOjRSeDtXlo4POW0Y9NsvreDPPlWlrLEo01\nFYs1BZ2wtqORO0fDQNAL49l4UhBcEFmC8ODEIUoPtOAAqIP1okGDTY3zYJWb\nogoU\r\n=RAna\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e2aeac4db4bb3d92a4064493e9878c8414de8b2a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211113201444_1639426521671_0.7104440364987739","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211113202333":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211113202333","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211113202333","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"423388530519d3754c1c019f16f1f43a55a21262","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211113202333.tgz","fileCount":34,"integrity":"sha512-8xo5oz9yuIBgsr4rJLxSYE4aGb4Th1mEL1WBPMiKW2oFEqiCz1kvI5TJLwdWHu34ByB3jjSQ6OU6pUDURxdtOA==","signatures":[{"sig":"MEUCIHbvelKq6iU4KynuU4olrMWheXlq9ZeW2tHuC0PrfkMYAiEApmMTKaxhKo2xgkGA7jkZmHVAwUz+7SyGSMhtIdpk98U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6vlCRA9TVsSAnZWagAAadkQAKF1yqmVBOgWDBGcOtp9\nRecWO53vrqfmNOU0XA9WF91FpyT0UXB7CxdqB6ZV38emPUtWYN+LAG/8rh5L\n7ZkxClKNDvnU6bKSdwooAK3y/tRGDJw56xHkFbPMrddRm9BBPHqCBcRz5qct\n5GLRjS4kbqeQFN1nLVEJL0vu9vLwhHhK+0U45ejwZs5XGAi6FYvs8Wt8WQj5\nHug8CFYTQnhKXGjOcXGg/4cvbcw7+5EG3l4xKKdyXL+E1z8qIHnR+wO6s4N7\n3WszNTXBT/Itfu0uK8dXEYq1EcNa16beEXeIxCOHkUgTkkiA3P3NO2ZV6zzJ\nOX1d67HNvIQy16CcLUQwWCA+fN0CCPPcvOIKby2jnJz4ppEVKG+khpzPfiuB\nmhyng8l2HkFueGsIybl8GnJaZRicMdm3AQOxsf1qXCosf7fti0q9VIxRVCgJ\nvvEn9WUFlIXM1CcY6uNqZNydpd2OphAXpEkB5CrNKMFcwURzpLKm4Mc3KZw9\nzy/pZjr9ikZVudWjCU5+2aE22JA5itE3zr0H8dee0b8IWSOYXwNvF4Y+BEtr\njXWVWhQxpNa/DXSMgi0a6J9YndpTw4biUVWQ1N3huzOdasOf/WuR7vfwiuIH\nCHzhvHamaJLgBdHoz6SmrzclaZ1k92PUn+RsvK3g/ZpTHgpPExXzjEWGr/Nx\nlXHp\r\n=dFSJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e2aeac4db4bb3d92a4064493e9878c8414de8b2a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.2","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211113202333_1639427045085_0.016964161048298898","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115102948":{"name":"@chakra-ui/system","version":"0.0.0-dev-20211115102948","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20211115102948","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b52e6b75a997af4b04792947925c87faa8273513","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20211115102948.tgz","fileCount":34,"integrity":"sha512-HgTQIKgLSR5WVgR21OYzEjDOrAPbcvxvxUby0vMwVk7X4mORG6z2oK0kAVqXCD1NrlXdcPu3lyi/8a88rVnuuA==","signatures":[{"sig":"MEUCIH36sdHiL/CH7QxCXYU9o6x2uXOJCo45s1q09T1E0SVhAiEArE4I9oL53hetDgII/jBAaTOn3SYbXqzfCp+nUZ2qPvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucPDCRA9TVsSAnZWagAA5boQAIjLDxEr/gwGqhjYTULF\nRQ/MyEqRgeGm3/0kd4d/a5/xdIlWpAYmiLKFdFxzazm3UCoOII96dq9hfxb6\nx162eWr4Dm96xPI7+bAuGItzXt4dxZlUQXMrAt3hQmmLzDzl2AK24z3wc1wz\nDkV5uEsI0tudcEDndrA140JQkWQdObTr/KRkZv8tUWL7LZv6OCAxiEVBPmCe\n25MffPm88DrBT+r5A48KdMjdrMgJzMHP/Y4iQ2BfnjdZ3h5jiC49a44wJEO6\nqINY2cUMjC4TC9Sp4rtFEYuQ7YmXTzmYLMasY7kMNJfA4tYPUGtZXe5jpXHP\nCROJpagawAOuftonN7bo9rEM+zbjuJLk7/qSFpt6UjfPxzNpr/F3m9ILVvjQ\nWLgdPLCHqaJx3Xj5Tscg1zkTjkpnq/4wUKiT7PeKSp/24mehieWjQx8ruhJb\nn5mI2wA+gFL0jXfb33xMXg9AO89PBzRQg6RJsnuHJsj2qRYotYRXE2fzdfSr\nGxH7V/MDXhiq6twxKbYzzAY44PJqDKp42jU36qyyYutPFDeGrHLBB9e7n/T2\nRqv5YQWQxdqAk9PoMZQrKOqbuFjn28vn1n5LSFVWGc6JLGvlmwTk9chiOzO1\nYA58hz7XGz1kiVNe4tc3X7R9z+euCdhv2vVy9cGirk4F4X/NU01ixkq21ajc\nUuWn\r\n=1vHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"57f10d884206eee208121c6784633ad27310296d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20211115102948","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20211115102948_1639564226824_0.9975178177317667","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115103018":{"name":"@chakra-ui/system","version":"0.0.0-dev-20211115103018","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20211115103018","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ce028894e820a210dc426fd9c7d161b7236fa976","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20211115103018.tgz","fileCount":34,"integrity":"sha512-9Ml4SNb9gEvy4Jb5/G+1yLggqaO6pD/4RZk8gmfu7BzhU4Yj9oO1lGEwOtiYqTARipVkw1vr4vyjeX50PJ4BMg==","signatures":[{"sig":"MEUCICF6pzXweVpYxbV7fsqg4YtO/1Dd0hK0Gc7nc1IX8/8gAiEAgXQVopoaKR1JtYIHQSsl3szg5tsrJik7qKvdsI1rlkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucPiCRA9TVsSAnZWagAA1ykP/3B0ayYMHebQZPQWK2Vg\nyArro8jxquJ7ub5PN814896N2jZrqSPvTtz0AmKIHGJ3x67HWXjDBkpVg6TX\nm0Mcc+55XdYyRVbvDrkvmycYSDrx8fd+JGptD10+151KmAEgcDBdYrAkwAbm\nb+7KEFFm1c3JZwJRm/5f2i9ix6cDrv1nbViGT7k1CO1ieC8rJxEP2N5vdy0k\nnnK8FZ/IqIeb3RojMJ4FPbu3rzy89O9GlWGEJ5dBEUqOnJfnseF7cIRRASp7\nn3yLLmxIsoXZkbOy8cROJZuPTAqk2hwgcpnkcUZooionVrMtoLGpozQWYxWm\ncr7Ry/6Ft4N1shusd86tLrDSYO649CPtllq2dM1j9KJsqD0VLLZvDcSk3Re3\nC/zjV8xgpCRmKnvZ0CabB0F39OLyr10+Oqwp7rCeC5ZChLdk/VTzatDoawBB\nnIULXMxWzwa6Y1CHv+lmMhaHAxJXjkHvJFMZ7lQjWCpB8r+iH+MePDzX1W6C\nw3JnkrKcNG2T27op5EaioAhcWy+7BW32AlqQ1FL9/7FRhfKpP+58OB6WGqIc\nns9RIJAAGtsH3sbJhYhidnKYss+1CqMcqnFyyaFmZxg62MWfe8SRVmpl12N1\nubVoyDqYTck7D/gvYcrBlz++2bm9jOI1+chQ3blJeBu+gGkPnxA4q7M9HtEJ\njT/t\r\n=ssjM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"2bc045a671b23b5d3436d9038dfce4c7f75bbea0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20211115103018","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20211115103018_1639564257916_0.3872470812576774","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211115103050":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211115103050","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211115103050","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"96187461a41216d041bf41d8b1f6a8021289583a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211115103050.tgz","fileCount":34,"integrity":"sha512-+bkyORO5KQNwAACU0O1UeRCvaM8ShuuoyyM6Y8nscrvqoNuMtM8uqGbiu+4JnhG3+lFQiJMc4hXOTpykXLKhMg==","signatures":[{"sig":"MEUCIQCeBBTiOvxuG1DVDxHXDGT2cxPqDq9I4y94h2k4+PX2lAIgQg/oxNh3wQudd/kucueu4zgNeJ+cebbYvbBb49LMMb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucQICRA9TVsSAnZWagAArYUP+gNudjBj0tnmUQj6s8qI\ncYhrbQ9CBPYVEBnG7ZG+eF1216vm85XcDU92ma+Y9Ol8z7B7yALjDykucnsh\nERgf0H4uh7Ht+hrDq67xfay8ewxh+b9CoaAxsJ9/Zp1cz6MmRP6sHGVEsf/0\nYgDzH08e8msnEsq1TpGdF2nIuJGODb2+XZvduaQ2WZumcrDigaC9HpZNlFFc\n8vdOWqfiP5PjqjAvnu2QW4dWluGCNZSKrIuiDBYDNfRMLBtZxE8j8HeTnNZT\nGJjSpoUMtsYV02RQYdF1enY5FW7RYd3bFkFL0a2ttPipNogVdFGmKQkLTv5k\njkwltTf5xle7uxn8w+op+WqnQMnBD+AMFZ+noVUmTAy/J3QcDKntPGyq7TAu\n/tmpNRwCo/T4zJg8dgcfYaOGboaxZBeXb2WmRq562adoRGKz5387KKDbmmA8\nx6Roj8bVbSOrWL++9kyrcndEt4fUS0tJ408IlmswIeKRirabRRMqWVPEy8nw\nHh2niMeoyKQkay09rUkpazZPzGW0WFCu2ktZYeQ3e7/hCrhBPhs6sYKXld55\nFbsh3Bm+2BAv8IQrDMH6d0C99YSNpGC6jEROAgv1OY3oFD13MKMS4B8MJ71f\nW6vGcPhdj4zTh/1flpfHyY5A0F04cZtzPEryHmuwCC8jMrVpcgJ6QzOM48kh\n1nfT\r\n=pqnF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"2bc045a671b23b5d3436d9038dfce4c7f75bbea0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211115103050","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211115103050_1639564295973_0.8475850689479418","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211115103321":{"name":"@chakra-ui/system","version":"0.0.0-dev-20211115103321","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20211115103321","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eee0bdecc8bf3a229a31478edfe31e1807199be5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20211115103321.tgz","fileCount":34,"integrity":"sha512-NY5OdL3NVY/ZJUNDsDQGaq4WcVa1ybXAc+38xck+60QgRqYGJ8FlkFzogv5r4ho0QAkm6Lyl84KB/Y4XQShs/A==","signatures":[{"sig":"MEUCIHDoHXMTbWTVazb5nQBwrVgKJPjKIU/L5Jt2HfEWK5L0AiEA++4kYeEO81ZKwaUrorVXCAQ+qISbtaKyzqLyYn2zBHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucScCRA9TVsSAnZWagAATcUP/RVWqzt/vfD4wpbyF6R/\n/S6nAWCemK4yfFJSD6r4ea9y7lrfCfCiuvh9c8sMAUNY2y2U9SvHOu8j7FX1\nSwLte8Gd4i35J1WLZOTXwXrWMRTJP9bI6nRRHSKONeitjRXXm3Wi908nTbuv\n9P5PH97XVVTd1/P12AgI3gSVoUXTJETzi+7+92qefZyA6UKWkyberjVv1eKv\nqZYGBlZiczhsgfd52VDV9y9cIrMpXiybHy8uBe9Elx9WzDXvB7Mw0v/+CQzT\nNRxT3ku2kmugg0/tws/4RNrvTWMBwoO0P8XRyZjXx6gQ6mzV/he/9BFJhGQm\nL4TzAoqZVMg/W014aQAVLeYiywcTaLbGJG4AgALfTq8fjqfx/tNiepON17dU\n2h8QjH7COKPieme+hCdzYekX+qHREGva+17wp4OqRfkSK4mkGFbhXc/F64eg\nIluffipWItiGS/azdbxYFnj+br1SbCF/dKk5DdQp7AvFSqVJ/vj+yweCjBhz\niHVrPAuxZQBwh94taFINKc/pkaiCjUW/7wx/0+QSbcfMPxNS2/3pHMIdKMo/\nWnYMby2cwxn3ZB3I5SuEuwJoOeH1jDvkvymJ1yxrNJFVtkqQtjTaKzb9TMg3\nJWjEEIlXkMw1UyibA+WjldYnXxU49Uo3jaVVMdAqd05I50gU+yIF5ddkFXZQ\nG6JP\r\n=GDNw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b983e4ceb7c1e794c2b901ce16f12016836d40d6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20211115103321","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20211115103321_1639564443944_0.7958645460756584","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021111913282":{"name":"@chakra-ui/system","version":"0.0.0-dev-2021111913282","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2021111913282","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a480d3d7b21f350bc37677bb298a40ab81bb7dd6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2021111913282.tgz","fileCount":34,"integrity":"sha512-FhcwVwMPm5Q26fi9wS6vrRdUuILt3S4dj2OeeXoZ5i1un2fB8FqIUOEssMXBEL2n50Z0egDg/OxXaktv5rzQGw==","signatures":[{"sig":"MEUCIFTvdmHjmiKabMeDsfmhfj/Iiz0Bl7C5gX9+XJ6Ag0ouAiEAmB4bka0yQUggUoXg0impVkj66soEqaIHDAfCk6EHzrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvzOOCRA9TVsSAnZWagAA5ZYP/2JgWTFwif4isNLDDvN2\njRLAW/UJ8Yl/ros46cPx4m3SZtY2p8UB0WS0+iBR3fDr9oybyQB4Kmx/00sJ\nTiHmKQeA9tFRJeqHoq1BAQJK0aEoVW5EmR+v+H+VhM3EDZ9jUsYtz3R623oB\nJm4OSX0rvCMUtKb4hMs/JcvyE/Cv7Owi99OiZZeJveyRHMY1oftZ5R3lAiqT\nX4t8UjovjLbjVsSNpNX5v/Pj3q+fWHPNm8v1OCW8efI4ivW+IHfA76yfRuKm\nkAem1V8408aosFndHRpBu022l+tMkwVIZLtt/cSO9t7gEEGErYg0WQIQXMND\nUE3Zl/iRcV0XNnd3Z0BhEyRTQLOBnNgfDtySxEv0SeoBeoFTyupIzVWfOzE1\no5JAUQSMG9/a7Cn6xGMKj5cgb+AYHZFGBnP+QZ/+GJ16FX1m5P6xBrGHdVSk\nG1WDFKrYzCfVZMWQwFoVvj3mxEySoMC+3G4orotDBPgKRU5521MWklGMxdFc\n+imAU5BvgDeqM4cyc7Ef1tvvVUmerv68nUWgNiO3tMOtl9/d0VksT2p1hvRd\nNdfRNcOoUnTB3zEV/Z888cm6D/r6VdpR8MJxhJ3FW8RK/5koe2z+op4pqOnt\nPxMZOluIMK8VeeoUMKN1hNNdBpc0VqJjogPhLgfbSdRPtFC6XdnMTFpJv+xq\nLsMr\r\n=UvQu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e71186d1580f8a48c8804775328e4dc7266c94c3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2021111913282","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2021111913282_1639920526120_0.7673249712605705","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112024830":{"name":"@chakra-ui/system","version":"0.0.0-dev-2021112024830","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2021112024830","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8749849462e01714df29b8d216140a8a2b796615","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2021112024830.tgz","fileCount":34,"integrity":"sha512-B+phPk9favJbKiny8oyXjFqZ2Mt1ruSgXcmEml+K6SALLzKjt/x4wVFLubOEopZD5PkQX760alOCA2P0+8hLhA==","signatures":[{"sig":"MEYCIQDr1LsbfyDHSMy82TR0dA2uL8/luZFroiLUkGtGVz0hsQIhAJ6VCJJGzqhh4vZBwKavgLuB1ttB1pAMolpEdmg0bAj1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv+8kCRA9TVsSAnZWagAAOhQP/RQIZmNo55hZKr9SGDt3\nz03E2w989bEPOuMM6/0D3detV4VJlfltRWHeCO+5cobgcYMiJLECMenrV/Fg\nCeB2wYeL1q3mzmRYO4b46qIGMQ0NPsdJu/xbZmB/7dc1iMnyyk+gUfwXYAWq\nDQQEP1wk2pq8WgB4vwTssJ+3TmL2uNCFUGT7DBwxRV0Pu19KogNcSSGu37lM\nqkfxzyEcLcGVd2CFiwlg41rJXY18KZbMl1J/vaznHb4v+IW7hixNb2YIpEuQ\nROnHWGgEftDI62k98PDgoKW1+ol69ncY56t9oQBt/Vcg2WWdhkASjXE0SAmf\naw/DnQ9LWwM3bHWkeHvSvTasaEGwUl70NOR0GEYu7gWDSTpdI/ry15qUorWp\nDgOcwh8HbA9X7XKOzKdxdITiE1D5BtkzNOtwOjRXBojWSzD8MUDpmlolUH0c\nO42PIL74gTR3XegLoSiXCuL/5IauxWED+IDzkkaH18dQzSupSxNAtMrCDD5o\nntm3UM0oyVQqoA1i0Jvw/jZSthPcT/tyQnn3pXeBTCQpm/EKDvSdWRozwfTO\noYYxYo72eNjJMQSdUW9XtUyNDE56M66s31ijTN7eKQ5t7a1/S9PTFCIS3RC4\n5TDJKjeMVjbR76NjKDdyxLHu+kmcfIcCyFT6nIs5aUpSHl8qmYw/l42CHFmx\nvvyq\r\n=CZmj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f52ca81e6132842c338193d724d8c6d10135e8e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2021112024830","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2021112024830_1639968548216_0.06234541317667275","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112031456":{"name":"@chakra-ui/system","version":"0.0.0-dev-2021112031456","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2021112031456","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"33282ae01f155756dce3a00601006afcea25b5c5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2021112031456.tgz","fileCount":34,"integrity":"sha512-/wBNzV6Jo+cavU7ENGPe7yOzSw38e4y0W68HuAyDAKIVBuivMMdaBbbf1/Fk/Kjlka3JqxHqLQW0Xb9FadwRiQ==","signatures":[{"sig":"MEQCIH6MK8SIk/8g/FCcTA7Fm8Y7V4sey5gIYvR22eL1JXL4AiA2ipx4Cf7krJQV5Etmetpmj9TLJ/S+jlRTaLFXHu81zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv/VaCRA9TVsSAnZWagAAM/AQAJ5wvtLNSalBROPU4lNZ\naH4U2ZGn2yWmt5CnNYCEBaCCQP1xRsmL7NxE09xPsZgZgb1YIsDQs/6m5OED\n1MEFfnjBHVN7z4uyy9ufppyJmjSLvwrDG0GXP+jaVeVRyu3lGdQ6E3EM46xe\nwmSoJwHCSbaCFisWjVOywiETHSA3prG2ylYIdTisGon7KYAcOMYefd3q+/Mt\nPJDZt7IXHbQZkVWfc0XRgus3DF6eTS1XVkuKM630W8breKAgWCUCkt3rsnFZ\n9odHOH8pBc2kS4jcJ/iueRHFLs+aBIEb4m/B/x9Xwm116MOnMNJ7sYA/0PIz\nPm2hkhkGrWgRzs6aeDPy1+Oq6S2cWWEmw46a3GWutc0kb4pJOb7XrWyhqpI8\nonRLun3SqMj5O9+mnYja9gInBR0yaaOos3/5ykRxDaIlfHkm+po+HRarMZeV\nPMInEGNITVGQbO3ifIR5lYjWAkrscEPerZE3sYNtbs8xtbtGdtl+MBpYrnqA\nLi5L/Fq8aOhKQefPlQbl9tVtaNiUUJ3AoDR48A/dft7ze4zJDafzlVLKTDDr\n11yPKOfS0Crxu3k0kmSd2lMp9EB54W6djR5bM6HLg/YqKhVmBji0iDQSncHi\nhfodszhY66Tniq4B3Lgp/B2jloE2/V81k0sceGVwTCuNdi0Yf5GggKeUgXCV\nJd6F\r\n=lcxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"9eaa11a475e0c24faa96cbb99d16a919c1bd6f47","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2021112031456","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2021112031456_1639970138116_0.37364669710446363","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112031622":{"name":"@chakra-ui/system","version":"0.0.0-dev-2021112031622","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2021112031622","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"12b3b259d4b1879cc0472596da8e166af0e7d567","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2021112031622.tgz","fileCount":34,"integrity":"sha512-kk+ZEiqmS0yfFTTeYEiT5Wd1NgMLg7UuOeN/VQy1Vm+nmHgo8AX8Vg3x1xPn30GzXUfRLDtMVy8maQmkgpxoAA==","signatures":[{"sig":"MEUCIQCzpYv/QoKyH+yb97EpekKmBcd/rE5XwFJFBTreES93LwIgISo0u2UvCMe+2y7gApjbSif5SZgfhocKdY0gmdxbBjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhv/WxCRA9TVsSAnZWagAAMJwP/3WqXrqjojF1JXCMm+dw\nUj0LtT0bf68Ex+jcMfngXmFR+a3QESV7fgrF5CguQdHV5KcJUKm68gTLlDzY\nZxknYtmGw7IkZDbklXf4vgexJUF1kp7NxFbZMaVkhW6VhWh+x0M7MUICHo/Q\nHOFL/lGLhw8xfqq3mUuIrcuo3d+k+KAIN/MgwYCYn8hMg9IVIGrFnBC8B0R0\n4/Pdu9eoOQQkMwq2oPMvK+Estd6/W4ldwdK3LRuDRIR6Lo25VSZ/+D2PUIgC\n3LPZmuzYz0z7oJsDBwONcU/snhG6/6pKT/mjaDdPPPXEgjkinhkZxo5qE5PJ\nufoDIVsq26C6M5zNH4uGpb45QJ206c/53JchbKa549kHwHrhVouK83sRe9RR\nO1fAzl95sK+q3IzoYd6Gd4SF19YMFMFuq5NNCCJqm0x6cL7QtWO4ZRQYn2zh\n3ropj8sbIRfTHG0JG6zBSKTyDXLGX1Vg3TGJk2v9iicznzCaLWMAbN1OhawE\n5ecGdouJMhQE3oryhs1RzF7dgzDTIxsJsnZVD4e4l9rL9YsMNjMYNRzt63Sr\nbJCADBwn3rtNmsv1nE9o980wMUwmDQwVfQ3yZVtewIS5NPxxXC9ciKWcxr2Y\nFyZGkhaAYDUgVbZROLWNvL3gjJUMinSa4tbDanlptEkcHnueJ1NnuNlA/959\nAm67\r\n=vDNl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e6858d2e0f657887b2bfbba959b25eab8cd3e74d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2021112031622","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2021112031622_1639970225357_0.24698667808023256","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120212826":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211120212826","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211120212826","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0e4bd1766490ff324ef81094765d866d5f815f81","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211120212826.tgz","fileCount":34,"integrity":"sha512-sKmp7NnYRPdwGTlslfurZVKLXSgEzdb132Jy1ruJSoCFvGeOf0SylAc6hNwfa1hbAkNMPtDeMaj6sBlD8uIMHg==","signatures":[{"sig":"MEYCIQDG3ao8gOl3Q0ylEjaAiREV5KjKiOYqA/HKFiynDDeuQwIhAOkZQVpWEk1WNwfeMSTxDTzx61C1f4W/9WDBJaNoZrJX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPWjCRA9TVsSAnZWagAAfYkQAJ8+fJm2cpM1aSwv6qOn\n031a+fH/UddWEH3L/kGP3lasFJ3KALYq4O65FsTMEDX64Kr7cPmHnmerHZdz\n3DhVqFH7EkhuFkP7jZXInkumLoUMPm1YmmFOMk68qYHZkYxyai1EDP/4b78I\nwvPPnl83qIqWZ4TaPZ7Ycf5a9OJgZaVtNJqcMgWM5yj5SZy5BGdkO7F8eLNz\nhF8bLdZxc52ox8SPkIWX20TfUz4FSYsf2qR45lSUXrMZq2CNiQVxQtJFQ5M/\no5/w6saMoOCDNHBx9w9fpm3A4jzB9W5lA2wbdz1SpfQCW31CKWQl/6MdKSse\n6SL5szi/Z+CPr05PRgbph6Y5fP83Q7lYXQ9Slt3Q1dmQnZkoNI41PFeHbCEn\n+A7i1NRzQHKrdo9ELM42hd9nPy7bB6X08X2Z9CGJZ01Fm9dJhR8D+pCZEaUJ\npbTHWql3Do+uI1RInPWw389HM2XDWc/y0qrwG/x168u02+0OfowBWrY/wlta\nDpzCZ7otxf4nZbXCeCXgndcQOiNQZN3uSk2f3D7q9A1MJK868yOm1cTuNRH4\nn37a30HURq+6/2Rg86IIY7I2UE7Ps6RZ5TJHXx6pfii1ITTdtNK7gX4p6jNz\npRKPtj8yd+VuXWardm3MmQ5RVkcV8NkKFK0Beytw8ZsbFWByoxZF4Ifr84rD\nMlIe\r\n=Fw/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"4c7a616ef78e05fec559ef1314e6c6dd7c123a45","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211120212826","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211120212826"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211120212826_1640035746870_0.6438119855265518","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120212927":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211120212927","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211120212927","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d644fe1ca2f6982c8597c5cd5a92f2d874372ce3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211120212927.tgz","fileCount":34,"integrity":"sha512-V3lsSn14zR1q+0+OxZxhpazHsv1h8XzjrRbCNuKug4VFkAFhiv+ElhhQhaVsdOWZled8onjNDxlTeLy9ODzYWQ==","signatures":[{"sig":"MEUCIQDxGamSPtw5xNYxnQrpDczeHsIHT/lowQoIsIOKTcVRpAIgNStFCk7LmR5SRnbAwkue8ONZz23EgFaTBo3mwGyGoe4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPXdCRA9TVsSAnZWagAAL3gQAJW4OYapg2wgWkbLUiWi\nY/5KR8CixTI0mWzz3kFc9QEpBqytk5y0eb6Q8E07BKw+v29wjjq0JuO4N0kY\nzV048LYRBA1nNfXTUI9jdEjpXDg3+blAlGV9S5ejagYf/CVf4cxpzJKktT7q\ng8I3EVQa+2yCaU3jPMby9Yj14yMCPDemges/kO3Qe4EGN6MFPIC4ZiDU3TaQ\nllZcADxy0lYzVJbq/QHfnlNqma9SgFiJIMARuUPE703ylbqXBQPmYUSAKWj4\n2i+lDGk29aJxxGsE6QW95q3hA87GfgBDQODhnfEIbTh9LFQ7pB/pLnWtgnaa\nwTJZzRuIOp8hefpsGek+kRc7ufsQAHMwwfTOTNFSDnX6S2YAYdDk31H5H/vn\n533zocFyz0G4TcUuphXpZ3DHtXa6i4BzvbVX0t2ovdU7eZqmAC+M9/SwA2TB\nCyGSru0ByZ84BmdjWka5LPF8yEw7MqDUsr0WsoN+fvmT7GkMFVnWgmPg+gi7\nByAQgJ3c1phGNibiczLP6W/OKnp3Na+yKKqSI8ZgXR30zTo0m7hisAS5QPCR\nhUEtETXJfrQPrvzjHX941QhNLQ2VgzRMcbOsKjTxn5cy1RehHwx7OaLcmB7D\n8HwjN/k0u45UMX2x7cc6jgdkGdihIQHYRzBg4seJEwrDEtw7N9HoZCk3gXuY\n2sNU\r\n=HeFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"4c7a616ef78e05fec559ef1314e6c6dd7c123a45","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211120212927","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211120212927"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211120212927_1640035805266_0.9887764236209546","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120213315":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211120213315","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211120213315","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1cd4198c0e023a1d96c0aa293f402d80ad6af1de","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211120213315.tgz","fileCount":34,"integrity":"sha512-6nWj4kvsRT1QDouk3RWR+n+7e3Vco8l1zTRArnqJUHR4ykYdVn3r8vilypQ9jVq/GmDD/66ZITBQ3/XE6VUGqw==","signatures":[{"sig":"MEUCIGE0Vo7vYB0QLhqcsUoZXaWxHJL0J2TeQOJlen5wH1ccAiEAtNyIl+0G8ngwGOYyUwWkX8AG0h3nVgfnSQerSaN+BJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPbACRA9TVsSAnZWagAAOU0P/3s4oIZLZqaU2YDI/xs9\nWOoAekpSSEQ5RmHm5LUYrCslTuO1pGhiOE+RaailltwnF25ddXBXCUTHH9wL\nkLU2kc89J69gxYQ+qYbM3EFefvnP8W7vSsLxhrh1WNMwG5g7vkiM4AreXyNR\nrs3qv2P3DnUbK52h4zyD9jC02yD9FruV6brbrQ0zL9ADRQkgHNqGieiGIVYN\nXPylTYSLjgnD6ST6h/FDWk+8bafxomacWcnR/ccZtS5YHkBJQK1GKVTmOYVw\nCMwXoRf6LXIZBAWEC1wXBx/AfvBTpiGG+QZqYmwj1RzMX7GCknupWQwU3gja\nsKgbeoZKEMGVVF/39QTp4E9k0z5CCayePoToBJsKZfE1nwh+uUkztPPjkAQa\neywvaGD4gymhDHxMRAWn7R6ovS4+YLQp8NVGNUcrTEv9IUpS6EnivALAOJwp\nc/WcPRmcd2itjo/VtfOT617TuMXnDbBvhJqM2CIs6cv8fk25yZ2XWPCByPoc\nVPJMM0NySag0qmIgM2UmaWSzpSpQ7S82k1Y+ZzDbDOdOYnqmg9y2HT9pnTWi\niZVvLThGr49bylg0+WDDE1AcKIvIkYUOEwcSmJeyDAaRlUbrPh5Nzde8bXLx\nG/unynUC3usGj4z+zcInbaTbMeSbMMRKL/4Pu6Wjd3mfwPthX4qDUIt6hUMC\ncNO5\r\n=qTWG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8d66b048a634383c0f4a99b7a5255d1bd0e94fd1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211120213315","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211120213315"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211120213315_1640036032246_0.9784832306056772","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120214314":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211120214314","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211120214314","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c6361eab7156776b11aa8739aa18d4df85323c45","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211120214314.tgz","fileCount":34,"integrity":"sha512-5vZZD8NdRz0LKczbPOmSgY0T1/gUhXS9UuThw4aNRX3GIVhkacH8PyzzNSjfyYO48HVB/nyuEohecQO/5QQshw==","signatures":[{"sig":"MEYCIQC6f6e6Co9UUPbKZpEDlNzHa9o+RoDvamrTkWnWkbc9FQIhAP7IiH9cqwCsqZkltiRyXxDDliTXv81TAeYswNGCH4gK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPkbCRA9TVsSAnZWagAAj20P/iMqRlm4XLADKSJs8C0g\ntHRYLr4XtvwdkQlhZLESI+LrdRD9tXaCiM/lSKdwN6iag7BsRcxTI5CU6YTR\nMQtTNqHtwze9rFfT0PgEqbS6TG8oii0xsc749uraWn7h35RBRr9VF+QyXUNu\n3GfVQBuq6s1pk8+2I7oB1AuZWgAkcvA7aasl43MLZquKVpG9UH+4d2CQZFxe\n0D7Tmki0FKGLiKCDNu21/DXJqSupIP0p3g5ORIm/E+1tDEubq6Z59hpuND38\nUNEwtN7f4w0KhuBIwH9gllidxkwJPKlFxgqCg08anccZ4NzEg9WoZT2vG2D6\nilt2E+2MWjxwFYAnFNyeDH3K4NPFqLYr0r751oaeTlMpP3JtA5BBoOGIi8Rx\nGpp0jCH3lpOjnAWHxkrRE5jcK9dcvi5Hgp0bpF2/nP9UkamYWWvr12MJkfAB\nE0zCsJLlPwZiLTjI3DQ2D6Dq2T7zEcOtOzL3aAdN52rY1VVCnlhfPvEa3gw2\nd4BKgyDj34jFi9p2UtD1bItpluTtYZ4mxNzzobLv6gFQ3vSGkf/+s7ztOKfx\nrxp1hSS48U2ht+86f+xNLyNjrORWsP8BR85vIkLECCvYPzXwBsNT5sgkKlSe\nRCxQICrRyKljI5xoTxxGgDlYRlFs5ntL9g//nMB/vX9Gm8e5VDX40hlUMUKM\n7Rks\r\n=QWq+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b33d07d1bc611e7f89c90ae40aaa216980618a62","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211120214314","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211120214314"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211120214314_1640036635056_0.9337658060173755","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211120215621":{"name":"@chakra-ui/system","version":"0.0.0-dev-20211120215621","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20211120215621","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"57332bd8b559caccb30d2ee47cd5f5c2fab5c480","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20211120215621.tgz","fileCount":34,"integrity":"sha512-cLLQAhkzncXbndOiwZMRsMZ6ysXh8GRjVnPWt8lpbINQ48ew39Hezlc9sSYt23lhDzJlVdNE5pSddQoH5LGQTw==","signatures":[{"sig":"MEUCIFTomAgjJ7Xp9BZhT7Rghy9koN5owa7vABY8vAkYIonuAiEA4krvrzfnynpCPGDvB6FwhyqR5Gv0Dvp1OJOGi8j2ciE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPwyCRA9TVsSAnZWagAAHdMP/3tJDB/XLaDfuAuUqxjt\nvnhldT5SUSXpNEH/GWmVvdu28frjR/1S5yCsuXgsqjJeCS1PMx1zgJUYxr0v\nh2pIFP7b9g/hVNLY7swvT2FpcswOp3R9OnKxDWy7HTer7x5k5kzkNQdRYT5j\n7dChP1w3+bYjGoUDpsSBS7/B5mivgOC7BZYpRR9Fa/Bg9zwHaT2exGk6Y7Wb\ngNCQiP0t38KM4/kJXcdTZ9ter0k+Zt7PAMHdPZGdW/pEwsILfdAQ5BUjx2/X\ncun023Ezr2kRhsJiy9RGAz7LgLslLUfv8Nh7ZVXg/xbvB1NgkAqfSWr58d/y\n/r2s2mOlH+sXQPGG/x7zhNA5YOBPTys1u1v2SD1dgvVTJJiQxIa7PD0p24Xf\nkIdmcYKLP7fSdllwiWzg8grTtn1ymTWTnHHCrsfFmrH8lmHyP6ZTrkoB49cG\nBqQlqPx/7QMtqoRgpArHgEufHonD0X+d/CH7y0W+bAxIFkOtVZvj2qRMKPUb\nEpbxsFNkirTHHxew5pJdOlaIs+R6ahnSNwKno7W/juWxMvFKqn2JST9zYyd5\nil43/zdoELJ93QOAWq0tbQDi60e6QsniKGyb5m2htRqKh/E8h6QpQ6SQ+/ZE\nXcj7ZmROG6qtVI+ZhSDFcoB2gdDKyLbzk2uV5w5NOQp7am15kfRu2PDZv0NP\nOaC9\r\n=LLPg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"96c4aabb5dc85bc41b00bb5fe4e9acb6c75d0364","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20211120215621","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20211120215621"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20211120215621_1640037426169_0.23356473024470126","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211120215645":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211120215645","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211120215645","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3e2799f557b462e523d206011185c8d01e453fcb","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211120215645.tgz","fileCount":34,"integrity":"sha512-czD8/4BoLR6AWoiIsYY4TNwlt3ryLIlAYVTYYezXu4ZnFwenmfY5T2ADg5yDq0oAe5tyUBsuDYWKgCUBHT35Cg==","signatures":[{"sig":"MEQCIH7cAR14iyOpdnpxr3megiKReP0mX6tOqxgBGHhaGczbAiBw60TyNwJOqcB78EFX8btUxlWBvrQSXirJ339aGSuEaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPxQCRA9TVsSAnZWagAAhdQP/ibnB125d9iM+176aR8G\naitj2+bBv/6+OqOX7R7xLY1ofXQUdcb5m/jW60tapMt5FJw1W0T9WVK+xPOd\n8qA1oc5SGaa7F89wE/PZWIK3OZzDIu0RYkz4QdtdJC8DE2HKXCVspYuc5Kak\n077mlj2ryxas/T9CtVnPX8cMC79uXooqpSYqfnPaldyV+rZ7+tPAm0bctX+T\npXbKegy5C7DZhlLux3fpIlcfiC0olq9oz/f6HTvDHlvbEAv07ifWNAZqc7k0\ngKCwvu3/MvRhTmAgi3Uuk5jUEvO4NMj/iVdnowUBrAsprbzQrGqL7hRpqriX\n3pwZ0QA41PUbW3L8bV+pZ8w1INHz8shLQzYgMAfNRmk1MxCyuGETfCJc4P7D\nBNnI5k+OpOclghzd101o4w2F08mXpWuR+Rzqw2GUdOYjDkwREQONCdoZ12E7\nmPZpvY+QIkHMQ2qLeBOHxAQQzIddeGFSi+o18IKWDDuM5nH7TzX79ivgu0Hp\nV++iWZI5fPKsV0aVUPBL3uIxqnWyVGkkk2Q5330aYcE5DRmn1CYnpYTJlvRj\nFYNsolYZgrAR0o70vleu4MhcZj2HYw1JeNvYnvjTmvs7o2OpDZXSQPtqEBcj\n1a8Jg8hGpdum1JwNw4T0y/rC9zJjtCcExuaqS7WHiesRkuvDitA9+DWLr5rR\nZfzG\r\n=L5rz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"96c4aabb5dc85bc41b00bb5fe4e9acb6c75d0364","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211120215645","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211120215645"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211120215645_1640037455890_0.6422242223893042","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126151058":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211126151058","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211126151058","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c3f6199c3d418e2cdff79da918573564faee9840","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211126151058.tgz","fileCount":34,"integrity":"sha512-mcWyRMGfkRVo76qt8rpRCRL3Rmfcj75PBxTrCW/rLj/Chn5rpy/H7230zWCSFFujfZNmnYaf+yh3aaoU1ySv4g==","signatures":[{"sig":"MEYCIQCOCLKQCa78+DjDVXfGwGVvQxMKuVp8LZyNq1yZd1vfTQIhAOj94VT/koV915x2IppyAzRiQYoyOJAi5Blf99V4tTg4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIYrCRA9TVsSAnZWagAASVEQAJRsvYkoVh0gQVhWdnQa\nd0xxloyPYH/5sl2/65pJiRlVehl0r//MWrQOhwTM6io/MkMdjhzDoc0W91Ps\nJpBuiMFT70aLM4tsoInFJ+fvoRbklmZJdhDh2Br0CLlPhD4rP9dPS5XCAmFN\nJKT9jrqIWGmsztoifT7+PExC78oJe7B19ZKX45DPGsAkJdPQkugrUmDyu/8E\nDA1+MZG9dmwHCOoBMR3XhkbBVbZjAOGMQh9SaJTkrcIuXUvOr1bhHP1wI2lD\nvpvsTzQL6AL9nWgc32PULCljzJ1Y3Eotf0pzd1elflKIX2d/adgZawyEVy08\nskj+zqaSoWTExNJTqy9c4Fse7GMdkSPftkhWUA9QNmLysrgPtDWjxuPIC30D\nz6H3aezwYy4T9aW2jaXkaGXMdIRDfZ7pi5CKZvgUC3SeFntCu2ctRkwu5DX2\nXc37mnJicsmMzWwyoN9D/NWq7x4HDoc8R1QHoUV1C9gHFFiUNgM7RzRLduuA\n4u7hXgWhnp3lbDeJO/W/8K8vVxtN+JgKUnJ6HJeSXMk8O8wmwp+faNy1S5f8\n3cMjcm4/py/APQJR1/b9Zrmh3FEnXLBm8OBlvRpYVwuZRB/OhZ1ORg/uTJAL\nfMPBiEInUPEbD9XdggdX90fdAghyNofCOFpTE4GsrS0M7CemwcuV0/bFJG8X\nBp97\r\n=bIul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"813dd6e4e40578420b9934ab54d887e35f77a8f8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211126151058","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211126151058"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211126151058_1640531498104_0.517135579215654","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126153437":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211126153437","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211126153437","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6ab53a7793010b01162cbf7642ddbf164b881d97","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211126153437.tgz","fileCount":34,"integrity":"sha512-fcRijSBjNYneM999oovBh5i1E4XmlgeJ9uCrMoIh0/a9iQg76k9RmV2Sz1MxhVD1U81fMuRxzXjUhIHveeAFAQ==","signatures":[{"sig":"MEUCIGytJl43mnvv2KTjhbybqkJcfeHXPFlus+liicyE0N57AiEA4x6p4bGPc4UJ2pqmUYTfDkcy4zCHmrWK0dxDKHW9PL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIu8CRA9TVsSAnZWagAAH3cP/i7xZ+8chvtkBV9Zc8Wm\n7VbHocO8KAuPUceBcVrqVXuvj+1NYbX7UgFgJaBGEncEle+MhFEnjPGP0yqz\nW/15XK9j3xxZ/F74o8KXULrrpT3Vwg9nAKwmkFa5rcAhlJxOclyOHMQVHONh\nuWTnw/fT8WtzT4zYDxlFTtMH8qR4ARI2xMCgpigX0IX5SvuoMKv3c+8+fo5m\n32Y2Ftt0FXbekxeoPt3BOs79FmNc0mRU9kQciJNq0nrUPtqPFR/A01I7hXkI\nlAiZj02tSsNf390h+MYUfpKHBBRVLt14olQh4NiMCAM3OT0kCmIR5+8DAbll\nwlB4CcGj3T1w9/xCGS0gl8qn0KHushO9Lr68UDjYUcWLil3/7533ZIs3CWpL\nGSKOAe5BO90wQpeLje8bFU1YUJZHnmX75f2KCc44b+65cz3OWEQA+uuzrF9H\nGGl8/NX3biCXhpanEYxXGbQVRUgL2DxcGsGT2XbvTHT5XLzPgoLarmOdeVnE\nONohnlR1EFKN73JLu4kY6OzjOZbJMssILiTNtajl6BTtM91vUCSvssKPoebw\nXDGlzdeMqWRIrl4MMFy1kPYjducU0+eDtKYhsLqP55U3yx/jpuSD2LOd68Ip\n5irOwWuvNSyMRwgJo+wkmfWFnGkTO0+QTF5qrAJxgNxkddHOw760hw5OdfID\nZ9UI\r\n=cDnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"813dd6e4e40578420b9934ab54d887e35f77a8f8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211126153437","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211126153437"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211126153437_1640532923990_0.7876847088944283","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126153854":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211126153854","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211126153854","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8637d83b57e272e91fdb8ca21c4bf68361fcebf4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211126153854.tgz","fileCount":34,"integrity":"sha512-+Qeq3Rl+UMLs9pJqiOJH4dSA//LiFK/gyqvi/qlWPTsAyUjkP2ACOfc9qTEa7esXRJ0fdR9tSla3IQHI7gQK0w==","signatures":[{"sig":"MEQCIHztg6FEfQjM2rxPEXwUNUSpQX9evZBh+Xl4sdqNLEYEAiBLGk8ood4VJFpTuRvsmKpCx6Tfj30dYvjROPJmpobLkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyIy9CRA9TVsSAnZWagAAjvgP/iPAi2DJSzpakd7H0Svb\niMegDQI9RomDgoM/JLENnZ/4Dj0NPuDVGqPOkgqhVEnUL7M4KvAAgTQo3nYA\n1puWm3qvoztZMf0m2IRZwo6JjECRI0X4KmOx7o/l02x8PHdaY3JEKG5QvyHQ\nEH00RUo0ghxOxDOxfQ2Ayv0sOfZciJlknRjvrhWmvrK4/gqLatQ8PzFjYLwU\nb2CHzusDyJU4x7zPtFBRAUA4I0fNbHmtqfFH6ybZJSS83unsaugGut44w4vH\nrcFqM5FmAuj7h+POH6iLPNoMENGkIPVhGjv3yIrj/M7b4/LKhIi79C/H9Sb9\nhParAUiAxOpOmQsn7iculJPkGioRmMLgGHzM3TTUpB72s+4qahwX3bdArGJN\nqqp7El8r662k0VrlU6MT/C82EZpdhVJLa6FgnsX759RE5spU5gHz/v/iWFIY\nJEGrVkZ5ceCg82BK1m1GvCyYXadO9jXx6mriS4rUDtg0r1224UrMte54sDKT\namy6k7aB6l8/6ZczGrMBHCdp+Tf+jsObKoNvcSqBtqKbrkCauxmAEQ1K4B2e\nPB7JpxDcq0RUwPTcRuCQ5wTsZvmBtHx+phr644D7BiWmsJ+r83pBtYrAaBG3\nb2gJI+gwBgmRnOSD2dEOfh69WNYqSnFwoQzpUrlYDzdWhaPMOukt32uAxti8\nEpsx\r\n=Ugfj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"74142f0ba07766ee20c4fb6b11a92d6d69eb49c8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211126153854","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211126153854"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211126153854_1640533181328_0.6495755522711062","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211126154241":{"name":"@chakra-ui/system","version":"0.0.0-dev-20211126154241","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20211126154241","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a5e54c023f8f9fca79861d5dc86a442ce9990e5b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20211126154241.tgz","fileCount":34,"integrity":"sha512-tYxBWsQmDv/mmNYNvjChFY/KQztk9d0XCZeokFNYTumY+mJiRV/cKG62PtgHGX0jyBlu9j6iSPLnUsE81TjJ3A==","signatures":[{"sig":"MEYCIQD7XPgjN9MDYpRWntbQSJgH7fI7Qa90WwS/RPjV3sf6pwIhAMrVrVgZQnZUTxUmVqAazV0wy0WPqH1PiC7mcvmqHUgU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyI2gCRA9TVsSAnZWagAAANYP/12Tg6u7uk1OriJwsF02\n0BDYdu5/CLI56GbJXth7paPswaSbmQs8p+1FmbHkDp/4Iilid/1iNzt+TyCL\nUhCnAfr6+02Bpoq6AnlX+5aaHEUsICgIjDgG4u0ONvTdW/oSmnQBatnE+6QO\nVFGRlkZeRddaC5UHdObIclMX+O+mAonz8vgzYDPa+Ln8Y+icO54ecDT0JwNN\nSUVIyubiukf5WuI0e7UsXU/UpQAqym2HI9Rdf9s4b6eiaH2C1bRXw/T8GS0b\n/PbA7dpKdJVyy/VwiqZTMYzGgPct4UD2C8CSVXkK+qxrpBZTJYwlfBWb6bop\nUU3yYWjQC/bp56qH0o6F8n82sIxWE75MHQJci+Z2MLd/i2DBHeUrGoubxLzf\n7+w/pGVDx4ME+M8rZBQH4v+HmZb3fiVtrjMvTq/5s1LKODXJR3qvmC9PcEjH\njGVY9L2Il/mKBFIGHPqBo3IGlbtzHvaUmHeeqLKMZEZ95ZY2u6Q2j/pMrhnZ\nDF71t6IJSd0e8lkRMUZxptcawukd0O8wOj9Qc/DALxHs8ucsIqb1lpsPo87F\nMukDoRLCzUe9qCZM5PBMknZYAmbXdInkirO3v+HoFqCxqkyz75BWDWPABBxh\nPlXtLPkCxDW3h3toknb1bc+9/UchIYGkWEQXMiUoFMb/9f0SGl2HuI4cM06f\nLdQs\r\n=6104\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"ae6fd7a25c543d089d500e328596b399d85afe8e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20211126154241","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20211126154241"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20211126154241_1640533408581_0.7039114101420012","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211126155055":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211126155055","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211126155055","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a68efa814303a0c40702e7aabd50c38e5c198725","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211126155055.tgz","fileCount":34,"integrity":"sha512-t+f1GPAhGGDg9ukq/kM396g0JSeUNZHvaye8+SX0KLoDO9icdmtCZv2Tg86HeDNqYdrpYX1HwP1pJprpvEOVRg==","signatures":[{"sig":"MEUCIEaY5nX1GWQunUzXOAncc3g+WEJO6pPoGzzikG6CoIg4AiEA+Ib9lQfDXdq6YewCjBKAecNvKZZ1I5e1i5zhzS8AOUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyI+FCRA9TVsSAnZWagAAXVIP/0Jg+YVaFf7XBbdnv6HQ\nn9x1ikpC38sk+N9PgoVEcSHx/DKOmTqRunIMqCHmMDz5fe4rl9ybe++S6rvk\n9nH4AFJPAIwPrv52oWJ4vWU72FLuUk9l4K8YkYjYQWInP81ruGuVDq8RkH6r\niQcpFU16yTLq9cRNnOjz7IZX9Ry9CK9SWmu0hbh7Kr8JeOnWgZ0d5Enu2Ygs\nuNAHKuPEa6skoMB/XEnRrx2XSkp/dX0WDPjr5YZ26CopI9958mM8yji+V8So\ncXF87OIaBiTon+F/zxYDzQ0x8tBZUD/41O4kGjejd9Pz0AY3U4CxNm83+G3e\n3h5wKTczSwKrBlYoT8gQCfElmKKcaRVr9MedD4nGOHmGvVY7Hj3pSQ4x7Q+S\nvkwYpBGaajzwgYzlYA2nimWczxiQaTPHm1Y2V8/qmmz6CyZIvflE5fKGv8zz\nCq1QG0WnY+EAQJk0hLbA3G3YXTLDzA7T2GAjZ+0RjOnv6OrVQkooSbrG2Hy0\nFc+nMPSzFlPR2FdR8QDNfTVhN4neb5VcnsQwHlJZBIggwvXiHPujoHrCFGb7\nFMTGN/P7rB2UZYURizk2mfy31MbEhC9fNisks7Bexv2VtxQ9lnBUsl7B6Os+\nlyP1bL0sQVNDfuSg9+bViR8rgGLi2IqmOLR8ZGWURZob6Rtk0Z6nYwZ6HosO\nkjK2\r\n=l7Rn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"74142f0ba07766ee20c4fb6b11a92d6d69eb49c8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211126155055","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211126155055"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211126155055_1640533893631_0.6229348754460275","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112616030":{"name":"@chakra-ui/system","version":"0.0.0-pr-2021112616030","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2021112616030","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2b982a0b984836672f564a5db3d89e3405856963","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2021112616030.tgz","fileCount":34,"integrity":"sha512-rwtlaIF9uTdWg343ZigKKVQTkl7wlFGEefs/NqW/30zXzkf9EcrFcZE2LG+kJwX7PIRygM7SO9AVSDgq5vIiCA==","signatures":[{"sig":"MEYCIQCMZtvhtHX1+3lTrWJsK5hLwkrfKBBz/faYMyUshC7Y5AIhALrcxPuOEFB7qH2M+32fS6FgFL8mmgrsTduES0oNE3/j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhyJHMCRA9TVsSAnZWagAAlCQP/ijl1nHwsZsYrEKUCrUd\nJq65XrXbPItMoIZAlchoicUEo1I0mMKsBtnzL4ks1pHr/ama5BnHJ3xjP5iG\ng0LY0F+uIk6PG6xDJeNiN0T86xNe6bwyJa34R8r1RryAa5yP0QqvMyX9OZBp\nJ9TTprAMsa+2eVcKw4Xk6a4mDu73tsmKQiz5IdHh1cC6EZHzac9ec1m8iPMw\ntIvOHQtr1JdPlQVStiwo7FS6FAIo+oicoiHbF2Ib7Q+BRndue5iNkr9o7yHi\noU5ezFoc8BGRr3+TJHGNkN0ASjIVL3t/wv+HMHNhWeFUrQh/1+1ytjmsu6+G\n3YEzXcejJfUwR6FfQ/E005jYliXKPL0aCEvgbyVaFn35lnQ1PPjaF39WFxeE\nl3OWHw927qG6uf1DXAbxNa7IwbcCGA2gjU0AtAjnxbGD5fz5TmCRp+dzoMbD\nMFV9rZf8rYmGLx92Px/EVtb8JsNFVEvKeJmwVLhYJe248oKPH1aimg0jrbxD\nTlC2N7dktSJtQTp5DEY0Xq62f715eTAZ1ya65TcXYTJgjgSa73WDnrMcSo3L\n8TFscOrogttY6MKgwk/UQE14qh45NakM6jzXeG3xvlYdtCPYZgK8PkuwA2CG\nBRo2+cHwh4GZ5pIbLCPjWJRL1Q6M1onlCF6ssbAsxoy4InpdvVI5wsKYbNdI\nRm31\r\n=JZCE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"68bee23eec488c69850f49cb8c6e55c266c66509","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2021112616030","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2021112616030"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2021112616030_1640534476127_0.6570387219600038","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112821613":{"name":"@chakra-ui/system","version":"0.0.0-pr-2021112821613","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2021112821613","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4cfe980a268ec51f35c549ddb203abefefca48ba","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2021112821613.tgz","fileCount":34,"integrity":"sha512-plpeGnK8wz3rnTNbB1bJKyhRAPxxuS65RaKR1g23Yinr8lVUsKphR2LLS++1wn73sFBvFQqI6HrCRqbu1lK4IQ==","signatures":[{"sig":"MEQCIEevILMpxbX4/+FRpktIrpUurvRYDNkq2x5rRC+o1V+DAiAYHP252ISrpsUW2EJz5FoCBIQtcUIjcHX/euaCvFECOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3x0CRA9TVsSAnZWagAAIRsP/ihO+z/2e5YHguBMP7y8\nUCby0G/ROk//Q7Ubx5tg6WwJ9u0uSDeoUtsZnO4qNTPcAH0YeSrNYDXR8sN4\nqhEDwsNas2g8sJgc+EVPOVRr62bsHNciyNXAIMUHyteyKRRn5zMNd/XNBPsn\niJnyfwR/Pce9MNANZKJJZetsu9qld9W+4KA2H4ngVrioJ93FpYfYZ/cqURy/\nW/aEXjw8Hu2Z8CFK+RNEOMrJpWxCo7WzTyFML6O8St677TV0aNMnFel0STRs\nHoauVWbhzTD8nZCEdzWq6YxUXMFDtbFV5Ir9JeHl+GnJJ5osR2koz9v2DrAe\niLqBTzGHOPrX07IGdZ5W0V63bbELBIoyh3sBxDpi4QPwkL4UCAgwVXYj2ndM\noKwuE/bZNu4MgyseFoRJZjI0ntBMlxazFoC02LRRtVlOR0Cabg7gL2JCBUK5\nchIzGldR5haPL/OFzWBq/R0TX/BKetkPcMgGjm8DLEBNOLgamagl23ZO7Pqr\nOA51VdtUF4DH+uW5XPNHYSgH+SXnn/eAZx4toXduiO2KjOAVqOfri8se89A9\nhsGDpGggdAu6/aE7FgFVMslcSB8Ih9WIXsYWqv179cn1z6BXmwZBFGrRGXB/\nq2ey8C9IFh5mPQXnhMaOuN8hVNpnjI4s1b/uZIngUl1qSQlyEspNr9A44VGA\ntXlJ\r\n=dTho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8721c354cc8b43b5dddf82b9b9fa2fde731318bc","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2021112821613","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2021112821613"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2021112821613_1640725620192_0.21759055668903127","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211128215540":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211128215540","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211128215540","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4676be85ec08392507709dc1169e85323fe01b83","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211128215540.tgz","fileCount":34,"integrity":"sha512-BWssg1XiQJUamKM5nuB8eGt9Mk+LXt+5E3jagckXZSobzXvQoABZwigoJtV6C5kQxkoYz62m56xYaPH7KS32SA==","signatures":[{"sig":"MEUCIQD5l3n+uUZAvV/MOC7sq/+jGa/BmawQ4friZB0jCJOKogIgejXkbVCJcNxwED2UjNWniFHQSpYs/VkLF4l+DjLRFYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4gGCRA9TVsSAnZWagAAQWkP/11vqwJijZJVPbfJ2Tmb\naSw5ChBWzN0F7FQVGnSmLAlH316yXufqNkIDyNi7gIc1ANCuxgXHSM/J7oWA\nBFazxwdrcQ4/sfVjpPnyB6TdrAXBpcwIlGmby0VsqanqzvEHT5a+Rcmb4TFd\nNch4MOGuSnw4q88itLqKBaIapKsG8wJqIJPayFrFouJxT0YNXKVAmILg62Qr\n6HZAyKDJRw7TXLne/9IgIDAlACD3APaRg5c4yfOsulzQs/UVggrWc1Q3gyez\ncxpa/hcEPgU3Rw0RPdqzOwQ140ELP1+Cv1nQISBZ7yHHIwsg5WsCWL+oifMq\naCarMF98uJXmYFA992I2pvk+/MpNXWmHUejC8Xgammy3KfPP1PZs8fqmd3zB\nTm877ky+uNhp924r4oEuOVxpoMTG4js8WsCWszVV4NwBl6Zmy6QxLd4p/mtT\nnL5PAg67UdldgbQsgH1wkKSd4wFNEVKmZePwCgrBaDWz+6/yF4owI+zvpzsN\nznQ0lwETxgmmosJmIhC74LJUrp3j2UaQHI4lyDT7NdCckg7n3+2FALZ7Agex\nJvlexL7X2YHWcYYex/3la+gz1r/Vbch4ZdMxzIyp8ZIsymRJ6EFr1BJOrR6g\nGRJK7IMSbIbUCHnDuKXKh2YiQIZLaPm3lkso4WJh1sPHrEHg+k7OFNtJHr9A\nc1gd\r\n=vx5m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7da8a15cddffc97a38ff48783a0ef9f5f0657a27","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211128215540","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211128215540"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211128215540_1640728582503_0.2780454789268496","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112822349":{"name":"@chakra-ui/system","version":"0.0.0-pr-2021112822349","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2021112822349","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b9a8346e40c788903781289a14cfa49de4710c7e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2021112822349.tgz","fileCount":34,"integrity":"sha512-oILqYLrQdfeSnF3WBrut7BrVvbeWFX90ihCtUtzOXgZjptkeZBjvuPF1bR2yAAwN0m5wIyXqm6RBRcnoTA4Ixw==","signatures":[{"sig":"MEUCIQD5AGaxMRqvUf0GfoCT31FxOnb3vmMqFsEUJnmYd/rNQgIgPjWKBsj9tT5bxvTllLILW7XavNiV0+5S9mRcxd+gk2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4nzCRA9TVsSAnZWagAAdsMP/AvjsDf2HVaFqPXJhMhx\nIclCEq7oxwMWzrY03OsJUSwdLY8crUMtNkYbSFiafkj62ILniZ5kUgPLlKiU\nB8PArf/KunZqA/W6uE8a+fyX+1U64iruG+xXiuywEfECKF01TgpWcAxVUr5t\nliZ25hCuVS+QR/r/qqBigx6/diOQsD3ti16luJOhbhvBJ+Ctv0AkxaT8q2hV\nUfwn0J5PZs5xmUSqHriMzljvPQFS57bTtpVlCaeuSAuZJIOlmmLz3E7N13Hr\n8kKTn9BAUXMoECW5yszWhuE4HPlO2BabYeKiH2u6KuV8rEK0HcIR/V/ysvAs\nBwsqM/PTs1dCEeUNa1hojgoF9KTxQMig0hS1TcjBtraupX4phVfTh1EitOQQ\nl19rjfCVnb+i3lzHtnyZPcvsoGO7qX8hhXRh4nVRMKuDkoAg/LeyP+Ao68Bz\nQ9KYccuPF3DP3UnrlS0q/myUtx5cVP0PW8QIhHCFbMjig4Ypo6rG55hZ0z/6\n+Dj4nRLGtzDEXpFywKcLm8XuJXxi6LsGyspctRRZxPiXTGk///DtWBvRY34e\nlrKw/G/xdjw+ck/JsfSPm5W9Tc3yyMjr6k3q6oXRUwv9ZT+XEJLNGtl/hBwE\nFMShaCumbd2GVnmgvcMxS0P29wpZLGl9wEnwiO5CNBNpGa5y6ch0CvtrcD9O\n2dTl\r\n=a1r8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"4335a1e34cf752d14f9e54805755361afbe31988","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2021112822349","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2021112822349"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2021112822349_1640729075259_0.8748970305076875","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112822415":{"name":"@chakra-ui/system","version":"0.0.0-pr-2021112822415","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2021112822415","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7de1f8237d44dc684b516bfccfe7edde82911665","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2021112822415.tgz","fileCount":34,"integrity":"sha512-YxAYI7SHym7ZWk4mata6HB5D5NhUY1atj7NW8YfjWsgRhb5b1/S/VMB3bRK8TVLYsq7wv51Kfl+jSPwycygywg==","signatures":[{"sig":"MEUCID312BPEBMCG7CRsaXDjgKAke7XGQFy12qQ2HqwyroPWAiEA40GruA8VC2V2yJur4X4xjQnxoUCpYeA6kKqWK7wZXmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy4oJCRA9TVsSAnZWagAAd6sQAIPpoP/pIArr4z1J2Vjy\nRnV1ihHeo90gktLYs9bSE3hXWDF4ky0TJ52vemW1VWXQG1YjFvOxlgZuCM3x\n2QvrBheWlW2xtRmPDL8Io45Gs7wrX7bcifRVWhg3Z7XVlmfVTTyyLK9ELNuz\nMllE6sivlbp+tS90aFKrogtndCnqsSZLmIPY8Kxll+wNcLvbJuhaN8ILElsK\nirMIemww+oSrsc6NYkm6RXnhtW8QOISljV3/CWVyBgmsnsfTyxXiUOddDyHp\nnS5cLNeWY8GxxNYWd4LU/8HtP4rBgaTvYYo2WEaI4XiSwUZvNsfz8HufwdcZ\na3gUgcJQK6FEIjMg6MldFYV4iFPcuNaiBR5nfDvDcR7H2SdYRkLVUbSWEuBm\nFTvQ4523CtTnZtE/I65HomCy3g9mxwFC7aejJsTpimHm+XtQIgbZDIrm3XGb\nNWcXLAUeXZug5dBlfciTHEQPBDs83hOfUBoWs4u9xvfmbZ2EQEQxE57SPkrP\nX3ATLymsSaa6HWrM6OLKoSbYL5/B+ZrGqTUddQK2HPlIdHRrKXxwylHJijAw\nOyZioj8G/TEFesIpwrNZjaw+mOq81erxbzUBN3iT4B3Ap6bEzYkMfWpL3E8v\nKKxBO/QpsY5fj3MYRz08ogQrnMxMqd0DQANJFCrp4ZZFVhL2B7/X+fs2OwAt\nHbx3\r\n=Pbk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7da8a15cddffc97a38ff48783a0ef9f5f0657a27","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2021112822415","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2021112822415"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2021112822415_1640729097319_0.755382256028239","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111299618":{"name":"@chakra-ui/system","version":"0.0.0-pr-202111299618","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202111299618","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9c78e6c2d7fa7ad4b5a8d1de3909cb11b9f984bb","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202111299618.tgz","fileCount":34,"integrity":"sha512-dcwF1JGPfotTg1wA33D73ortS8ov9i4bbvWBlEuQjGjlZy2bj8xf7Kd0HXtONNQGLVzdNmqQR/S/CUamPGBZ0Q==","signatures":[{"sig":"MEYCIQCFbRkIA3jlQ+Wf2gknct0s/Fy25UbwUlhh1JoYKFADzgIhAKVSsu14pk9iuTOhM1YieadVxP1VPsVw1MhHyRrlkd5W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCU6CRA9TVsSAnZWagAAYPEQAJRq5mV6TSAEfsXWrTS1\nZy5epl0We30Rct8truaLp5NSxFevGqVKR4KpZW2U42d2Hffu964f3OqcqQ73\nlmUomhJmiNZrjmEqoQXLfawSpUUaVaxF1Hd3wOrV1eIgJ840JVw1izq4EgBH\niGu2az4vovUT4hwKWMcC9lL9eB0Jd6gH+0HU+Wq3G3HWNxYi96kRp8M93wXr\nV6e7XzfL3gm7j1vtIwpptkoJ/lVsxr0RXnhxzmRnoEjYf/+ngvuTrUOq1Rg9\nt73xHRiRW8GZS3LlKUTsWwF5YJTq1n16PITD9Oa3uxRKTr+5xioWnpuylaM9\nFHLqN15vvh7uwIlZBlu+FvOyNVTF53uuqmyOZ+/PTxC6RIUD/m9Jr9jO4hxb\n0Br8vc7I0rHru9JILr2B01qqt25oUF4zGZJOLGHB7FeUmA3cpiXoVpf0sOo+\n5PV9bGkKLIZjqKy4UiNZQznnZ3IgaMOnGpfpoFvp348SQYm4k8scH66RZpIw\nrShswxvDJpA4Da2wHUm6pLsH50D1jPSfTLbqm7iP+KkzPbYCh3VE69nAfTkG\nHUpmJjEn7OJdu5OtkqgJp4aycXcjrVP7vUVHe3ZVStjwSqtVL0/VeQ89GTUY\ndr2NoL8ZFofhMViJPYOT9r8wefuRSwhWAqiz2AI0Mo8ChXgKZgLJJLQLjJ4Q\nrQZ7\r\n=rAfo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5de40502baaa57a5b1ae05345eea02cd8c7e53d8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202111299618","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202111299618"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202111299618_1640768826431_0.2465387220848918","host":"s3://npm-registry-packages"}},"0.0.0-pr-202111299647":{"name":"@chakra-ui/system","version":"0.0.0-pr-202111299647","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202111299647","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2e8fcdd2e580d21f8a854612a3982f66a6294fd4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202111299647.tgz","fileCount":34,"integrity":"sha512-Jsz1fMch/QpA40FkhSqK+AUrakjeFsL0u94FavOe3vbF/GUBjtGo9RjonKgyyfQQxUqX4UXWEcIB4H3DdI+LQQ==","signatures":[{"sig":"MEUCIDQjnlHCICZ2irxzcmDe/FITh2xU5llFGDT9uXJZwuA2AiEA7B2RWErXLEmTEE1Q+BRI4Y/pWEWCwjlL510+G0mVgcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCVRCRA9TVsSAnZWagAAs+sP/0N9iP5SyTH0Faj9wGMy\nZSX75TXVKW7lUmW18/gAAh1HSNzHEiYS29saQNvT1sBE+VwRk6gfcYdab6I5\nE2DU/kI4u8aBc22UmtVp3ujpsn0Yk6GrRNhGsvjQ0sHtp6TN4bfmpcvcPP2d\nlu8AIs8T/CCpjedRxCMJcBQMiqfmQOtjTTPZwGelZrhMi+Hf7RaP0LyOvTrW\n+mH50wXd1bks1JmslYjJd+whk3J5y0krtHNlN9boxqdDvhSC5VmdBXmniuMc\n3Zaypc+cvNGue1m2mYY4L5NSh1UY0LMtPsFX1g5m32v0t6IngoFqUfJIbf0c\nZJU+AQTlBwe/Mtt47K6oNy+0vvGJMAfgIgXQU89u3jY6bZIGSFe9jJ0phWtb\n2aPv4++L6rHPCeQTBU/BtqOVOYkoSXz2M5XKWnSswRP2RlKKNcCnyljEOMMp\nuY0TJm1ULzRpGzKUmS/4QMBE2BQyJAFCx/+xVixEsmGQw5jjqnlOrfXhN5+u\nlv1QzVBZq+Tei0W0JSPK23ASmvK/uKH1U9Oihl8/+9znc7eCLUVLTvluQSji\nnFXwZ4wxZqPnuvR6aVADRJVnGc2sczsx3Unszpu8XanuIjlyX1/ugCHh7RrO\nlelPpBcwnFCh3Srdx2YSLnjP59mnIV4P6FDZ83Hqsu7IOF8Cwdu77istp/CZ\nWBIY\r\n=1QaE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"da42210eadf8b10011fb1a7bf54a3c92dd9010e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202111299647","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202111299647"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202111299647_1640768849324_0.17330872386125096","host":"s3://npm-registry-packages"}},"0.0.0-dev-202111299720":{"name":"@chakra-ui/system","version":"0.0.0-dev-202111299720","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202111299720","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c463842e86af04d30ee48bd75025bc7c90334b4d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202111299720.tgz","fileCount":34,"integrity":"sha512-jfsmKTzbQLZoKgmY1AqrKwptG+xzW8WL+qSC2t4ZMpGLCC6EktSk1l7slzq7gI8DhxMquWtq/mHeacmXajcxFQ==","signatures":[{"sig":"MEQCIAgK5z17jQutt+QG1wLtrESWgeo8/PRcJJJkIXiLkZHfAiBP5gBWINcFKDuMqi2SgX/VM1SpGA/p2LYWYcMAIx+Khw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCV5CRA9TVsSAnZWagAATE4P/0ftIyONCh0R1x8sL1a3\n73BWum7FCUdjs5VaNFT81Bgay+gcI6TPbUm/m0baTbs8w4bUEAjV4Tfh+4Vw\n0sbnaCFBds4L9Utgm28HLwj/OGtz2lQxQ83mERW8cjg9b6ol+6acIrYOO4AY\nDrfNLJmIqtpkaptbApaxydCiLcn8XIdo3Yylw7itYT+svv0MDaPQB2iYUUfC\nNCTxHj8sRB4QsbhMxqQOoRrRgDm2Kj9hhlY7riByHzGbaZNXPmx4wYgFFwES\nBpqvonLpt/Q/WAuNXvGS+Rfja1TxE52QrNAxxcz6FjBnmO354AuNSEc+lDYF\nVPnFdihUX8EwBEh49264w/2WPaRC2PgpwXqTuanVUbKgPQIbiphjOj/A7pXk\n+x4NeHw3ai1BWCNJJj2qlIgDT6CM5Oz+zlQGZWgUtxB54g12e2FLpN1GHjZD\n4orqYubwPFKji+EXbHef2lcW+tUcnoY/wW4wui1IglbVM+xbLMdA/PRXmLWl\n/kNRrbnyUNRxNJOVHyyKWM1ma6WBK3wAZ3NjMfSNEqEkaE5pOdJGg5no/DeV\nPax8NWzJaXHVEaualwXXcNwHYh8soBK+2mwTGm9PmoWqI2RASI1B+WgvpJqf\n7kRaMkVsqJauwEL5UbhPSSQyUS++HbzVCMEnZJc8WOnVC+mGZsE359kPtd9P\nVcbS\r\n=eOWK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5de40502baaa57a5b1ae05345eea02cd8c7e53d8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202111299720","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202111299720"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202111299720_1640768889427_0.7383268981135158","host":"s3://npm-registry-packages"}},"0.0.0-dev-20211129982":{"name":"@chakra-ui/system","version":"0.0.0-dev-20211129982","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20211129982","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"945e79563925ae2949b26c719447673f82a0042f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20211129982.tgz","fileCount":34,"integrity":"sha512-z+9DclJaopIbfDWVzdzBA4iGOfYEAL23a22Y+eeFWw8Nj2JlmyuxEnKpzsNdZaA+oaEtCal5sh/VDY9fTfXn5w==","signatures":[{"sig":"MEYCIQCQnG4OI8XJMcndHFHHMnzN7vdWfaqnzcP6ikNJbNP6OAIhAJW/lAGf++ZNkCIoouo0uEJy5NttJL+hTqz2bgLVuR0R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCWlCRA9TVsSAnZWagAAb70P/iw4cxB2/bf2yio7pOIW\nXW2OcEWRiE/NWRumtskc/diZ+ChVOaKlJ5UfLuhXtf21RH2TTVZUgvvyLDJR\n+selAbeQhfYeiMUmaW7QkqbKfTnI+HkfFFw3YczqDJTxBjWhmhmbasmBZJ1J\nUDyPAnTqK81t1EWEQZfmLa99GKziABZktii8KH53PLwGUJmcJvwlV2RMK0Ul\nOg1x3lQVa9fG5XjOV5d3gsS0/Mrg+rEJyW22CtDxdnpjnwIOt60nMCjBjKVW\nDkEpOO4hGlkeyMekfk+y84fI2jTPDdoCv4kQUhR1ZbEGzznUAmkQu9psH50s\n19H988Dc5JXLWsv6ixMCNOtP2Rjdi1ZPpt3sXrMvUWynx71ALN6cyzShhgJc\ni+mD9TiQSBBpMtUhZzMAHawwEtFl0+zPj5xM5W9/kr+KLpjw53VoGNGxX1m1\n+CH52oPTluJSVQFKrBcgWOYISDOTOkobHZ2CqubFddMk5ZqiMjov0KfdNmS4\ns+ixrfUaArn1IZYf3oaI2Jkl3qs+lE7USkPA3peZ7FtXg0NYZDrhI7pPeDox\nnCZJEbpmbt6xvy4GuBtqCJk+HDDi6kf2TzSmqrEouxDiaCsqxY6QDeHHH0XJ\niy2wgbZmXPNTYqynhXNBhB+RSlRoWFu3PMfwoP0JZLPs2KhjuwJ3hP0DAyz6\nm1nw\r\n=bYAe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5ac174aa4b53c0ff84d8cee4a1436f48deba0925","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20211129982","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20211129982"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20211129982_1640768933114_0.9921261989141981","host":"s3://npm-registry-packages"}},"0.0.0-pr-20211129981":{"name":"@chakra-ui/system","version":"0.0.0-pr-20211129981","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20211129981","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"49595bbdaf20118f01fe61182d14d2f3cd80b99e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20211129981.tgz","fileCount":34,"integrity":"sha512-qakLL3vGH8rLATkb5nflF0UHRPCmYEKVntLmCW0Hipw/6FO7/NHfc9/rorYZDCLJMBUqqiFO/2J7+X11sTo+dw==","signatures":[{"sig":"MEUCIQDxd++KVDlFLYhKSocuRTL7i0xBYiKm9RagDhcQAmqRcQIgdFtnm1O3UA76ygEC0pHZptTJEJ1KIzcLo2Zm/UFFFt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCWqCRA9TVsSAnZWagAAdC0P/RPBWJjz8f1Rm832NZHc\nWqFQ4zSYBRgJQSt7ruIQU3UzR9OX9wkcCLLFjGoHK5tkYO4xY28Ke9aAXKdu\nRkx3k+wNMDaPAuOg5ReLx7qmz2LXA0ux4wwzIOBOdL31Dx+i6G5XZYjfWrTl\nUhldawahIRGpQ86/YG/AZz0cJMDrnc7ElNfOno5ATKlbRd3MBWNG7ibu3a1D\nbqy5U11FCQk5R+gNeVjxiWDla1W7FKhjDM3S7out19Y7bElsWEPEFvIwFjS5\nAN24LONJjgpTBQfEeQaRU4NTFxrAI5HE9EzsimK1q8CT9HI2mNaxyRhZHj60\nEgURyu2WPTZyKBjLr7ADsiHz59K6AWPfQ0k6yINDuu/7uQ9SmFtKMAKLhJf6\nvjsWW/tLJ6b0+jpGm+869GA+UM6ys2R6UMoldb3dXwm2qZtRmj8ljhQlySSP\nYuN1UxeZr2H+LKL2BLE3D2Aytedm7HqPkuE86Lc6W7UPeqF+86R0DV1ycLH0\nQmYdainU5AHkf3e8DNYY8P569JBQ1OtjEaT6YO0Ls8q6IhTp1QeLW/md7avy\nXQgv7E5U60b2+zspQhlfpt8pq7EaHZ1mDZpVPdB40Q2tFyIqO2MC//iZU8bE\n/UnGGSTxiSaYtYzgsnzg3YVMguOTkuMT5+WmedvdtgqJmVJFiTvIOuvcytr0\nW2vM\r\n=NrwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5ac174aa4b53c0ff84d8cee4a1436f48deba0925","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20211129981","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20211129981"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20211129981_1640768938730_0.14096237394536204","host":"s3://npm-registry-packages"}},"0.0.0-pr-2021112991213":{"name":"@chakra-ui/system","version":"0.0.0-pr-2021112991213","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2021112991213","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e2acaebb0cc6a7c1b799d0a842519c83616fbf0b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2021112991213.tgz","fileCount":34,"integrity":"sha512-ToxggrZmgq+ftFdebTPCiqMivzPEnzH2SPmltKFwMZJ8TQjNMVCIwVaVbXORWkgXoHf4gzCxupyl2LULEcM+jw==","signatures":[{"sig":"MEYCIQCSQLAqKUJJ+JzFgpbVRAbQPZomC/tSlFMr3wua24BSqQIhAPwbYEASOl9BvvPi9QrcFCYKrULUEVZtkQifC9ntgocQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCafCRA9TVsSAnZWagAAtUwP/3NgozebLhPC0tTtplYQ\nNT1AGefppxTjRp7n0Ose9AfQTZdiNlDUaNUIqPi5zlwLnWpjd9My43LQVxUd\nLQR+SerkTmaQ8vKEFo90Sj4ZCnOypo/xzDEQ7PqjaZXZ9+Qm97GWs426nvOL\nGNhI5Om71fdTPAScYWyTGzO7aJw8goxGAM2a6euofQGIlFr0snpLlJUqU14N\n36M9s4BxcWEzVbH22ZFwJx3WDoP3M0703swnI6yQqE2nqS2ukCuWIuUZ0qh4\nlSdpG+CJXw3F4dCQpxJpw5zZO5LVe0+KrFyvaipVt+8+EDkKX6J1zy45KlBr\nfwXKFQ5wvxfAJU9OCK3wpBK8yY5FKC5wNuWUo3Q8xOLxgwiNZIVw9+1QVoJ6\n85q1EV5dbUK/m0BEaFEvSD1B6HMDsoc4fUiDU7PtJqceLPgDxloqjP5H167y\nS+ByFU2XMhG8W9SV2Clyn1g5f59u93pwsp1Lkc5u+tMMYYtRrxIbhfyvxAnt\nrHptDbCxAb9sBaAaMKR/Z1mE8XzXTE/hrmlM05RFtVNpABLHJNHMpYZvH9Tv\nERGo7WsJDScV8wzGTwWjf9e0/OLgArmnrtc1Xdlvvje4H2+4H81vriwwukrh\nP4l6uViYhqIRhod7aXmBGsoYo/LaicLJmA+yuWJXrmQ7OnV6ZsrQFVf7ynPB\naamN\r\n=SqS6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"703cb5783ee6e0ede26cf366c1f063111c9adcaa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2021112991213","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2021112991213"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2021112991213_1640769182975_0.8461896078224824","host":"s3://npm-registry-packages"}},"0.0.0-dev-2021112991233":{"name":"@chakra-ui/system","version":"0.0.0-dev-2021112991233","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2021112991233","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1a10cfbad45a32854c6492989bbd847b2e01d5d6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2021112991233.tgz","fileCount":34,"integrity":"sha512-5S/p4l/7FTBOai5wSNRxZDcYfaDVYpKRLCE+smfay+x20PpDO1l8fz4MTXqh3lSWO7JWg7YKuFthZK2X1nGC4Q==","signatures":[{"sig":"MEYCIQD8yVyl5sMT3Vv/hVArzuJmIrzpxLe5zC7dNleWTBn17gIhAK/Pryl6wJX2jL3Cv29zTRthdXzu39ROONU3GU3T034k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzCawCRA9TVsSAnZWagAAZe8QAISMaeCWaUx4h4SFnWQa\nnutbqf+mU6hY6U0/O2yXUka5pWdsDbdZlQL/HnYIIDFTRMnw2rvBjPOd++cV\nU8IqkpFpgn1dSefO/ks9oIWcoVHpYUClAqInz9tKOPGpYcPVVAzgLfFXnrSr\nP0fOsE4ITgWx+ZYUuKP1nAPYsM7TrqF2js77Ziw2Qg83WOMfznF04H5lllxB\nbSVFhP0rP6EtBlkEtR3egWWADsVgiceH1cZME/qveaYsGeinZhRFKhaHNiHz\nHT67liLNMQqF5a7fCKwydJ84O62Y8Q8d8CL4Tbk1Gfq21H2/CrTaobS2V1Gi\nGYA8Tr7DodojZjFf5fP0nG4HHAdqNMnogxus+z44HtefwFIFit5NpHuqH+rL\nKWtnVmCB4EWYKho0X46NAmim+Z+31wGqCj4s9U4lRBz1hXl9BjzHnxKHeZjs\n2kgL0DTUeLX8rdz3oCXgT3lHhmE5ejSMx1zFQoz/vt8Kn+o39AnSEj5zScE/\nPcEMKbt91fcwqMebDyNZs+L8WZe5cUCcET8o1hrU/seSnoF2Oeu5lMfkSp0C\nKsQmdX8pnX2ItTw4g0bkhPWw4HEUPAeesGtA6KgcQZnUfv+b2GEH3u5hw3kC\nRAlisk4tMfWS1Lkmryl0kuiQWB21H6ssXrb1dPXujVkI8+aZcYJy85xTk/Tt\n4HAT\r\n=aQRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"703cb5783ee6e0ede26cf366c1f063111c9adcaa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2021112991233","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-2021112991233"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2021112991233_1640769200768_0.6594083684572383","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220114234":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220114234","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220114234","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1af778322f60cfc7a15e311fa90b66d152ad4f58","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220114234.tgz","fileCount":34,"integrity":"sha512-c4d/VwOIr0PeErPMNKkSc9tmBuMYuhm554UTxC3BX3bhiqLIgXUglWz7WbZRigaM9HlWOuFjQcpaIIhPdOvEVg==","signatures":[{"sig":"MEUCIBoS7pslAWsl92fP8rQ9P1aG/ACB7eEUTIgFu9Wyb8x1AiEA0BIMzE3B+nXUXC8H7u8Kqqkk6eXHPQnieMxNxhiwyok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz7G4CRA9TVsSAnZWagAAbpAP/jgiUHXWeTWXplm4m4Gs\nRXoSyohM9hcPgQ7TAKcKgf/HU0niSUoIumhyuaBEIY3dYplKmCtm203RSlCH\nuJMDSAFfIXoQTOZXwOwH8hFK7agGF1DrZ3Qx9ZYlYDPfhoHxx9pWHKGF+VDs\nk1Sh6g25c6rF81sDvnWJMUWQMVWXovxcqFO2jTUsdNVX/vfVxuz5sShI11tP\ncuQ/Mt9Ix/nmNwVUbydzBGCnZi98eAQi0cGbxQt64RFdqTmhtRFLsRyKDQ+t\nIsaHhZ7z355UfXVEC7IPtgZnBYK+qc7Bpj4aeSC7HhoaL/ND7LgfUmSOG/1j\nVvhE8WFKvxwl55xr22uV240Up7Q8QT1Y9mW+4WbHhIzDDukXR6I5stc8dVts\n79eNIlPYwi3sXnKgzvCBlvx2nysP0fsjSGWkS9oufiLdlX71PYR7N7IGU8+X\ncEJbCToxtjY5sx9/z6D4nL71tmzfVpPtCQswG7iXK/huFmup/OJ6Q/pHQlLN\nKGmWhle8VknPuLabGiENgbuwjxzoyiiY1jho3WR18r4oFgV1fxASAYHLsi0T\nk4i8xrGQ90YaJDQBtzEJYb6YQEhCTPL4FWt1q37Op5JojrcBV9zxKZsrPSG/\nCsaMTSeokUHTMjJHffoL2VTNFMiQLKdvXTGPqnTr6tn37+CC19rlD8nPqQo+\n5LgC\r\n=bEHo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"503ba4b41661a704e0a2b9e115af33a71baa8b39","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220114234","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20220114234"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220114234_1641001400704_0.8686088900600448","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220114728":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220114728","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220114728","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a79ab18680c2d329ee359106927ddcfd91803850","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220114728.tgz","fileCount":34,"integrity":"sha512-2vJOplFwb0Ukfup9ykQayZ1WBSS23Vz891B3Ssa5DiiB/MBQswtPkM1Z+8z8aQKJXJjTFl4jznIfyAhg3jPZvg==","signatures":[{"sig":"MEQCIFciA6dHZo9m1yKITWg8FELXJgvwqGkcNStvnMAPyv3gAiAIi++6k5n/DLgBeclc1Db1DCdFJD/srE34HXJgqpGm5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhz7LiCRA9TVsSAnZWagAABQcP/3FVSKqzncXuwx/ggz8B\nl6cJ4/YoAhRnW7nQug6MA2Z0YFySIaWovOD5jsx18kkUA59HlbPNVEtuF8xn\nB+rQe8d+fuGemRihubPV6OccbCeALj3YWUzReRzOP+w9a5aEnIRwbNmgot9l\nydwFjO/kAHqDua0yjBPTV/WIbN24VOFztC9C+VmSUjG7Ys/34CzrFI9XG2oV\niiSmnsi2H8MLSFT1FfHCXkX7H2JGDHvFpgXbtyQT2fTnG6wioDtjeW1bJi0T\nDf9S5n2bvROzjzwFpojn/dkGne7DFmzUavKPAKGoRVRpVe7WYjAmFj2CLicD\nhvy3sYUDKpF2756nip53BkaXyKNaZRzTOWZWFJvL6rZQGbMl/pSkQaeCbqlt\nov7w7qoTSJ4+YpZ1qifU4iag2KzAtdngP6dYmSguZrD+RK8aBzkEvHSr2pV+\n3oElELqKnkI3IR/4EM9EyXgiBZiTOivMjVnUIzVU3kOx9DBp5QxHapsl/X/E\nGZ1Y8STxswCbkSmwA+hMc1BQj9pMJkGbZ/mw/RnhYOBmXd2v42dOdEl2rubB\nr4Mkl4mu3Fo06zWPghEYdR1Dlc9QzHljAUT4gWqIONV+yvAvrf3b+6Z2iL3n\nXKA8r1Dr3vnRx5le5TLn1+pGysSjkt4oK9Feis6TDj4/rbJQeZlXnCHTes+p\nnsMH\r\n=3f13\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"cbb0f902b4b516e6a1079112f9e97fe10fadf810","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220114728","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20220114728"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220114728_1641001698128_0.21569250475086288","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201134936":{"name":"@chakra-ui/system","version":"0.0.0-dev-202201134936","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202201134936","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"28f5fa234933209d4ae8c6435c1c2b1abcd38a1f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202201134936.tgz","fileCount":34,"integrity":"sha512-4IPA+AI+ga6Umuk05ugUZhwMhCK02yWk4+x2DOA5pN5noIk0jNBQVElqSmAJKvk+lCG501tRyFcD3iWKwBUWCw==","signatures":[{"sig":"MEUCIQDZ1vdRjHoKBGAgvGljmK/SSel5Ox37myCQi5bh6iStNQIgI0H75Hn1V2KovMc2gE7NwoxUA7jaX0DZaWkV93a0BRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0FwdCRA9TVsSAnZWagAAIYgP/3n2vwyOrOf8OHCbPjDW\nBRwcYCUFYYoz6YJhANO9EFNETdRmSEFGKIWlei5rjyp+X/EnxCUnNByPgV/p\nnSY1v8PefKJCY46xfj0WSgxc5LyvpzlwNP/o//eDFu1DVZSSoUYJ9bYJ/zvj\n91EPJg4zUGZKmd3g6dB7xznmYWuvtzUsS1RIED+mvEFeenrIFhWlzQfWuApI\nhWsoY4KIZLJw9pbs5Aordz0jMvuEjZvDso3stOT+ap79U4nSM5kX3n19dmKE\nNfKWX/J/wPR4DlRu0nvNDW75ZNh64byYXXsSXVmCIsIjHBSJ63KpAmopRiqH\nR6gPdAAeaQuZv5Xf4+KHwuTR1pN/en36UCPh4FIIi+hbNMGhJBZxjRT3ETno\nIq3dXx8Q3QhCbnzjbC/p3K8IpsWzYtsYat+0BclBZPRIzE5MxDcTAUQgiie2\nTE9WxBRumqEoKp+kdHmRokysglTiW46/gpf+TG2cd8tCAZC5rt0Att3nftOK\nYWB0RLcx/iUqwsK/3jsvs4Y94pAxILQ1C/OzkyiVoY7MSgoT35OdRbF+Nw7B\nde/UpUxuXwsFkFqBrOOJkzavq+pYyLolcA0Kj0loIygvu/6NzpPhNSx58fk3\nHW0pw1GGLdAlbSx1ivsv5aW4I2cRamvnWmuV/V1Mor9/sJJXqMQ4Thd8ivNR\n4gof\r\n=EiNY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"2727b79201b1897694d588db94985ad9fc8ba1f8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202201134936","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202201134936"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202201134936_1641045021233_0.691886148075693","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220281628":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220281628","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220281628","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"04b2168d51526f5b181b3a4d770a06ec46b14874","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220281628.tgz","fileCount":34,"integrity":"sha512-qeBjBhZjz9rIVLxwnDtrAFm8vn6QCgN+vZk4h5BepVwIex3Go6cjLQQplfhDfJNB7uSqbQOFlJcUUr4OJuLrAg==","signatures":[{"sig":"MEUCID/s5NnjUPS40L6Akb6ST5R89KZxcsvJjJGjlwIWD1VkAiEA01hks3Mwz/u3iiCFyaIscmR6geldUDWLa5df+PI/HaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0V+NCRA9TVsSAnZWagAAGmoP+wdLG8frQyYh088joepT\nzomOCN++uj27AgacnKk23lIi7wf4EVi+RAdkLLIiTKxvGrTCFX+ZH1B9wema\n9vDlcz2w4k1PAqLkXYn6BpgXG57Z+l661SgfiD8m0A6rY414UkplCyos2WbB\nWwt4jZqJiyHrg8SSGXp1FyLIQ0tIgNP+Luxrz3JWfHmbazgG0+ZXwv4SWgFm\n8MWHNxxNr2IX07Q8d33+pDgyqGK/YjWftGwqnmmrVDs82dcCnzAkaoWUs1oi\nJ6hcAj/XGKX7H34C2rBuAiloQJMQH9ZZ5rxFMyUiRQ4KJQ+gL0gubwvyS3JO\nnTE+NNUZ/v2vRuipTqR44dzhDVqvBBlfxxSX2kv6JIoANvogK20ndQBNvJ0F\nxfjSoSy0K/AqfM8M8caxV03WznbfDOU0K/ZwQhE1uI9uK+8dbIGklB/ynJYt\nirzRw+YpfX1LblS3D38PsmZnf8XyV10nrD14eCKa6kdGnzyG8gO5x+eacSjX\n2T/N1EyIXdoXDSCeQQaGhGFghMclHUPouKsPg0RElGUG7XHVe6eQ23gAfGtA\nhsePVgyjzaDKoLZsr6pZ0GZkvAJXdQ4+olCjOavpgj4KypctDvVroxfJhP/Y\nuu3o8618ADFTxd88J68vfl/Hqrrg6f+a7JuV0VfWONytg/a6ohsRuqTstJOk\nzmKZ\r\n=JPaQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a9dde641ee8d65b51a03845f8210f6fe97148c6b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220281628","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20220281628"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220281628_1641111437269_0.32278735313835627","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220282224":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220282224","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220282224","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"312525698997321374d15a20038b82b465141dee","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220282224.tgz","fileCount":34,"integrity":"sha512-aL6xRfFslM+6Tn0ZjI+VprtmI+an0RMAt6Hc9DGJbRm2gXl2qG6VQn+PMakuwQ0C5x6vJINYwoR84a/6ZsnN2g==","signatures":[{"sig":"MEQCIFExi02TmcNN1i6mRGgUIcxgKHmxCk1HiBnyoPW53yG1AiAw5uDH+CuDUJk7878RUJZ2Kj8pHjusiZ8/4j730EzQ+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WDsCRA9TVsSAnZWagAAlvoQAIrsUkIPNtd9dZACOKkx\nAXjiFPSkLn6S4MQ00cILJz6yENbevdPGXfiLA38iO3Smh+fcu5+l0gKNygks\nmtyf2JMS52C5VRPvdXJ+6cgcrwjcCeUKvRhOMCkNSSqKqfBICsK8vORUYsxa\nbYqfecTGW7KjcgwQYuSi3tff5e+JQuminU2tcrp5qKn7AeGyOzQdqcvJdtn2\nZYmMPOMSZ2lGQjBUAzLXeAF4JNBz4rraRQVTg/O9sXnJcn7Gt6zRpqSsbj8x\nEg1SR19+2rB8MwbBha3Q22DAQ/oh4Onz56kMDN4cDIk14K5+1w+dBypSOgsg\nW3IU4Ux2m7kxi6sFKoUpLPxRZ59KhUO4bELwCTbkFBfCbuXYrI629dWW12O3\neZnsccw/ihihXnrikBwCKBw1C3ZRnRA+qmBsoeD5bTrPX/i/NM0hOyhBzJZ9\nkkL8tIPh3N7L6mTIjVYPU1ZjnxvLBt1iSvFPIJ6LnHA7FiokE8dNou3539Sx\nZbNp7bkfqo9vdcuoAjArbxuLgSy73Ih8iHvPFNTFuydShOVXdj45INHoZHeh\nyXUlAYVP2AU6r9K40kr13iO9lhgtQYwJCLopbwyvIy8gw52ar67hw1WHx+Jj\nvqzq2pYCqIh+ZPhbUuXunZiOxOBDFr5sGbvXphtAMwTTSW1nA0L4aIOGqqmv\n/Tss\r\n=rP5v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"05b58576040bb66c8ca5daf1a42e31500e33860e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220282224","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20220282224"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220282224_1641111787837_0.7859671061219502","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022028241":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022028241","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022028241","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cf76ecde98feb08f2d42ab4f5254f3aef935f0c3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022028241.tgz","fileCount":34,"integrity":"sha512-pvT9lUAY/n664dYI4A/sE343DnF+4oMYJPLYFNpZkb9NCxDZ84LomVctrOMKWTcgyHZwc90MstQejBN6FAXQWw==","signatures":[{"sig":"MEUCIQDn7QXjqqJxNWpNN6xtarzZaxCzfHZ4uJD+OdMuGwa2zgIgCQQbpT/O4ByEk/fwjhDlYohwQJtoCYXqtqbsM9n3iic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WFNCRA9TVsSAnZWagAAZlcP/2vUvo3onpMkxS9ZTLbf\nX1zEWhdB+9D/ptA+FvVhWguF8WGHSRSG4sKOtFdj4ft/JuQdDPIQMz7k1WN9\ndrR1ialZHL7JL8zqpwKU+c2Zlh7lavqnpWXtl9zFFnZx4qL1Eypvq4oxnMZF\nzqF9hRRmOkQIiSydyYBMjvx7Jv0LZ7kiRBto2FZB91TNFSlpcalXB8H8sZDx\ndvekaNHT0XbQjFDJJvNkzdcWbYMOLDCF1s1zHWgIGdnY9x3wHOipU7nSnceJ\nQjInNqINVZh0fdSHyNnd0midhVjXDVz2JnrjxWGPa03ufpJJDGLTqpjuRakA\nJP5N/wZiZdvKxYWQVuEpOH1tRaoFtlygbzB105IMVY6G17oGqGV0ZLyvdLCV\n1gh+Wqkm+3em9V55b1nYHYx6DMxDI92hEiPdFYGf1RdjzKoGTxxFEu2H/Mpb\nLhJt2m5BHE10IzRPi1L4MWUN472t74eZbTXOsNF8WO1osZQdCrECXUJsyDlG\nZOcZJ9FEcDBPSLS7mcHDXfZ0AYkId+5MyOLgQvteyvOsR+oNZS/SA31E4lBl\nIWFy+n/6KIIehPXThnkeSsYAWQG1HHJYoeOQkV6e3FPB/mP725Ue0+TO7YSd\nKzIlzZGXKxXXuPLMhTuzv1zMc+uVv4SjeLWyO/fcL6d0aqHewR4Jj+Qp/WiE\n33u6\r\n=5u/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"183e4381a3705071bc42b4bd6eaca76d5feb4bf1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022028241","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022028241"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022028241_1641111885245_0.7942755078898052","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022028277":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022028277","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022028277","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7fcf3c5c6078f165e34858cd1bdd23cfd9e2c754","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022028277.tgz","fileCount":34,"integrity":"sha512-ZUw3YP3WY/SCouoUCeKr5UNBt3gEDu3tG4dYsXTrv0LzdNzSv69lnlGWp6AD7BxllTMIeUsRD/UOjJLWdyOyNw==","signatures":[{"sig":"MEUCIQC0xm73rXUUbGto8RhLTe+myCluoX9p9K4xxkKBpnqL7wIgDyAyZoNsnhGBWTf2QH0cjsVrV1R2YNJZBVUj5WBNufs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WIDCRA9TVsSAnZWagAATIsP+gKg4zsvUJ9TSJ4LKQk0\nalrCgcGGvAO3SAbZ1SGrr3Yi+PyQiDj/eUVtxjIsd3Cij5yp3vLL5TFTbi72\ncGIb3FwM1M/0l9KM9rqoM3abMyXzStwy+2DAzViNLFFS0HFKjH7Jlf7knGrm\ngD7LMUpw50b5QvTbZEzYAiEIRmX4PYnbNq7mtxopigOtOtDeq4rcm/pmvmoj\nWUP+lwwaPaRTC2OufAWneh6nEpDtjUIBrnQsTrzUnXw4GXMVn6iBlA9r5PBS\nqyGhXyvREQZewVeSrzMyVIS6/5U3wf8xTEDChRPN87O9rza6uM6dI7gg7lD3\nB9qKDHecEdIIXghPgajLpYpIQGxEGF2bwKQQx/ycBij5/uxPwYAQMnIrCt6m\n9uWxpns6e+zcfNj9qISU0F8I4SQ5E5t487mxh9zRzz5YgT6BDowUb6YPcH8K\nehdsIvi7BRwqtPSDRcEF8C/gfZnLgQBee3jUm4MdsgtXRFvq4iAFX3aELuLN\n3TftSsVQMKRq8/KDUUDo/GGrF1IR1Ar5AJRvQ2QU/seo3DRI+guE7x1iN2y2\nQ7UbUpwnDqbqwNm6C2QjtD0zBgnCDH0abkC0IM4UfEW+HEunowi9oiNsqHYz\nvxyByrQZe5+Vgrnfho53H7o+1BijR2PqSvBoGrSSx/cOg+D2CLAr3N0B/szJ\nO8Af\r\n=MIXE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a38649394bcc95d4c0207491394b0cd2a0c64b1e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022028277","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022028277"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022028277_1641112067416_0.5448726512338613","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028387":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022028387","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022028387","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4eb4b5639e56f0f9d38421ee7b10f97fb1af01e2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022028387.tgz","fileCount":34,"integrity":"sha512-tqnZDpxy/bIBbJLkj2Y/UGg3vqTyGvwBgI/h+dZXdJXvIEAJ4Ofc9ZrNKrT6aSBaN0L2ZmJzuGaDT3ffnkWD1g==","signatures":[{"sig":"MEYCIQCMxuEbZTQwvSbQBdgrfgkgtRAPkfH9ya5dgCfICpsnTgIhAN68ElBkD3JGHDAkEYIGmgu/M6P050Pe0jndR5JQk7iP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WSfCRA9TVsSAnZWagAA0cwP/0B/OGaHG2htX5SqjZvu\nw9g5OmLEAPkMRbAPNbRtzFoaXKLk/yzWdoQACeGxIPwb6YpSz54OTh6//4Y3\nUyKMdtpF1f39DTNlJWr0+G9BoNiTi23u5U988xeETZK5OoCb1xNDjOmIM+Zb\nINdanGeCMxF4P210GP16eI7c8BhmTR+AmuAMpz0PLjCR5EMlCd8WePZDjJq1\nZYr626vBWfmp8v1gybThSDiNyJASOAI0Kv+UHgUujiN19Sbti8W/LwwJrIbh\napNB14rzJ0WGal+6gnFdiTBRSz/wL/3rUc+pWHRAmWU732jyOCxBLkBinjeE\n4PUvExQpby/Y7l2WJrgRXrwD28wuf6IJysSBTGzKrPQ39zZiy0BVYORGP1yw\nrLyukBzqpW+uj8J7jrJhxQaJxxV7G1ZAlMaP3HryaqyoAkOJ5Nko8XrTlqK5\ncsuVICuUvKQjsXSCQ5FR+y53GpWTSzcJeePoohFvutJ1Kq1+5IbYxqqOHIou\nUfi+9ZDq1xpnRmTtiHs+Vk40uxN+X2XNqicA5obCF5tAyGTs5Gnd3FmyFLNs\nr8Vc9VDC0jwVRV9D8k3vURjStQIeTulyDRSclQsJ8mHpE8je0/r5d1KyJiby\nYRqYHXyZK480xzdPPL7gkMr+xnyKxV2BHtgZqV5Bc7afktAprX5wWZJt/b/j\nWxAm\r\n=pXRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fa474bea3dcbdd4bbf2a26925f938d6e75a50c6d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022028387","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-2022028387"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022028387_1641112735312_0.5189729488626482","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028457":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022028457","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022028457","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7bbf225ab40255d769ea2a4f51c62f53d15dfd9c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022028457.tgz","fileCount":34,"integrity":"sha512-WIkSm9qkIn0SUAOoisgtYHsE9Rb3p4yTzEgGKc2uWUZR6M+FrLcywHLvm0cUlBp48/SGBiyU9a36t5UY1c7N3A==","signatures":[{"sig":"MEYCIQDLennpAMcNT0UMoyoP/S41xIQyztduf5MzzTseneRt5AIhAObJ9YFFIGk2FjM4HJKK+l6Dcvz5SawffdhbC3G42PU2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WY6CRA9TVsSAnZWagAAhQcQAKCRVr65rVcfXEG0EhDw\nOWEaCEVOF6EI4b1Y24ugv3SA/cZtwq+4rBM5GU6XhstBi9Zy5FsXYp+hwaY8\nUeIucv/czV6SToYzIfTSrcU7+T+us7ms+cEN2z/UvAmLJZU4L1DLgxomj7ia\njBRx99CYmKboMKTkE4ohs6KzXjsDZ/vFoidl8zzvqHDVqoZ5y2qqQv7072eo\nkZiKyqvvIbsNO0/QSNRLIwXttz5js0USu2tWAlrlvIQr4yqvf19Xr5rI+ZvJ\nbzmat8L3SJ7vdWUo6BPYAlb2FeVc9ZJhM7B7Gz1ZjJ4/x8wpekLBwEMq2GYV\nZDkJ9Pv4WmREEy8obghSXKotF+YIEfEi4jma7UBCggrEX8Y7Gj57zkBi+cuH\nyZIuPCtqrQUeLmAKt20XYy2x0FgHFAX/jE2DHHM6hpTMepAl03Gwx/1jxJPp\njFzSu0ZuXbor9nb/Fsvlp18M8qUvXIPAyy6njeL0qo1FWnhEDxSBZyIR76tk\nbEXxeK41L/9ButmUnXCqXB4MHxK7eEhhQKMu+WA1sNS6Xa/v75atb9jQR7CC\n52Q5DUpQ6ypMNxias/e6R19Pc7aEGV+8LwechHtcwP7eeQKU6ddj2XUkPq76\nUiTOpPfNeHLelNQSLxH+wbCeByHfk9adWDJb5rDESCbsrOMUdJq/+I+ODQ/u\nBBRi\r\n=zU4h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"acd26afb49166a1a22e150d1e732f082e794da5f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022028457","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-2022028457"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022028457_1641113146791_0.4525951564511761","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220284534":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220284534","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220284534","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bc487ccf919fa620728538b19b36c3078d95e4e5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220284534.tgz","fileCount":34,"integrity":"sha512-DhMEWObB+wSNC69QF8M7AuGvShU4wUMnJc6C4s7h6sE8TDC24hljz0m1IiVqkfdnCJmE9D19LjA/PXIutpzcqw==","signatures":[{"sig":"MEUCIQCt7rNpgG2SDuqfSOr4Ms4sZdezlIJj2MHOtuHe4Nh95gIgR2j/SO1oxdT4OykN5blHAp9lim72bw0q3aZi6qkZQMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WZZCRA9TVsSAnZWagAA4iQP/1Kg7AZ1W8ArGZlGchCl\n3bOWetnWDgv+53gAApHJV4aw66wF13cHjnTwbOW5WUgcL2rUNOqmBYW8lRrO\nBVh/uiQWxezK0wLEhzJ7rK9eRT1vRjswIVFLVaXlgekitJ5W3Yn5BH9iAjOA\nc4cF2TRDwSxtfXkwCunREcuRUC2j54RGJE3ByM8CTVk2j86RGdkuwgKVT3uW\nX9lXHpDSxnroxqGQhgE6pnZI2wwi2XDyMs3uFXtq35BjC8ZNnS0xXZRyiIyU\nvLyP9qWKhuq0gJorXiH75RsEQz5LvsT993ux8zoRzcAxGK07rbqUhXGp0tcO\nKgdEoFvMLgY+9emWAQQfcO95oHF/RGdReiMJx1bcyPWXVqOUv+m2XRRXtOpd\nP9FtJTbH7F/oDJxQ1rCQQSx1z53O2aiBOzMAlrgtq5CmNPeBPv2W0rQZHF2V\n9Tos2aTaq5RnKv7+56rVLdA8gCyYcXvg0FYMyj0Gp91+tdWNLKunaDAwvJdn\nTtclYACdWyNRmnjyJOSITd4tKtjkh5aHy1k1f+iSLe+XlpHRu6bsQDr1Cyeo\nhWv+bsjYEN/SQNsr1pecbirqsa76ucVsh0EeAGJB44WXzTv+JKDRT2zGEcVd\ngfwkQgPYjvPT8+T7dgd9oBNQ4M+b4GEVBbbyqMa774rDkNC9+c2HuXgkJixE\nwlj7\r\n=/yqk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"acd26afb49166a1a22e150d1e732f082e794da5f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220284534","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220284534"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220284534_1641113176895_0.35160797861331905","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022028579":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022028579","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022028579","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"50c7b15b5f6b1c9372a0e11b5494a95ece788592","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022028579.tgz","fileCount":34,"integrity":"sha512-BhyLagFRR9M1KPDVmS/v3+pRqR2d96lQwXRuUYwJ5KAvdIqn9CS0kQXBBAGH/P/6inXYm9h7Bf5uNgLyLpntzA==","signatures":[{"sig":"MEUCIC9GWaMmhbMje7/gjHumD41gNmDJAjXXnCxS0UBbUDOVAiEAuYij+vJUIxsxhkDCBL0CeTlI0vLXedMWCCefBf57ht0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0WkUCRA9TVsSAnZWagAA+rsP/36gHSJrPvwSxgMS8OoP\nXoeTv86hpX0JT38Ee50XnK3Yfa0relgG3k5A80b1RWMfoFOe6lIpKPIAe9vk\nyM6g2VmR5ADUFr/6Ih/7PWh0Zg6nAVDsrT4+QU6T0oBzzjqJG/yD3tvd/MYE\n3ypnqTiZrZXqxANXcRD8mRQOppnlbo9510voF6akCMXPmwMmOHqa06kkwZY6\nAQEbGcMnVeWF54Bbr48NCX2d4oJaUKoPXDLQSsAqapXkFGwtHlU8KNj5OSXG\nuXS5LSJevVwpNrTQgzgB1yYPk8j1QoKQByfZqJIFfFGydeRws4jjv7w7fr+0\nzBCW1yIPoUGlWMWDpkAxVWPFnbEe6zTDqvsMn8ptYGhx/dnbJ0GFZmnSsjVF\nOrvQXBSWjFu7xcrJ7QQsLmqKLu2d9MiejoccRR6S2Jb9ai5c6Pmofnrlcbwv\n4r+eeP7y4fvjbcKuKt/MVh9bSSInWSTEhvjNmFjc5N4n/IVT2g2wlpxnGAbx\nqfWqUpE4aXEhIjLMJ9BNbaLUo3l9o4U4oOcCy1mfNWXeD7qluHj9+SBKXIls\nn+lgV46SHG6UyRmaUxBvObcfsQzSN34qunXrV3k4nLPKfcnHS/mKhKxJTuLK\nN1rJQ5KE9yS4FPCGGPIar0YQyWne71JUs/hZlanwm01tIuSLc1IgvbpuKR1u\nsVdb\r\n=XXe0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"bad1953306d693dc6bd1b559adf594cf02a3b8e5","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022028579","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-2022028579"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022028579_1641113876537_0.7057935773696875","host":"s3://npm-registry-packages"}},"0.0.0-pr-202203225541":{"name":"@chakra-ui/system","version":"0.0.0-pr-202203225541","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202203225541","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"148678067113bc1f84878d3dbfa1cc8ca4656bee","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202203225541.tgz","fileCount":34,"integrity":"sha512-2DV20H6PoD4+2f2z+zVy+LQx9hp7XJOttn/BvqebxULbGfJDGXgyDU9/+WyvRWCJNG0TMICV0P0skvlrdeHZhA==","signatures":[{"sig":"MEUCIQCSVyVIVSrbPpO78GAkZ67ZcQzHByNIIpXSZkaBP5r4jAIgFi0FizdwqZNQ42vIEAfUMmCi5UldrgU/fYdcyOOlIvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh038eCRA9TVsSAnZWagAAT8wP/2TRW2PGpJBYIDaFc5Xs\nJDnDaFjee6+t8fYqipm9hj0xB8UK4BbejOrKYNjBC8ezZHY4MIKgsShtYw4n\nvh1dQwO8om1A2xsq+zFx0RJvLU0gobI7XdF4TdTRxs9FZ0qbxbtAKf5AE4IX\ngh27T0JsuTc5CbOFdTNvizq6Pc7Y75f7j2t+mZsWHnB7Lq1o7prENFSjht+S\n9lOznMniou8SmINtWiVom6i0lhT4F2mikIAu0Po7uz/0dd4uz4rJ5k3vK66D\nY/1MD/I0/S2cBZrXuqWsfpbp1KagaL/hvCCj+Cb+fLqM5mdpibufAF49YuRj\nhB3xpdxaU7l42otAvi8d3oYA6oXyAGIPROBNCHAO46+YUJG2vi3hUoms6DF6\nl2/KPcUU7SOaDe35Rk+a6YSrZWhTTWQfTYK3HT52adCSKElf1yU60e3rHOvy\nWYluDXHp80CWigVyDDqfVwqQ40ncCCh5ymqQAdmnpltUyOaPW9/plmomQ6Cq\njPXWJYtNLhNv+d06u1Y8x9piKPgJu/2LEu/GmRwXXHbVItedZUC0zSEpwDdx\nqSh75gPMmLsnwvyv1rhX9tdOpFdvJhGoERiS/Rgqt4AV7iaJNC3D/fjpzWpL\niFW9DP9RhL/8K/zKrOSNDQwy5+AgFQlsbowdUhQ/rvtyjk4Urood/4P2kcJV\nW+pE\r\n=d003\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"39a343661cfec6c7fa0d53c9298bd287c89a610d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202203225541","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202203225541","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202203225541"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202203225541_1641250590570_0.0315649405571099","host":"s3://npm-registry-packages"}},"0.0.0-pr-202203231241":{"name":"@chakra-ui/system","version":"0.0.0-pr-202203231241","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202203231241","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3c17120c7a4d3e3d5a762d50d67f222d6fa5f206","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202203231241.tgz","fileCount":34,"integrity":"sha512-jXDQZbI9nN5ZRIiieWZCdleAxxwYyKWTmdN82KrPdpP0BlPX4vGOP4IIz2E0Nv/xN7omwA6wCGEhOlUZLHfjjw==","signatures":[{"sig":"MEQCIElYuG8Zzhd1Oi5jS46FtfYpngd9fkq7p0DDqQj7V419AiAZi7VeNJ4SPwFlMZiiPTFLcv7xeOHxLUXLqwWtl+47TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh04MWCRA9TVsSAnZWagAAvhYP/RA59pGMHiMzjBLLcYLi\nZxdW2xyXVfpK5cFYANiTZKzLF48dSSOxBEHLK2vA4fy6fLB0GqINDbMuqjDg\nF0LHoSTb9FicmZvPP8QdCkzX8O6u5DxINPWEnR+ZLFlmBhPmYmSylXMHwqZq\nNYwcfkf2//TbPvKPdtgRxjHjOIn4OqqKnqJgyi7gYZxukz1Ejhn0hjrbWtks\nH8Vs8O3Lhr/V7CuPh+otOE6fryu2qKbt8OrKy+jpU3IzaByEJqOYq+pyztD8\n5N79mXs5ZnRyMPrELPv20BYGIa9Xnh8RGa7WiMelYAG6AdP5fMqz3XGAeepo\nLueg0evNFQynioxKNAvqLQzxPIdJ5T4LQB4Sgm6QEJEzhwMuK0P4tQasqCf/\nKi09GJqBEzfd8OqSiXyriAuWwK2y+Dd99lLSZOuhUVZg0gn1SHqDCCGXGXWQ\nOW5YAHBVoq1nSNcsFb8ABdOJ4I935M3IJldiutmfyKfzpQCqrZ6SSqVVoVTS\nIgag/iCMu3E6P5FC67MXsD4hlyeVG4ezFEi4snijSBUPunueARl69P/eHW5h\nWblj454hC8ElEx7gbTVqyEDegr4l0ePkT8K49LUiY7oCCkMsRBslpYBAwLxT\nrDRkeTfVEKVLSTm0kR/mnOWwnxX2HGzOqXVB3DDPeO56hztW703VIYDN9WHR\nNpN9\r\n=CUnw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b7d3b8566952a03d2542e6513a40b6372c257836","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202203231241","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202203231241","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202203231241"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202203231241_1641251605935_0.8067400096886377","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220483049":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220483049","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220483049","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"96330b464e500b8c2024a03217e9c50575265651","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220483049.tgz","fileCount":34,"integrity":"sha512-MDjor/BBUz/fbSoqy8o0pKQ96zKwNowUJVTQrZs0r/OhB8gmQQlXi39W8CMEIMlbrNOtJQUaB65dLTPs0487cg==","signatures":[{"sig":"MEUCIQCnPYkGMy8gzXj1k564De0Kr0JIcDmCKQ+9KI+oecd69gIgNMG/v+iG8BhBZgCZBMpb9sjZ7fWfUJftnJ7WMhilT+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1AXwCRA9TVsSAnZWagAAEeMP/Ahvi/r7XAIvt0+3d9IB\nC5wZ42EwOR5rY06i53lD0giYbKAxJZJNer1ULlSoRaCy34KYR5a5aQmHXAQ9\nQLrD2jWT2bmQIfCh45mwPQbF1Eimmw8MYU3D1Yuf1rw5Sw/3X3g0UYK4H8Go\nAXAi9cDbmgvkLRW/tJISoRAA5sMIqueecwVtxZzyF5ME3THfhKHDb0sUlS2f\nkghvEIIXTC6ZysV33gFNVkFJUkTR1UDH7T7Gc3YHhwhIhZoFNecZcZg/CgR0\noOlS/fY5VboXJSbMp2Mu9acLLeyg6gEyKHQ6kzuxDDEDHBUqOCozRpHTDTed\n3qRe1PjAf+bzEenpkvFrcOrDoPUfGEktBNb5tG5k8QWFYG4dlL5LHXH6JzfM\naQPY2tsHm1ZnooaFghZzR0S44Jtu0VfWgsFGw/HRiIgxYhbvti/+Qki04pG3\nVRSvBVivUVeaut4WbDuqAo1OWMT0j9x4SsPWqYrlE4QVEtHsW9HW7QEg7lt2\nUEJ8lhuCooqXqtF+GDOU4/kkMqXFn0vGpGU+LT/3R2i34BWevGSqKFntTMt1\nGrSJvY5BMHYb7wAfbwQysl9r3EXuioCAGCX9bUSwfy6ODplKZjLAI4hZEjcM\nq14xVH+oFAg6HtdRVvo4vTGu/4CaP+LFDtmDqSZEx/CmbkUsuUPut9kTgzw7\nTPEG\r\n=Q/kW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b7d3b8566952a03d2542e6513a40b6372c257836","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20220483049","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220483049","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220483049"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220483049_1641285104631_0.1492818649229557","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204173424":{"name":"@chakra-ui/system","version":"0.0.0-pr-202204173424","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202204173424","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2bc428e72b509ae3426e2278fb6a9b9dff4771e1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202204173424.tgz","fileCount":34,"integrity":"sha512-brwQpfg4OyFaT5fo0zM5ET7CxV2wxjffOb7y8M0WBSmcV1+oqKZrV+77cQHS/DZQmVzGSVJiAJ/BXIF+wAA1gg==","signatures":[{"sig":"MEYCIQDiG43BT+DbXs6iPy7ctAq7nzdnS8IQuSUG5DjvwoV1SAIhANlihqNqMmZhxNRIg1NHtn/v0FnfMHqMULFyr02OZlng","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1IVJCRA9TVsSAnZWagAATRoP/RWvJnbP3vnHfkB5l/sv\nd8CGmcRgX9HAqcIpI6YLVFue2crWBGNhlYscwKkGTJNNkgTNbCGaHqQ2VHZE\nbnDTN8/b+t4PsfIa3i6SEbnGlbp1Up3T+BUNi33XdGQUwP31X3qo2oOWcEzM\nHCYTQvRr/CUFK3iIaz6dqN9VZRT56VTJ3ME3AvLbMDzz9CEAzbCzwVeReF1E\nOhGlCMcAUX3ncs2DX8meCV/J1OsmNp1grYvMOZ1W1HpwWmFQIUbV/5zxnLH7\neqqqBPukFVT5uBYH2C4tKA4KQ8P8AnOZKwVVVZBqI9eqeXHHwOenY4X49+b6\nYuoVGThTNb/aHdAP7TOm/NHIXCc8AqDzsK8Itz0YVxaEmQ55VgOAP4rRO6Gl\nUUI6JvFHToHQMfhBD7tt9gD+fk1dVLJVGLdyZplau9elePq1QP6RkMF+zn92\nmET5xb8HltVP4sjM10Zh6C/jmxbtzqH2eKjycCKn3D33vxsjPqXsQ8bd9uAg\nivRYwAVO64bzsP1gb63yJUU7hClDxpvV+RyhwY42djSJI0XG91PypHV5Z2e1\nee1i91A8fkDq9Qk3re2kVImBHOEB2h6svu0/4qOPWNqDIynwTsbDWjrcW6z9\n2cxg1HrYUP1cH9epeuqndZ4rNszS6vsvSmHIIcdgRp+2t/gbdEGEsmKV/SmG\n5HK4\r\n=/1Z4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8714d8c0a028aa331602db46dfe0102da4acb0c1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202204173424","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202204173424","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202204173424"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202204173424_1641317705326_0.5413674719854895","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204174042":{"name":"@chakra-ui/system","version":"0.0.0-pr-202204174042","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202204174042","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1a441f679635c12f8c5b3e9ac8519d27a84b2add","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202204174042.tgz","fileCount":34,"integrity":"sha512-VQRpY06aKreOZpI2OcBK4D+zxe35JRBa99/lDBJ1IzXLw7I8Qx1qJ9OdsnXKCpIXHVC7ucq9k3OH3vIYGbDuDQ==","signatures":[{"sig":"MEUCICZEnznMctyeFTd2pHC80fDM1gmODBYdNG6RNKnOI6bWAiEAtizwQ4jmYBChyOhxDYE2FLlQOxV0XBGiHq9y3aAv+CI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1IbJCRA9TVsSAnZWagAAnmsP/00AQaBtwqhisap9gw1I\nO5rqCDZaUAcE6JMyOSewGInIHokweqnNtPn5dNSplhOhKevRLWbkeOYPQUqA\nl+yZtH+z22hYYtTi1sTc28WoKcYuBLCTt75nXd8cvNyAv14VgsoaH7nVTZ1N\njem3WUrJ3yCjWHXVHiRHvGub1e4tFMueewafgjAR5A+GwDyt79C/6gjzQB2N\nIpciw9l1RMmhmonf9slu7/FfZyjkive82lhtkh6J4jVVLbWkZbwsccU6FuPJ\nlkz/WuyxAf+KL2d9pMcJR2E1DDERjpgVmzwWRnlnZhue0AafbB6FT3R6lfgV\n/oIZPGZrIHnxTV7cYRqMNvaPMtS2Mwn9Lw9/O8n2VwRQ3dBZ3bDtLbg/ChB0\neUgvagrnmNS2i9ZiWHeUHkAZPLfmK2fzES7pNgA763td/8ByFIMrxLoeIoS8\n5GYznuG7lBhdB/KIs8Z/oBDc/v6HTnmJ7G1kwqadVdb90Ssu30JnArnYsbrY\nlp0dK9huu1OFLZ/hCaaCUExQ6K4wOhY6xK7WCD7tmFa4rB1Ko2PUIJlVxkYz\n1NKeUNF8Sf+2MdfA2ZQG0TvslXdfhhRFQxTL0DF4II2/tBbbiB1ioaq9F6IA\n3onxBVfsU/TsDrVRWJ3zVeDQ6GtvoQZEdWKrerYozMdO+xWNxLjEqnapsPA8\n/Bp8\r\n=B6v0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"511bbf56c3567beec2ef1c71af24bef5da981596","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202204174042","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202204174042","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202204174042"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202204174042_1641318088899_0.6013144466108784","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204174930":{"name":"@chakra-ui/system","version":"0.0.0-pr-202204174930","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202204174930","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a928e236081200bee723bf020aa4837ff9859d3a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202204174930.tgz","fileCount":34,"integrity":"sha512-WDu9rDnvKZ5/Prvi2uHARnq5eRfS3OJmZ7ONrqtSXqsletzI84pTLM4WutR9+f9L59seBXmR6oW9Nzf4AoHP3Q==","signatures":[{"sig":"MEQCIFgoIGma5BDy+zSIl9fPEKjaM6iClS5ktpWipjm7X744AiBwWK1tTivHkhmXoinBjf1GHMa+k906TeZNsK9Sk2XIOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1IjbCRA9TVsSAnZWagAAuFYP+QGQtmcGnPt2KtrY5TeS\n9+XQtvPXNFsrYRt26MG5mkdCvRTG3s+q8glW4cv0YlViNBVIAuDVUcpjGAbx\nONYXAHTG75aHWWJ+V6pz9WZLWbEP3T59E6NeXMg0ZYPG1v9cnENIwMgX/fk0\nsPmJ7jc6E3BZvq7+xy26SXJZkYMrcLBKCb0MyTz/y3ZSvt4KyXn8ClCAimUr\nKONxsKh0Xcdsl3vkRWOM+ZPDR/B1H4JCsldgw6uNnQu6FAZblCAWRllgOb1t\nWFThmsfpE6YmXgfWf9kraoIdiTkoutz/j81ha26xtCyAZRxN/c26/y0EIavP\n+FDKVaav44HUbXHfUQ3W7QX4ZACZaDBhMe9vZ4XqNDlM1KcYxYRg+0HAxXZE\n58s0bmQ4qOVLsf1U1uWgONoSYSkq2IkoxIKKLxdnQrKWjdNpsxDZQwTvIRrY\nVeqtwkZPVclzDuNMpQJ4nEYQvJn9it9Uvnm4vBCImWlgElcaaXHD9pJZafhE\n6iyI5hIorPo1QLASwGd3I5BJ5bLGveDQToi7bCICfnplI1W7ZZRCMi24I7GC\nlJi/hAXpMO+gi6FQz5DXgmJPYI+lLNrItgrpKldTuE6rNVnmFlv5DjW1WvtD\nOlP79fH1f127WbXxnfdNVxgay9ptIp7YHHkFaYVr9yI32bIxSM8u6r3vWRjX\n+KAw\r\n=met7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"511bbf56c3567beec2ef1c71af24bef5da981596","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202204174930","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202204174930","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202204174930"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202204174930_1641318619658_0.4648156207273777","host":"s3://npm-registry-packages"}},"1.9.0":{"name":"@chakra-ui/system","version":"1.9.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.9.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"22f530fd0cb16c20e50abe2bb7c1392d2995382a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.9.0.tgz","fileCount":34,"integrity":"sha512-CnLmx3nVZo87puSKxDNNQUwJyWYCnx4ZUFXdDFNdKroQyZUpSYLVv1OniXbkjwEt1YdZMsWm93lZQb/0VRcKvg==","signatures":[{"sig":"MEUCIF6L5mY1/47GSf3bArKpax+LkiEcmCRX8gDxyxbAPhQ4AiEAznZZdRSVMUAjPvYG/Vh00Rmlg4xRu8OfV5sFFAeuUI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1K/MCRA9TVsSAnZWagAAyB8P/icvCPyJchW9t0EblFSp\n1f1mYWQ8xFUkkkaG/euL2e6xKf6Z7PQmr1nCFGS/UFuhT3UKGOYUz37c8abt\n/MzpGPVSmytr4LpYqEWEuWwFO/CAY6GMVL2yKEU9XR04c4796HIjcWrW5Ndl\n20QSrTZ9PBhYvq0X7X9bz8IUPeeZAz0lE0C6i322wI0XqkNVfl+1RetFHbtY\nC1c8oDbR2FBmPDStXjruYXm87tw/OzlWHg0/gosBXK29GDt+bYQq1wABiDEY\nR70WpG2SvUIaMp7zCDffexxhvDJKYbxVvJGXxzp5AWhniLvxyUy5k+GeaM/o\n3RIJ1dCwrmGcPujNZKjkp0HTim6iJdXtvatTJ60Zb/TDhyFyrvlt2wQPUOx+\nKhV23PlEX+bVIGZIeTWMUIcooSqHZUPDOlcbg1vU3Oqj4eeRXJgxmVXo6dbJ\nEmUDZG5e06wmiKrQ2fu5QiAclwa/VZYEnFl67WfwG22Rr6kwwTc4iOxMD0rz\n8H5JyxQy3wr/lS3oppELkY5auX3O4CptTRbu28HnE1iQ+qQCDw4TUR21BNIu\nuimSoHu1nHECGyOt76wUxc8aKs3XgPneqTQvpFXBTNrMO78at52A8WburQnr\nyAdSd8IKQ3zlieFOGOPwnCQG6MCgqECtS0brT8QjmOR74DjoAAZqCHFLIQVc\ntx3r\r\n=Aa+4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"e2525941277b6b96b38fd6dacb247ccf40cd2fc1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.9.0_1641328588146_0.346295528903962","host":"s3://npm-registry-packages"}},"0.0.0-pr-202204203645":{"name":"@chakra-ui/system","version":"0.0.0-pr-202204203645","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202204203645","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fe71f83691207da9c2a86518e3db21bf770d34e3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202204203645.tgz","fileCount":34,"integrity":"sha512-NZvmIIU8qZN2ULQB30K1WQNMfpWoh1IWzLbpxfBj8Yfq2z1Vkssc0tOUTujX/ETBEcOnf9smAsw1Wyl8IUHonw==","signatures":[{"sig":"MEYCIQD6QTP9JvWtRb6j1+7hRtRLYXw+v4ypP/r33Mae2716FwIhANEjR+qTCEDf+5Cv6qr29BlPbpkMdPxEfhTUKaHlkJo3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1LAMCRA9TVsSAnZWagAAkuYP/RXgjqFzH3aqy2bxqQEQ\nWZGTE3lwJKrsTzJ9GOReoi9EpSmp2SVOnFY9YaoZv1DqBiYXLb3JVZhYItso\nXphHy5hM52mAq/FX3apxZcq4vE62x76B3D60ozt5Y7V9TwSYfuRB2Sl6qvmE\nXueB96JOQ1ImSPkcJZx8NGYnjVIBn0iZrQ1zlpyDwqmfsEFKguSoRfInGoqK\nAEDei/bZ9LRP+RdtHlTCUQ00MBpPHomRzTdxpHoDeph+hjnkA9veYcEU6ZcS\n2wJ4SxHFGtIFLmyV0XMqM8tRzKPbIsD5osxdtB6YJN33FSWWOD5fALARNAwB\n0HosRa59P/FeGJUKfkYvy6TZwBSOCMC5bli+TX6o4TTruqAufWysaP6rwq6L\noCWyP7sYBw5lY/A29z3He5syWPTknIaP2k7o96FmCJ27hJIbL6vvaiW67SAs\nJsCUfZEyhSxAfux0DNHNmVBAn/qv3Vsy7ZYWNo6pa6NH2+URxMiLbPT5ffPp\n/8xb4rRIIWIjW9mVm5cdwMXmhQtgcv9rxIGXVQWAI2v27KS3MazhFGcnDilw\nqFfHFvQhSu1hGXeRd20FaFoRHdsCle72lbrDu4HOWmANDlRUvGJ1+FwmczTP\nun338CuZ6QoT3QKSlN6KnHR8Yu6Slelzd96r8dw4alAUtmwRXQybShbDJqBp\neY5o\r\n=AJoX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"dccb9a12709b2b6070a82868e344887b7a3255da","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202204203645","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202204203645"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202204203645_1641328651971_0.4041227827796734","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220421928":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220421928","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220421928","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3c0ee70f5b8da034d03abede1025e9daf554f909","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220421928.tgz","fileCount":34,"integrity":"sha512-vwCkKlCGr1SrDpX+M5eIIImGobVu2jYuiJPVUbSNbO25GMcY49MQAPcYD3C4HjeRq8IGQLXjNzEcm7ghvKSMoA==","signatures":[{"sig":"MEQCICN20R7VULT88ktGvVoC3vq784nf01GDJCRefdyUzw98AiBLwcGt5gK/FbTd1BdBON/eQcokdTVgZy3URMDOlVaxCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1LeyCRA9TVsSAnZWagAAZUoP/1VFJOoiLCjSp36sJIbG\n6Vk8+YLgM5QPhBXqA5JnJXC2WCSUhFaEKVp5+WP0YTdvUTqWk22lK/lWrPhY\nQkkzyRCrmLghzIThtUwsQxkIJ3ep1Zxwtt+I8XYEG7/Mzq2cmeEc5hy/zP58\nIVgWtmZfCtoSFQdfuwNHFeRKeDj7srGAvErsOMzBuiNV6IQSgwUGs3iIj5bY\nzBMoBhVEbM5wmchFHgw+po0OXSev972Xq8wsWcvIN2SQl5NybA7QDc2G67+i\nwPRdeSBD14Mwp6o643/ibfRKNXfu2agX5ku7D7traTEWmYIK1i7PToMt2+6Y\ntWlr8lUGTCk9pQoeHK5n9lUvBwJlMPy1N0VgVDuKnLgTz1S1Ef96Kbrjwobg\nDKbI2fACLJZeMiRSbwTq18s+CzvpXdaAUHSjf8kLratj5sEIT5VxmRrlDSRa\nDuAoCM7WYgyrJcvYrZ/TW1zBm4gRl1WOH4fhGFKB7pnDDpTDs99J899zRhuo\nntelf6VF9cx0nRioDtpczcO9V3GHprQHp37jABaJDvNhphV2zesYsHPuNHKD\n5kyt3k/lJ/WAiQx/WhT3eS93I5Vasw2mGVTP9b2RJabaCX9Oqxm32fYgsMDT\n2W1QSxho25EG8u5D3KFL+53xbNJe8xNsN0w+q7ptBKlcbybIF4OGPkyO9D7q\noQaK\r\n=RsBe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"4ef88685ca1e33e2ea6997dd3059f5f93920f153","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20220421928","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220421928","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220421928"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220421928_1641330610167_0.696702662138966","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206185910":{"name":"@chakra-ui/system","version":"0.0.0-pr-202206185910","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202206185910","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0bfa34d7e52ff71403aa23d01cff61a2b3124551","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202206185910.tgz","fileCount":34,"integrity":"sha512-FHBk3WRRyNr83boB0Exo0haxWdo2xO8vgyINheHV9TPSZzhlR9Go9XA+n1cQ+GLqJe3zrQmWiG/0HyfFHv5unw==","signatures":[{"sig":"MEUCIHokgnFKEGZ212Al96IfToxoRxA9w5tXiR4ib9P+NvnwAiEAnnZt+zkxkoqwbYR0OnSGR37zjzZ58T9qF3pac4+8rU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1zw5CRA9TVsSAnZWagAAmdgP+wQ0Dfv6y8odt+KQuptL\nv7omTChKkhKsUJRbzlIjmGZN/rSrPmEQExtkQYqCTBkLzSvCDicadCaIEclO\nwoez/vg2kKSMkOXPDZluoiN7D1ih/B6KVLNVfu9YNn9MGoUf94bEdzaS4TYS\nrtjv5sJZTpzq7N3m8sTtTnt3DRdgElvRXW0QKqQdSSIiQOlx3orhpUZpeP2m\nRtFEz1oV8yxFQORS3Njw7xiLUzIrjkmX1zSL3IKjxWP8ZHlo9LdNwqaHEHjR\nXTH7A8jl/T5kJyAUsD2sVtbLdw/o+5XbdDgOctLBNQSHOezh2BQoP4rTYnJD\npCY8QFOyO6FASaTUpQ5wy817cy/I9vxymjPv4xeeXFc9ZIPUAkBlb1LvAiZ2\nUmARV01hFS2SWNWGwfWAeoIZWCjS/7nZEqpTRaudVtVLvMWuGHF0dZpPDAI8\nNHeqHkY1S3XSiCIUet/wQkRdw542bNp1CnDp1A92+mWGM9T1lmYtMFvZhG6C\nXqpRxkM+57dgxaGLwfYWlSfurZczFIsfcQISklsIcl64cq+QbZ7lCaAmSJD6\ncw/uZmT4DgZ6VFw88b+kEg6IIeMiokXQkdIavK5yfa2rMZYcLcHu7C+a9phq\nihF1saL0EpZzYh2xxCulGM7OZ0vTdrzSvWlnHOjVOybXYqPJnLh3HX20gyzo\nuvzO\r\n=J2Im\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7b34351fcdb380a13640a5a4e7927f4585848797","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202206185910_1641495609313_0.6239841818222598","host":"s3://npm-registry-packages"}},"0.0.0-pr-202206192031":{"name":"@chakra-ui/system","version":"0.0.0-pr-202206192031","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202206192031","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"75b96a1c87f8597c88aa1131fea57596c1796b2a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202206192031.tgz","fileCount":34,"integrity":"sha512-yH7VrxEFwMfvvqtqK+VrEDBr5CQeSYy/Uly5j0GDSpsZtzePryDQK59HbudKYE2Ym7AvknZW6yJszOBSIk53Yw==","signatures":[{"sig":"MEUCIQD/zaJ934RU+mGEq2ycz0OzDNo+8xVqnWg/vMfIVpapjwIgXaqlA7vBF3zmMQtY1QGU9PjqzWQmu5c9uJfLv28XPnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10EuCRA9TVsSAnZWagAASzsP/05yT3xxx91m7OB8kt0e\nl/RIRa9kEu4NJNVzWoPL2JpM2NYBaE8GFc4Oj/XPxu+nvaUNlo17ssmzaqLn\nVtnkYjubI9yvsS2dH3pPXcxYAcNyloDlm7M6PYt8b44XbEGzXOGyh4nWfjf0\n0chF67ZGiDTmSg0w056H5HpHEu0/QFmHNMWjaNAFlNT07VJkhL5uiPLVCWjs\nA9PeCyOIiF2ykbe9ha/lWaUwgh1LAl4CoyW5dmQdl78GPVL96r+VMrxIEfa4\nF43zMYrCRwOgYXMm/eNCoRUlb1YzsFX7gvaM77wBp66EDonIK7zaVFsKbT9u\nUZAv399TXK6+YfIfVLoF8SGiVrVHBiwhyiBA2nO2nVnnb7qVNDIGH/hJYTnd\npkoHHYNA9t1/ZUKGuQ9nfTxOJuLpharfVeOfQDUeUEHZrhZjDz1fNIGZAO5f\nf5ot2R1OAFhe7qYMzFAY81t9/LagkURGyTuFueogEJ8TKDHp/inEYu3/Z3aY\n7fqWSNA3wfTt2KfUEsZGOJq79pERNSxQXHexwApgJlbN+wLZiPipCcqwF/8L\nJ28O+rpc87AfyI/CMORw/8VsGoEqtp624zJCUwRK0hClQONJ3t31BfRIIoMb\nwD4U29whzQRlPR9Djtyda5etelWAJ/+dKX/m8idK0h47qYCRmKsAsc7OV+uA\ni7sQ\r\n=64w4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a538c4f88395cff1f6ce14f27ac201b5f63afc10","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202206192031","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202206192031","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202206192031"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202206192031_1641496878100_0.42949246678641906","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220620149":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220620149","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220620149","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"935242a0394dd756cf3a4b2e8e4018062f687cc9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220620149.tgz","fileCount":34,"integrity":"sha512-WqQ6Mu39P3SPflz2jlch7yRFaxHXMKlzzoDNJwhnHwyZIcWQQ7GIT/8MpWokaxgV4Jdk7ANWugXBcEMJwlZg5g==","signatures":[{"sig":"MEYCIQCB/6VA4Jm9Y+ICGAh0+kjSfCKrBG9nExsk1dvCswrxWQIhAID/BeUpTql9Sh8cL2mLaAkaz5TJtpT93ajF4OlfX7Xu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10raCRA9TVsSAnZWagAA2BAP/0a/ibgPoqFuhow6B2W4\nWv/FyjLJr5IPmg2g7EyNTlPZH/3PwxZeF0mxaYyju6crh5D5vtC5nI/3InI3\ncZ69HXhyPHwjBmJDUuQ6UMR7gT1nV1maVwSaB1cV/P3RKEjJtUQ21JuLwwYT\nBD5s7i29KypUktBqCajpzZqWuSLFv+FVcUBCawXjphcEZpz/1eTas09W7CWW\n01tgcIrGeMbYod2sGORMP0nnAYvGt5K+dyIQbp15aaCAGTNMuEeLfJA+esvp\ncbBMN/eWpJb8v44WV8bcN0Xwh3JyNU7daKkknpK8LRHg5IeUmNuZpoy9fsRq\nT/9GofAQgza4O2eR40V5g+RSWTKzuNI+nh/yFl3c4j5C85RAypF/I3M7qt8P\nMch/sLwCiwlNI8kv0DtivVWGBXYkCiXiTSNuQFT+Xf1dAMUq4ve1ezcXcqY/\nF9U/p+7JWjW8lH2dY9eMKLMDJkn0JGcvbWw38NOoICTbjwJS0AuBGVVgcM/R\nkUPzubjUNIMEk6RtDqd2Oq44MrLVTQdFZwZVRri9zbXzm6Xfyibb1iFj4mkC\nX4MyS4cOMUeUtc/eQB0ZI8PMzp3LiYNE6RJnGxA0hPZFzZ/do9CFdktRgj06\nMaX0KhSznOTopLjAgxKLJFYHxvJmROXLbwo0tLhjdocJrskmhlznhaU/i8cc\n2BId\r\n=Fml0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"9d02772e8fd7855511820b6c729c0ce72a347951","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20220620149","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220620149","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220620149"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220620149_1641499353855_0.032492545395720995","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220620653":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220620653","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220620653","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"36f343bc29afc47d532275d739db7f76e0611b79","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220620653.tgz","fileCount":34,"integrity":"sha512-upsf2To7olDYVvZT45tPyh41Bmm/xNhMR9ti9H3buvYpAnSEvhRN6hgtTziqA4Of1nMxPRKF6ptDMTjSkjaLAw==","signatures":[{"sig":"MEQCIFVM+QeDJMjU3jfLNlv5FNdtZ2qw73DDiWLdTUSWhZAiAiBXRqfpuW7GTmubnPxixTXgvZB83H9Y0w30wy0wnfjZ4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10wGCRA9TVsSAnZWagAAn9gQAKBIuj7GNgA8WXg4/HYP\nEMOucnOCXIbDRNxOMlDDO5Bl8bKCFFQTG0Ts8ZTOPYmO5FA0a0069sVdg1Mn\nNZewwyBRMiO8anWwyqjFKIt26M4/XhaDSjiVKGFXOnN/9mtEuv2+dWFelMIb\nbfMsoRnR3fPHHxE/Rzp0AdiYcSIK4VYRp12hBc2Ecl9Tm8z1/dJINTWXnaf5\nxnqVQPP27D5TL6Z5KbPiGWygpqzVTItd8fahzRDAxZBRLKUKZLeYoqmUE/IG\nwxMaft0pw6gyh/LmNgMW7L/btOyEvirQ7I/EuZOAmDYSGMBvHDC2+gKMgE01\nVaIU7JK3Lt0JnjHHL+a5b5RJKonAk1RE+1lzThuXRlWUPdFtHttvRmCpprur\novbNf9V+oX99ko1B9GREU36ZCySj+x/3+EsHAT8kuBBRgGoRhjNhSFeg7k8S\n/XChncx8/rP47s7kdp+QHKswZZWbFNFRmoi78nidJ6UNX1dsgwXu5E/+taJY\nNZ7tP2yqnU7PPERu9fx7r/FzBleumW4q61kqkV0zpeBl3xpC36Jvz635ibwz\nJ8JTXcyHGgUY/v9WHOOfOGYH9jYx36M1s2x+SM1wgdCDc5URYsEwCF5ZQWMU\n/hKgUr0OlplAUptcGaR5nOUZq0mnfhw35zCvL2GydM8AAvni8ME8+cDM0nDH\ni71p\r\n=d8IZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"424dd3cd48383a7561b2c8558bb5030eeca54f2e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220620653_1641499654031_0.39216521614051514","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022062070":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022062070","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022062070","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8f3e4f3fd0d4bcfa4e388514dd2943c06eb2ea2f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022062070.tgz","fileCount":34,"integrity":"sha512-71CYGELAqecH92fecK8oFs+vbNBHz999NQ1C1Fwd1q/CfYDwMiGYjd/w58V8cAm/itImERcZDh8xnAfBH2mE0A==","signatures":[{"sig":"MEQCIDNamBCi0Y3N8FF/5nksQllJ4En22RfkAxpw8Z1nrH4lAiBpBFBeH4phH8m2i7NHc0nDfXzV48S4Dtk/r+7Dob4nIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh10wTCRA9TVsSAnZWagAAlMMP/3Fah3HKTzMy73qrcSyn\nbZtS4TAl+TzL6uuIkuJv/I4EUpQPom/3qSIt+GiKzA8MSUy/wcblw5WfEJU0\nYosN77ulC7NxB4PZa9vq+eZoM7Pr1TPd/iNY8/hFy2N8O1MHW0AX2BvN0q3u\n2PVI6ZlxERJiT+D7cmiNCgcBzbG8ljMfgWIUo1jFYnnYI0yPRs2IFgLLyn93\n7w9NB7PVtuWjMVgAtoMIk1VP5CYjAozhJvdbcd9HXECu7ObvuyfnQ/W7LeEe\npeKY9wxVbvmGFLBBs3MTb7zgGg6XnRc/LYmL6PUpu6UqdjN/D0vgRUmhvYLc\ns5svrWTXTPyHTmwpONQIPWWxmr+L6fNm+rNV9/+eK5hETjmFIOpJYBHrSWBH\n2fmiguutt+l23Z1957h+07mVSeNtddCA34KNebi2CFe6KsnR5GXSYAN4rlL3\nFWWF74mDW1A3nEcLDmJL7nW4+CGG2XKC9eX+jhUBeej9v4RaIs/m+w2wzZ68\nIzyI4vuEJ/9Bv14QlJRb3twE79gCx3Thr+eDyshSKWsbLMndmtLNApNOW3Po\nlCeQ24QbfmZrenJBjG0t9sSddAWsULpB+rlPvpBgC87+zytkO8teyFfDbH7u\nrNF8yKe4y6b2nCCFx+kP3TodXmQ5EqZULw++BMetMgDeEoq5dntjLuQ3GQx+\nxoq4\r\n=R0gk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"424dd3cd48383a7561b2c8558bb5030eeca54f2e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022062070_1641499666839_0.390905055600556","host":"s3://npm-registry-packages"}},"0.0.0-pr-202208163634":{"name":"@chakra-ui/system","version":"0.0.0-pr-202208163634","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202208163634","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b0a31412de3878719889707c4f8efbbe61396b9a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202208163634.tgz","fileCount":34,"integrity":"sha512-affGziFcr01zq673uTmGZhP8xl7S+n4GMeeX1UDo3lWaaIozyR3a+1PISjHTMafssaBjEipGxNv+aTL9OsODAA==","signatures":[{"sig":"MEUCICiVH4syk8IY/DmHB7WLXnQqDEd1w9h9vTo/izSh31fWAiEA6JQHmgvcWJ8z7RQo944VHsg7hstp/49EmFOfrNB6yfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b3DCRA9TVsSAnZWagAAHmQP/AotYCkUOmmBsPDfwJpg\n+6I1smUOCVO8N1cX0mXJpGoS5j4vJ9uDGyAyuv2DtrgQ/qfFsUB+XJ0XPgZ4\nNc86cXfuFxKtQkG6HabMETWQ/HE405t5SSKqIiq1XtvYwvB9mZiKWutS7k0b\ngNQuYgxnh3JvlIlFvUpq5+7/OVk08kNSJp9zNzLlJzttGry72ofu3bUsBnjY\nuYPg6uTq6CMk1gYpUGBj0OW4QmESlRpS6bO0CuY7hF3tjwf3JLy4UazzBv6G\naUIxcC1kSkOKnU0tHKF+5N2iQR946XSR6MN+34pATPlYy7xflT6iIFV2htMb\nEtM/767tD5oz01bXXy4H5Rj9veSCT5oWWyfRUXbbfa5KSPBgKoz5Jo2x0gEu\nP7JaT+CsKqiiGctwCPTr5HukaSosQ9qyFjQIPLH0VZ5ylOpcQuVXv7blMYyl\nTvb8B7Hx7XX/tBsZtM5VwxnFpDwzZBWlNVnC7ft89xXWbO3PQl/COFpRjsS2\nRPtT+VN8GHCnVMcfMT4vYBkFydwnYuEJ5Zpru39NTOPTxdT1NHAkHe3ouMr1\ngSMg0yPKRrA5E5m3cikx1tvG7jPBKel5IdmQk1trmZGVFI/YyBxGBRr1lj2M\nqMyFh2TIe3mCoQ/hayJxWPPZvg4BWb2sVR02+wylHs9CIA+S8s5B5vjQnM5E\nsFIX\r\n=A8ZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"c1ce58dd840bb3be7041b81f4ece559fd7a37f7d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202208163634","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202208163634","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202208163634"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202208163634_1641659843028_0.25500157411611424","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220816386":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220816386","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220816386","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"74b3c21ae7f17977b26354dd9267aacbb6fdeac5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220816386.tgz","fileCount":34,"integrity":"sha512-+l3tuti1t0bxhjSjDoFcPaPoRjUVqRx72yEZn/FZr7K4lo1+EO0HWY2kgBRBXDkFKffBLaAHr70x6CEWm2qAqg==","signatures":[{"sig":"MEUCIAbXOyqzFpvUFJU0tv6cJuEQpMrrah+NdNlHU8agQTeeAiEAqwLsXfigCuNvQ0dCWIzEWs+HbupiybK+aeCKNSYmLj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b4eCRA9TVsSAnZWagAAagMQAJ7R1UMdXmD4Zx+i6hkP\nx6oHXV4dcME0yspCE/rz0pqIiRw78kcDSfL4nscu1gOZbpn0BaMAZKB18pZX\nJT7bzuKS96+6wVR+VzGBufaNnw3D2hv8CRmDS65F0h6evug4/QOJHQcnN0NP\nt8YmPbfMKpxLmCslWSOWpVm3VRw8QVRDWWzB/DF9xKoCp8h2OPMyQ0B0eOBH\ndOCUfLO290fd4Ae2u0Cyj8EBBf3MlaZnU5o4kW/YaaaGMIfMX175ikB0Yvks\nzDMWSFY7mOh+ndZg/vsW2doEkktrylO7zSKgpxW8DJfiKuPWzeB8GTuMIlfB\ntVeXFHaPzno3UEg/5yNs2GaeC/1LxCUV4bkVW677e7RRrWdjVkjwXCVKQNmv\nu6ytw3ukjW6HdcIMw6WuQV6ltS6rxsQBBiPK1z6PgTcJNwwXkOH6pXTP56Wq\nfodtEJ7pi5EZ9fmDj0KQ8vbl/qgSDNZA7n29g/70DHvbV4jQQkysnZ1UxTJI\nDVDFX0HjoK13NGWnawwA3WtI0hmwd0euTm2cbxZEfIN9KEm9U6CFFtoDTcls\nsdEP/MxFq9+tdRa3VVpIgsFwulDYNkFMN4ISn3+Uux3KpZ0pTQWqlbhpqctK\nOMXasJIFpUMlihze2T2GfPSRXAOPJLWGor/AKcHLBqPE+QLijgMLKpj/uxmc\nW7mP\r\n=CPw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"25cffa7d1649efc7866a0e2ffec5a6ffd9443d90","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20220816386","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220816386","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220816386"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220816386_1641659934437_0.17005427978409626","host":"s3://npm-registry-packages"}},"0.0.0-pr-202208164521":{"name":"@chakra-ui/system","version":"0.0.0-pr-202208164521","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202208164521","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0bcde9858d999837405dfecd9627da055a2004b9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202208164521.tgz","fileCount":34,"integrity":"sha512-9QkksErBVlzGbpKpHW1vHolaoLv4gMyATUQXttCrVcj9JoHVVwzcCnFuVl29cTN58lVavJ3jo7yoSW/Wg17hUw==","signatures":[{"sig":"MEYCIQCaajfvQwyy1yLFAo41mureIaUuvuWHUm9e6timTa4rRgIhAOk4hB2DR7rGe1EhvmMRuExWnlXPNHDxdBbg2CNQAHPP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2b/VCRA9TVsSAnZWagAAU5wP/0GaYsBcqTVXfX/axi+4\nFdJnsQyWn1b3uMq7sXM1wcqwrc11jtXZeLyhz8jg6C17eY6c1U6otxamUMc8\n/eMZ9I5KZg/O1WRdM6Bzf70z5m3lofyhDehc4qqsUofL+V9HU2E6qGF6JVws\nQxfQbFStimCq5yQGIkhlu+X09bFrTN0vLPN4j/kQj6MSO+S9V9xQcvve0Ex+\nWfdNapZcaCdLVpGKivNww8yg3uflwXWgO3+PH5wpO0GOxqed9mHMHeofhIz7\nH5kAvWWEqivrIgCSxIhMPMqblcBosvuKP+U0/Co7jwm2Popas+M0GQ9JfbgA\nffPgtGHOxPVtHRmT1LCo73cpML2pScWpZP81z+3thxEYDFpQW3QLphOycT+P\nQTAC5YFyoVfKFsVeKBxoiEIqEpwLLMg+KJPw+/eMAfDZ/4fpvQpxnK0k6dB7\nAZZWa04dTdSUCD+IKJhrJ+oYguxKWZMtjUldiItZdFmJ4AEn7o97VyA1r99J\nge4RZAa/67+cXlMfHseIyNtZxOyDYss7S4d+dIxQdmGHjdBJA1jyc7KtFhbl\nCIvjMaXPWTbL1cp+ssEtJzLfgc2wCq4O6yRsfQGEMtv4+BXDFrbqiv9yFZvX\nk+6gsZtTZguJHxzlDs9/sdlbEdCoAnL68GFKW++RpD0pvVWbEpl9kVtde1tB\nAQwQ\r\n=Ipz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"25cffa7d1649efc7866a0e2ffec5a6ffd9443d90","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202208164521","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202208164521","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202208164521"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202208164521_1641660373284_0.22090664551700745","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209205059":{"name":"@chakra-ui/system","version":"0.0.0-pr-202209205059","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202209205059","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ba7cb20c2337dd319bc747a97fcca297e1876936","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202209205059.tgz","fileCount":34,"integrity":"sha512-3gftgLCF6LwEFqsrt0+43gOMp7MHUb5uX74IN226HaCoMZ9IhkuOAdpfLpfYBEgVC+RpwZtTEe0Sa1Hfyxrucg==","signatures":[{"sig":"MEQCIFpRe4h2P5t8QFuUfTto91JAZPtZujYeGQuzHKwW4kVhAiBlMQolO5sFSoUg1II+VDdjH9cNaCwrLh0Xid0sMwQk0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh20raCRA9TVsSAnZWagAAqcEP/RRjHs98LR2FiNzf5XlX\n/veZpLYNQ1H2CBvXD7XJhgePK/7hUdRqR6iMVGMl2i5NsVOwAoNLWbm9ULhE\nMGycKCf8Od1DqjWKVt0MCV2FprlvymU385XH5XGfN973udqTEXXxSSF0druj\n11+mehxfCPgk4yex63+nTS+PTQbLL+1NQ6r1Lgd78wtORvGVtzSt1aAQidtl\n/W+8f9q7Jb/n1B3/N1geLcLO5aoRk7P8jZIxdvj3rG6QUurlVzYfZCQaACSJ\n7eTVUa+O2GsQcZZyWNveQyinf2KFl0a5pvMR3qH8cyyDWl7qON0aDKHSWD6T\naaD3tsTqGFJGt2k43RlHUFzjm8STaHa+nG3ACOUa9IF1kdewzmNCX+Mz2g5O\nX0ZsDUelu6kLIbnG4294XRmu5AD+OKK36SDv/XVny8pCh22N62qbD2uNKozN\nQ5bVwCq5s6Yab5WJ6DiHtKDxwRxsPQqL9B5d6XcAGdBwkNAhB4ECNoTvTWPO\nfri8coaQYD5bhRJX0zRyrHPm5+37Q8iTE5Wp5VrL21Ek/dt/ScUSZENpMzTF\nLG1kpXINu1b/MSI2PsXVWr4H7e2a43qYo0kLFkFGgzUrtzbPiOJKIdkl0h6k\niIMPnmBGe4kJKYEq45YmWOz2jxYtTO0kVNSupidYsWzCoc+lkJzO0pDHohX3\nUw2w\r\n=X6Jf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"964c30674af12a49400cd5332aa6eaf02b1e7f28","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202209205059"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202209205059_1641761498618_0.8302208918354295","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220920538":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220920538","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220920538","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cf9f7bfb3807af4754288903783001daf7fce975","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220920538.tgz","fileCount":34,"integrity":"sha512-C4W/eq2VpHLS47d3gGa5Gf/QxZZJ9GtFmsgqfgOn6a8wwIUo2DCvyMCpkbSeKeVdf1wF/Q1uk93Ke+FAQP0wAA==","signatures":[{"sig":"MEUCIEm0fuT+q1XePrxaG/A3HeYQzxMW4O3jLYR/PmZ90DKjAiEArzoSvRZIqtY2H+CuB+M1Vw/9+u3Pt5quP5R1m9xOQCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh20tdCRA9TVsSAnZWagAA8rEQAKIYFYEk9a+ziEdc8y/C\nXJTfHmxiuHDkS14j/IDz0k/5qWX+A9GaR3v75+Zuj8iXbj/TDUF/hSZX1P4C\nnVNVrO0fVPh0Cx+QGnEFp7LjOrr0qWnvZuTBHg2K9C4xXJwzlkkMcwKw4rz4\n6LuQy848wqlPS2X+IdoeQW6nuTTYIAHIDK5nBpdZ5mSVnI36+Kqf5vNbE4VB\nizpWtjpt2aJrSBuznnw/eRhDlw43lyoVhOFBF0mlInBpA91cWMBIAIN7MxS+\nGl33/VdjzxvuOXp1SHOSuYGieRBH3etgE7wtDT6nnbawo9J9XaahYSuu1qBi\n07EDjQaVscUcB5wGrjX2fCnRHdrM1OQGOj6qE8BpqmtAhznL1GMXraJLfX0w\n091zy7aglO3eVxCaT4JhhZwdexN7v4jP85hRlBes9j5fOgD8qbLEUJ8xxcko\nqlRrrIvaf35UkS0WALY1fLSqfCF+UxV+PESjm+ObemmjtfTOW1fcKYurEf+j\n2er/VkMyok5ELiNWU8TSPw1rcfATkrljtuRPWqo5x9eN8ahBUc7m7hFgYnFS\nCLCnfIF3AzA48mE8FRDMnWDojG/FYzn9ARvaU/QW/+ikTt7SGBLaXeosJEXl\nJvzZGpJuS0M136DNa1SHU3YnIIvPQ9/bwnyEdSZJpB12RozkmOpfo233pMh+\n4XZa\r\n=4DN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1e9727cfa2fe06bbcbaaa28e2eafec37b111b875","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220920538_1641761629075_0.8943764322823737","host":"s3://npm-registry-packages"}},"1.9.1":{"name":"@chakra-ui/system","version":"1.9.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.9.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3abf6e7d4ed7c65708d217aee32fb9e293f8608b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.9.1.tgz","fileCount":34,"integrity":"sha512-zO/PIsosJalC58eh0vFeQGTigUpp9iHLFgUQDjs+STdreXGqYZdpRCYxriMt0ZBHNL+N8arHqlzXOlZxSZk1sA==","signatures":[{"sig":"MEYCIQCwjcfCR23ZuKUuJxjVvjmX2lbpsTj7/AE7NPxHTXTPpAIhAOji6NuEqgapuG1k7u2o8iso0zR46BZ9oH9MSNitX9c/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh20xDCRA9TVsSAnZWagAAvYIQAJgqhcwWX4oe177GFmam\n9Vnx8CiAHC0nfJpt/4OaNPekk7/Diey48Lh0Pw5/NvrOuWn0YpD+5gIz6zIz\nb+fMIWYzKshSZshVAfZunBXTaRa1eGiq32M4WQyIm0wYPPGwQF7hxsJNRyfu\nqgB0pOOHkvBhnzzCr8aErd3e5VV2mxU+Cm72hn/frEZeCC2WH6KjYvegtDaG\nEXMe/WmxFo6ORn8fIMa+xqBJTc1Swcjg4TXT1YRHkYK9JBiU/9AtDivk1Cg0\nwcw4ccyAkHsLvPpoZInr7HZgQe98hGmCZ8ESHmxb4Gl6WmTUvG3nzvtBcR81\nV65SR9EytOvPhINMctMof5gh6ych1UpSCXzOMzk1P3Zks+rxF8Li69FdCR+A\n8VUC56magGhSOmKV9zjA9srX/6C4SmMdkznuPTGn2w8TDQKZ+lxdFDtkLlnZ\nv6EsMGVRegX3HbcWV3LC59rH4ZziEOqubZyk5j1gaSSnMKc/fYRUPvq9Yfou\nnXxYYxJwfdk5hAeIdRs2eBxzkIb4H5nrs1XN9OtdvVHG7gfv+TB6edAuYAPd\nuVxjXw5ZYyfwwc4fnIio4a5NV1u4r5Y1BpzeUKF0cjwySPv28dTkQO1MPcq2\nyFP0b8CVgeqvUs7WJs+4vPjueO89dYzlotpHowz8/N2qXETHyAc9vcgetySW\nKte1\r\n=HNd5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"77192eee92462cb6eb7eb40636d90c1f2d7f600d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.9.1_1641761859793_0.7881030525455561","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209211330":{"name":"@chakra-ui/system","version":"0.0.0-pr-202209211330","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202209211330","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1bb0ced814f9cd1fbfb349b9f56cd761935df660","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202209211330.tgz","fileCount":34,"integrity":"sha512-YmAC8xMNzNbwxRbm7U//+D5G/r4JR5+YNIy5pA0HX9rQ8DFPY+1p1StGPf5K7jfVvgwjOsIzKFXmbZZ/bUsfiA==","signatures":[{"sig":"MEQCIGg/yrlCWeTyvfMCDOBcjSg3ig0xvsJKPZY80tamwzeaAiBOWYXE93GiVa+XArsmFjzgGTdtQVqAm6FWHoL0izpjlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh21AlCRA9TVsSAnZWagAAX0cQAIkYBA4E+Q80LBivAUAs\n7+DGGTAIWWhNR7X0Zkxm8IsORV0hhCMXLF1SVIYuupFQQPfeTs7TKnz4zH2S\nwDCYV/mOfQPz5OvfLTozLB8akvlrDZvPooxW6MziDaF14nb8X6UP4GZaVuPS\nmmq6okoG7Wqkx6b+WP4A+axe2PzEHKEoJIOsbcj8AL1Fqno1zJC/Fk6PdumI\nol/Hn/y34zRLAc+VYHr53bsgdH1HMA9qm7/8zbTwKvTiSdb7PPeoHFDumDI8\ndK65tAm8YlgOOGQtpExGWyXjO3w6GJynjVZyRskBRgCIRnU5Oj9VT3Gd7eUL\n+1GdpXLKn5Bb847x92L1LFEnfI2AxJizSKDnAIenvstd9/MXD1I9zgB3m4AT\nuxn3WH3FIoIsZhQmVSPF6Im/c6oZ19I1vahSS1k00Dxa2+AOxDLJkQN0Fb+B\nPuczW3HUNGo0WiZh9Bjmz+Rhbf5LDy9z2Xep/hqZgdzRjhS0BrM0dzyR2CVu\nTxbziDHANlYMH+QysQDeq6sCUgQqFpPmjSN7hh12zGmKMsPFBu6XCrcIWCop\ndt6qGK8J+W6Ci3SDlvmpw+5eHYhEeo6ZAJkfOKYCE9QlC16TybpeDan8QIAq\nOgV7FsUWHImG4qTvHB6j5yzNbIHX56ihb9Jb5j0p4JuIsnVQ3KT8HaRPkYMZ\nR4gZ\r\n=uUp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b18ddcba046cf5fad125d5efdbe31f414e4d9afe","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202209211330"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202209211330_1641762853325_0.5648746871762915","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220921590":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220921590","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220921590","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6ee54212d03337b6e209b768e2d91fb9d372234d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220921590.tgz","fileCount":34,"integrity":"sha512-NpbBGyNl8edNZnUooiC8oFA5sB4ce0HDRwl80dqF40WnWMnurarO2X7TeTTXbtvhGv4wrgqInxkugJZLN8SY2w==","signatures":[{"sig":"MEQCIBfOVsc0BxnSyxCTAolRd34eCTRXGExqDsqHfDmp4n7xAiB0UZMYbRy2GA2I9OJh81UXBZZB0nONIljFMcV+P8KAJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh21rICRA9TVsSAnZWagAAQ5sQAIUnJZFYa/O6+MS+g3LN\ngBjBlO1eJHv2Oxy2N76lWolUgXP9HsjB1JWdPUdfKHa3iuk1Fh6jUuIe0mHC\nvwBJnkv0fMewSW2LWixkc4KPYeI2IvnQwWX3yyPz/wNuKuiHLjxRqlX3oqco\nVms6UhhtW1XLKyj48ML2RcZSGOn4iYjcbNhQobiA51BK+WaX9aOqIKT2zlp7\nVxafVcJzsN5LFPKVYiSyqAwrepNCdnZXSSvk1d+gkG0c4giorQYS5Kk0+l2D\naCrFgBl4aq1n1eQAj0mROWN1T1fFxw6ioWIuENIkG3Yurr61cQmJ1iRz5pxl\ni9Vtes+xfPdOCi1HqAKImeRXHpb2l5hObDwHVeOX/Q4muk4JdskK0G8khPNb\ngiEF9focTN1rodUPlpDZUhNnVLW69OrrKbGnAXJYxv9zXmOyU80Ku1awxlFE\nwKu/LB2F0xyJwvBZe7fEY2rymisPY7gDXtMRa7k35BIO54ATqf/sogAbBeC9\neckfHvv2JjlZvRa4Va8jlleXiO+9YiS+fHKTMQq/+LkX3qkcZxFtjQPk4BpX\nHekXEU43cB9YKF+jqEo/2lqsMbvgS69klyHVRAZcpyCSgd+moJUTFYU41at0\nLM2+oGamY40rOFmtt3RavXp2qZD65ZORNWOR45k4twQwiSEKqOv2Mo2lBPhS\nitXV\r\n=S5sq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d94cc9023815a2b1707114fff743e0d2280d3b60","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220921590_1641765576491_0.869848268806872","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231642":{"name":"@chakra-ui/system","version":"0.0.0-pr-202209231642","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202209231642","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8c72207a477998751367d0c724e4bc4460c5de76","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202209231642.tgz","fileCount":34,"integrity":"sha512-aFI/OAhvpSDcs191EjAQl89ize+gEGOzMc2dgMsbZqWS2n1ZBKfYSi13eg5gnCyalxXyNQJr3zUyNbvy/LytlQ==","signatures":[{"sig":"MEUCIAVYYN4UmZV8KKOozC9SI7T7Kd37zGWMg/Ofaynfky2OAiEA+I7/ki7c99hxXXCTy6CoS4Y+38NAXW9jgNS56Wdt6ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh220ACRA9TVsSAnZWagAAH0EP/jx4HAi/zTQbM80SMCxs\naUwcV7x4ai7OlW3yozMTP0lbEgwRXqLh/DVOZh8MMoUn1i1zjXM0LYeN9bZm\nloepb6juPJ1SEqnC6u7lWVpCa7NRWOEADi9+tRsdm1kMOV4PdR0BHceTfwff\ntkwDjg4yLis0RKDBx1BN7VoeEEMO2+j66xA2tFYamKAHp+HSoj7MAwAIknpz\n6d0Fo3Twrd7d5x2C8/OHqaESuN2+IQzFDxnDeNpNZmEWDhkQ9WEOZfgtU0bj\n6u5xqUBNn+rw5knJ4sRH4okkfgyWS5Lb7X3KHKCmrPDmC4fIlZk1yfRdj9jo\nArXj+PCSL3VInKrK3XPvi5FZl6DL5zJBK62n9Pq+c+dMQWKepfFoesQrzwcm\nZPXKA1Ftcjxg/plC0VhB0t0KUo7FKOQAF2vMDJfPRDQeKEc/3xcEzEV9lSoY\n+0/LxQ+47Afh2okcmdse7ARxdORjwhZu2TWJumf7I7XpCAUVqVTb4LRpXaB+\nlWMKqmCx3z1LABBJMaced6IynotXXcB4s0JK6oyKuwxRBErSB5K9jtldmxrh\nzh+O4lUbRK6clSvUV7QfvbacKCj1GrHsr4nzauv4FmC4ZYOFibwAv8sYAqD2\n0E4cmSrTo3IOFysmlPd+AVjx/0GN17Qnq+PL6YK+Laj4GXSt1ot9TsaSbnLH\nNFBZ\r\n=yaFh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d6b6d38345ae2fab45d444a0e7998b53874e1c07","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202209231642"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202209231642_1641770240598_0.39083296183439864","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231818":{"name":"@chakra-ui/system","version":"0.0.0-pr-202209231818","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202209231818","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"467821d8343edc1b31a5338d89cae6b0cea077bc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202209231818.tgz","fileCount":34,"integrity":"sha512-nB4UWV07Bd7fjkBSse8xtTZtjTp4FH4GsMR+rpLBrKlUm0baCOD8ZNlaXtz0CN9wHlxOsZup7NNv+uYUOPREBA==","signatures":[{"sig":"MEUCIFR4vzZcsIA78f+8VmtMPHFag3K2VnlAZNSgeFuXzigiAiEA0275WWe6inRhNy7LAdwNnK6PZlsG7er4/2s4hTBV1Cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh221jCRA9TVsSAnZWagAA3cYQAJ+awWmbM0ES9t7/e7lR\ncEP3GlpUoTXkF2UOaX2B1p7lpNN5GDqt0iVJV9G0QyzGn8JsafrpD7nXMO+j\nzjlE1UYc3Ks1tlvEvkX/+w+WFJoDzIRC7QJ5rSx2jXMEacvGnM05m1Agldvh\nrpL6NpJC1+opG9n9SXOaI/d5S4D4u7ZLNPdcdQZKLtjGebGHO/qM+pw0XY+q\nATh+Kh9QNRq0k+uWIE6oqRNnkiPl8hvQEKR0F0urHX2gwqJLC1ImYq4KOE0y\nX0TaDfWaoIkj88QIzx7HaHwJlNiAD5lI3IOhDmNX3Tccyaeag1m7l7QD82uo\nDoowQE24s3wHcwnclUtp62iN0MoF/6gUaUuw4eJiXcXAIruUfvL5e4QroAPY\nS/RPvI27OIrm9OYBtQi1BWTxpCxgOEAJW9cWRM6ZUnb7/cksEXZaUEbKf1UZ\nCDwhs71W5pxrsi6vM2lWfJ0BxsrXSAzHOcbe6KYM6Kr2I0ODdnUpDSvoU0yZ\nFWt00ThFx/pcQMGiTgVWDp5S5Q51Yk6oZVx9/6MDvzRuOVjwNK1pLpwUU2wH\nVcDvHra/U+gXtDDB0clmo34Oaw4wYNHjDG+02JAXB26vsG1OvPM84sNPZg4S\nDUXIDvUR2AdpeJx3NXj/0JlrjV60UPeCMwaXP5daHgUlFi2+EtFRJ0CA8jeM\nr0Mc\r\n=y/TX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d6b6d38345ae2fab45d444a0e7998b53874e1c07","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202209231818"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202209231818_1641770339438_0.4183911387333097","host":"s3://npm-registry-packages"}},"0.0.0-pr-202209231927":{"name":"@chakra-ui/system","version":"0.0.0-pr-202209231927","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202209231927","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eddfaa24d37967a206a66b583649c59a6c94ff35","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202209231927.tgz","fileCount":34,"integrity":"sha512-PMm7Mmh4MdIgKJWFayBWN3HTKHgySbCzJ0nxo4epQ+67ORskpQopBoplsUJNm9WQiWUbGCpoLksIotuGpHhs2w==","signatures":[{"sig":"MEYCIQDcdQZYxaG1FSb9l7xEySH8jTpo2gh/NA80irqqMMjO4wIhAK7L+yc2MiI3jeJzg35hm73bKyVgIkoUUtcsex8DQRoS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh222qCRA9TVsSAnZWagAAwu8QAIpAsaH97FEqUfQGskG7\njUhRH+Quj0zPffJHL7orKXMMx5zcG94PQxZRgCCxdTop+Oc1Ey40lqMt5JKQ\nvkCusadZaoEwFrHKq1uKsa0fE67K+OucZpnFjL7xcLPmxgEMswWg8r3tJU4e\ntlw0BKvlrl1Fx7hVTqr7cowEoGbu1AT7cgjPnokz6BQNPVMiYkNyr5tVrhKe\n00ZMtomZoz+zVQelIPrIVGZLztbMTPL0TrDACLEmaJ7/eys2cJaMK4wil53j\nTWQxbspf4QhkrVa0Wi81MwbL15h1Q/b6qMA2lfeFACtk8oDMZ7G32kaaML3S\nVshqJZdgLpG7pVmdKQFxPDw7zXBBCZzP/Xjl5RbscwwwyVMH7lZGWIQ32qDx\nLQvnAR/S+OO5eHF4hU5O/G4/5AZDmVVJ+dGdlv0NE65XNS5+ZhWiaYljbnS8\nmfYWgJxXoLwwZ1ujh/Q3o6sBQoYr76U3h//ixb+Flh81pcFVvx4WnaVyTAor\n1OJ+6hHm7bNP3qLywhbsL2udeF40MxtOh21rni8ShOuUWmlmt2VGm3plxWDY\nLncnJva0tN8rBosa8kMJbs1dpHkFBTQ40snzEDPRAxsSt8aAN4UXwFHQgPU+\nh8vu6baTmuhkhJmBObue2YlbssC627DPBJ8tUZLaFEzu1po2JmmPZFsuDcoQ\nrtC2\r\n=eiU4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d94cc9023815a2b1707114fff743e0d2280d3b60","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202209231927_1641770410055_0.060845403561639255","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022010134944":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022010134944","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022010134944","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c9cb01f164e108b7dd004d09def33dae52c68a09","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022010134944.tgz","fileCount":34,"integrity":"sha512-qiDOpAgSY/A9UINlIjdC9MFC/oILGwY3JGEkIB2yY+c4HVwNcD8Pe2gLrS1rwF4B2smysXrTy158XccmwdHR6g==","signatures":[{"sig":"MEYCIQCja50OagCXQLMAu8wQnXn8Q/7PGt53sUwTWm1sUGYKZgIhAL1UEZkkZVBOzhOOcUaKBjRsIcuI+sKldzdCi2/Dv5OA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DmbCRA9TVsSAnZWagAAgMgP/jLhl6PgDbWCDaRpJmBP\nFOg/lduESRYW+smvHOy5hI472pw/NW6F+AG4dlgsPtuyXOL/eVvYZe6Nqmcy\nLEo1QhXqxvoCAuZQRv1oT2mGAvv6Ws208Z7gq0G9s6n9xPxo9gQ+DVdoNln5\n6kDpSJSsmCehyb3j2kQkXrOvaNvOl72sVOcatjfbRYXPfHp6G3znuBSBLHNX\nzFHZqfJsFwySqagyNIWTF2qOMrqv8UWdHWBlbtA8GnaNBaSFMxXAzIVrEF66\ne3i9GebxmXPTzBV6+vvfkDziaP933WRM2gt66uP973KU6P/EqXebdMc3Ixaw\nf1rZ+SDjAngs1kPnB8NnrVvM4Dv6OmG0wVAvpyklfF0R6L6l9bbWX5xPmB/M\nAM3vsJ46Du+zJnRrwEQY5IrY40VcTo0ZNfoMlrNIB3EFA40NwpZVpgtd/QoX\nQ+I2ENeY7D6ibX996doCoqCSMPeOlgVwFL4RCGWpBKZMhcK1OIgwbbGvIhue\nS2ygHnYekXswXUXU15XcspSHFYghWHUUccZ4r/xoDQlOoYO0z4aR2WboB3hl\ngRkmJ49QCo+S7ki3i/u68+xkyi84K9s2Drk2GRwPKf0Mr1t+WMUVZsy6kIFR\nWZtANNU2MPH87Vdin0tWXAy4IbbmnUZii136TzpbDbKcmbuGa8F/e9+L18EA\ns3v7\r\n=k/sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6a3aef0f72fa67abf8aef80fdaf85aeec520fd2a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022010134944"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022010134944_1641822618941_0.4898833682152832","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201013510":{"name":"@chakra-ui/system","version":"0.0.0-dev-202201013510","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202201013510","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c0251abba7827c52205f5063f4457a15156d9ca8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202201013510.tgz","fileCount":34,"integrity":"sha512-6P+i0wbRacCVQfvMCJQyroRS1LJNME8vQDmFtkySM+qcf6vREGo9f9e2TqxOTTU4abQtWe/aW3g98K6cGEx49g==","signatures":[{"sig":"MEYCIQChamS58WB7zz/eAf+lsuOeY0k3/Pn0uvei8gDbMDzLsQIhALvyfiJuLDzvAHMJGrplMWuvex+oJsBM+2/WE/HgK0wF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DnyCRA9TVsSAnZWagAAdncP/A/4xt9j+wr2Jp0ZFL3J\nd/TgOXMb+1UY/Nnu/9ff/RvPIEqMoblrrMgbXBWZMEqKiqYiYUk81Em8Dcc4\n13ocsfyxVzJb7AnomQI8eq/fHkjXQZkXwixvNrh1OOwbV9rWVfLkZdEVDxU7\nDah/UYq8znRT2cpFi/KJr5EGIlN+aYfxPI/L38skQeaWGOzxzBLTOgkbo1eU\nUPIFDovmdv22SLDiI7b8IiJfRTH3vx3GOXrgxyEXWkn72gGYlR+U8fv7d7Hs\nnUSZKsNpHsGjLPQXdNjPUZHJQRFoU/PQwaYpdM70aSiCg1udyK+KrnTqr/ln\nqCUJ9d62mtu5JUiOA+YYIHgXFOEWYz3S6L2AMkxDoagufKm5j3/vTNGYIt5k\nsjx0mg5pO770/b78a81/acxPHIxpIP0Dy8AEaClKz0dMM1bp+P4GoAmdNOLw\nH4/wnM7zaixIE/939hpGfbCn0T/cpeNKp/MAN23ITA0VTLgG1I8s/ZDN4ErO\nxl6kNBSnyArLEqCg4YKoeC+uFpV3SsVH8l942uX0TOZKPgIs0PDdTj0HFuVS\nOA7uv3lEELAFAwpkMv07SgOVl268ld8e834XYrIOjLxlQ3ckC4rzmMlPdsiu\nt8cP6oaYVtGfTg+bwm856gLJoBwRj4raHQHjwoZiDiF4JSxxrVxx+QJj8cjy\nqnCd\r\n=dv2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6a3aef0f72fa67abf8aef80fdaf85aeec520fd2a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202201013510"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202201013510_1641822706271_0.6115855934219567","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201013538":{"name":"@chakra-ui/system","version":"0.0.0-pr-202201013538","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202201013538","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d6ac6e916423271b5d9b82b7488f962cf2ded32f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202201013538.tgz","fileCount":34,"integrity":"sha512-oL11F4oZVidqgg1ZSId/iHpGN7wIGRR4CiZ89Wme4PgBmerYMo5Y9BL4yG+0sa2xfTaFOwmQa72RchMCmZA6Ww==","signatures":[{"sig":"MEYCIQCgSvY7wCHXJH+tbOrmr3O1xR8EJ5VlSuO+CAP12lL+jQIhALqT/np+WO1rmV7d9mhQsWkJHP1zfS/A7jpWnOhAPxL6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3DpoCRA9TVsSAnZWagAAKsMP/3KjCysszlEPRtr7h2cc\nWuozZKav/h8mIqQexVh2/hbzu2BMmH4Y94/WWSBP3yR6IMXp3YYowebBGP7m\nPwVVXUWY+ePpW2kdZLzmPa9Jp87LbtOOpVtJcXP3RS9fPv8sXzk6MTmQY0OG\nG2F8EqiJYb1pEoJhdGKJB93E/5VSlOSF/wk0XauTh7pZ3NVTlhlmUM2Lmh9P\nTMREjS3uyI2wqpM+BvjFOh+nEyUro4C5W7Z/Ionv2WOhTNlqW2qRmyVWjvFb\n0mUvURVfmkLItBYHEwW7/nqMd2H5bEGJst7Xj9qmj8YBA2BNiOMKjx8kyRkI\nG3BKoR6aT5MYJ5FY22pRJQye01pvZEPnh4/2368ZnNsM6o8Bglgn7wR4MH7Y\nlhy0015pqMKdad6TsJ1RCeGncIe1Gvr+hqjd1JxPCUKzrUGhw0r4xxPFTYmD\nqbZwWSBh1E7LCxoTbU40g9cK14ckDo+Sn0Z77KDDuCtP3nFo+JKGfhRNkgC5\nnrJc9WybDv64vI7BIwxlLzm9wohdiqtBhvvOGF7sfWWXN0Dh1IVlrLJF1rBa\nTyePJKLtzndgsSFcsLaEFadFgeRLNF/jsh/0qUnVk0kRHFQxDi3GPYswstn9\nVBBCMpaDHDFPyE6qPhKEXmExd3ueaFlmRCOeAlx5rERNG/V6as/npwdpSh10\nQHrZ\r\n=G7yB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e1907581faf50b92f840816c8ff7eac72e06cad0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202201013538"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202201013538_1641822824133_0.9091198640692177","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201117413":{"name":"@chakra-ui/system","version":"0.0.0-dev-202201117413","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202201117413","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8245addf4487612fdd60e11fe66d9c9789467489","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202201117413.tgz","fileCount":34,"integrity":"sha512-UyZMILezKLM72NTn/C0wMQCLkOWhv2DyoFRVTi603eX+5iGWp02ybSY/EMyTcYkJhrY7oCgpCX9wkM6a821Mow==","signatures":[{"sig":"MEYCIQDynwJQkiUxVRbVVx7tQrYEiX1Vmr3aNXGQ7qCTmsIrvwIhAObr/Pk5P9H+biss29K/HOKCabOPIiWgI2CuC/E0kAay","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cFRCRA9TVsSAnZWagAAtiwP/0O0RWP+NY9HfU1C4CZI\n1SWLzho5HJlQdO/XTffAfebx3/KKGGGlWqtAvUHAYdtgtmaL5KkqAdfLeSR7\nt0qV+EiCnZBdzk4SBl3It0I3WmtMkjb5Tohc5NcZS+5j8vwsHSMd3wQ3toZQ\nj5lPqT4LU7OtAi9EhQ6NGJMELGSNCOowRUTBdxXtU75KW+FhNARDAzjof9PE\nIzKiukFyq8CaziRfGhkZpeWKwcJhWi2WFRKHFaoOFGVpb6+paH8R60smcwp5\nv9umJSTQDz69Y5o9YbgKUiR79Rwxx3xgRs/WoRjNRC5WIr93HwJhyOsV77Ex\npXQfTsD4I2Q6dq2X8lHdOz2ZVJOiwKtxpMXrru4vR7K5Cdmqa91Hip0MBBEa\ny7/p22CR8fSQ8ok+93+H+v/n7XQIywDEAsxzerc6eOQPMjc75vzQdzWuwNqz\ndPoL6E5mm4aIxP1upR95Br8CqLM1q1OmsIqxOwPhoFseDrdEeL4sWCy02dJy\nET1NXxRKNiqDs20VfdZveG2m7BbvLnpRNyTP9vUmK47gOeJuzeFMIReKL+GF\n75aa/qZ6Z7607rdRxAwIVy3+RoeqH0m6pWhkYW/NxnHSdyk4x/we4L3TzPtR\n6bFAKHxienVn7oFXxSL+8vav/UeYnqtse/e2HXO0EN40Rd8s4MRVblg57/Az\nG5Aj\r\n=RiKR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"472612e7aea64de64c6744365f7d5c6a97bcc438","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202201117413"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202201117413_1641922897542_0.37887961678615345","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022011175644":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022011175644","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022011175644","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2d58cdcccfa6e477a6c9ac69188b66f36410d699","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022011175644.tgz","fileCount":34,"integrity":"sha512-ndDtp/K/9C/qmtSpBFoUoQKK0qn4lC7VKQslJ5L0SDSSbd1lW/PK5hceKZJ+sIKLfjO+8o/opnrNPX9IU2JwQw==","signatures":[{"sig":"MEQCIF8R0jpOL27A/MPVnr6XQbJgLEnSSZpzQFhNbMDAr72zAiBou5SY5DawdvEYFO77OFwUU0k9gFaA6jDGCer20wtfFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cUDCRA9TVsSAnZWagAAeNYQAIaM9E3vMKK0YVlrrYAB\nZiENWJ0tnjVtFtnR9TXsdy2E8fiOAk/+11jCnl9MzgpT8TBE6kUT0DORUVv9\n6NjLOMVkLvbz02GMNusVEZk7u+zSXeSQuHYSntZHBl56AXt7m4dwF3sPRxGz\nMuuLww1xetQvX9Cb5H1ZhSunez+jHR0sGcr/dnJWybJ+1jjxACTxhaLi7FpK\n9kekY6rFlMJICnWlycbF32tZRAeVOzCO9c6LwEvdCAvFzkuxa2urEENIem8i\nsUzIdTjtjlbAXT9j6q+N+QkghpjUZ/rytlOo6EN8xXxcH4J2K1xUUOQw5akP\nHqDYYZtCbrYmp+8/0JidlGXU2mDUQ6oMQFAJeXbb9NYizqikQSnDRzPC9iUG\nu8gFb+02u4EjS7vQS8rSFV2rOo4UXCHhnY9q8Y97kr1wNeYmbcPONn1C+kvW\ngMPgzWdzGGCO0qV+p+ckBSHnDdGRzYN8JgDZwK/6m+W3i9ST6mLypMXHvz57\naHqjacVMz2i1AgwLZX5CZ77EmixOyl41VujeJpR1/QQNvtYOB8rnW0Plg8Rc\n3AY6edO1n4O1G505cUJGj068lPsNMEc+O6YuImRL/gAdMoxZXzwELzD/DzcK\nlAVsktZVHPE1++EwLyoJLBLXLJJcXzJceCnfj8FW9+bHT1eM4wgJrJ0dcEji\nPlGS\r\n=fWEm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b4db89aa26b06e4a93fdee1e0978c6ec77b9f108","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022011175644"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022011175644_1641923842705_0.10771477965039389","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022011182024":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022011182024","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022011182024","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3510a1d79ea388cae324455e6b84fe7cef6aca84","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022011182024.tgz","fileCount":34,"integrity":"sha512-tRHczLdH3Ym+tqQVakuMGJxCOG+X5z71qjey+ORJEfbUbrCmDE8FI6ywhQy28bDM6gxsw81Kvz/svJns84l4Ig==","signatures":[{"sig":"MEUCIQDX+dwBXFLSte/Pn+dZiavAru9CGmnWVDHmJjy8YBeaLAIgWtEsc8sUuVtpjO0Pb/BvleSuOwtoGGz/tbr7kzOIh64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3cqSCRA9TVsSAnZWagAAfE4QAKGXT4Ys41Hd756aHeo/\nk6XO/PHKKgpPRrRGdZ6WU7atFRLQBx0OyOiURpT2wd4IFUJDkZQpLVnYvxKj\nue4UF/FEwz+VVMJ2kb+cpbsly5PtMAv5ww2sc+RGg8cOoMXQhTtYqVZtFIqf\njtJpXvYl2pfpL+B0asX79hkXGlVBXcT7z9O8LyK1YxJQh8cb8LrsonsXtIRh\nZmZwYXrjBT4jeBfs51uOF+YZfiAvPEVVSTpzWrS5eTPHLSBbFCWe6DZC7KLW\nQtyW+hnjfuFnNr3QcYuVtb9b3Jp1+bZyYatpx2klH/VW/jdDj0yxWishrQSS\nnMiQp055NawlcELwGdZ0QP2uE2rvUTGdzB4Dy1Jo1fF1kKmjKUZvg+kgl4Ev\nY53uaD3wcpaWyeG8btXyQ10/BJMFJttWQ0pQ2aSLc9Oef0VkxKpWXK9oi9q5\nBZyymKcWvoGhpO8UvL36cw5zKtxXIRLL+brm04w5SBsUIY0uMER60wfFjOMX\nCl8P5sCuXk220yJdtcqZQLAyPi9RdwjWl324rQ1ei0mHwLHx6AolRKZTerHL\ns0imrwtpKeQYdD6FyHXqbSLalMSujj3Kiuxl2CPhRsQOXxIh+RFisBIWFUzI\nnBPSOplegzQf5EvSVXgdKraD91vParPHCCwpz7f9Yxv2NVAt20oQU4npk/F8\nUPAT\r\n=V6w6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b4db89aa26b06e4a93fdee1e0978c6ec77b9f108","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022011182024"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022011182024_1641925266272_0.5257219824202242","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013185957":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022013185957","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022013185957","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"47fe62f1cb57b1b5d13904e9a2f0cdda7025578a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022013185957.tgz","fileCount":34,"integrity":"sha512-kmRN6XhP97oaetYOPQK/i2+5TZtiO3KwPILWcaR5vbUhwx4wzhFc0pK0A5KjGnKDUQfAhg4V4FR+Bg8AVau3ew==","signatures":[{"sig":"MEUCIDT8hHBwuaL683Z+YvKdhqrxQv9sASi8tHJ0x2zslGPhAiEA9z9bRn8xeg/Kc8Uk9I2XSTeIdMByzA9KvCP9X8vRQhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HbVCRA9TVsSAnZWagAARuEP/iVyILtV1DsMoSajEHaZ\nVOU3GwUWU+3xAc68v2QPuQL6dHgS901rEgzPDRKLNLuhioDa8McRx8++rXJe\nJV+izkyhZycJjBDkahJFoo3HB1HPsreoCztBk0kGXFVc5baEiLHEqpd8ppHI\nZSaMojOP3PVVqWNtesLUbH6+XMhVa9XypFpJpjw0NHxAKt9pQQWD5gE3W1sA\nNIcfKFM8/Hwax4oO0z3ElNynnyDJ67njwZK2lfiDUncj5VYSx5EDJDKcZYFz\nZOU+kH9dpBUOBZYOUovFmYgRW725xyRpUlYf8dieT7NMhCnroggBqdH2vsad\nemPGG1+Aa69aW8KRWyEFldoYbEwpU9uqj4ekk6ryz2+XuN9d9MYq5ReKAzXx\nSgQ1LL5Q08l//dwkz2Yy7lcryWbseevpuoIvU48H8HXNIzozfqAwQQkaZeJ4\neFL4RmeyXI0gV9/aP+yKDMFPcyidIcyEI27jerIOF6yO7qn3IDmK2mARJM+f\nUmx6UpAt2STcUeE6hmQuiAAV8vDxIGJH5uxW4bQHXBskHBcaMSugD5fVqJwW\nXZGL2VR5fSaxdsOQn2TorxSBCdBWpQBLUcmO+IWlOyA8JaM8Eu/ob8DFpz7Z\nSzGf5OXPr8WknlpA5LLsPq7fD7sKwkoXgbwW145ioiTkcNMu2+7bIPTN8YUB\nPSv/\r\n=vtrY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b667692b8ea9ff144ff54b789a86077f1ee1672b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-2022013185957"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022013185957_1642100437156_0.8316507611114805","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201319022":{"name":"@chakra-ui/system","version":"0.0.0-pr-202201319022","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202201319022","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a872490010ba47bc93dc190f10ee15ab8e23ab1f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202201319022.tgz","fileCount":34,"integrity":"sha512-BhIplBJD33nToToFDfgkjqYblVDvTDsljw7YOgHaaU/aPag1HfXgL1waRJLZDFNsKR7VX1cwT2Z+Jr+BqBUlzA==","signatures":[{"sig":"MEUCIB8kK7p7roP9oLKJLZOuxKTlL36kQFs0R/CVsglR1JScAiEAj7zzbM06Voq2e8YM109Ezk14qCCIZuMVBLEtUSVLUE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HbuCRA9TVsSAnZWagAAarwP/3zHYfURtnfevlnCev66\nxJvXbsDqs+1ys1Bij7WarJmnuOZFgA5f8i/ketXTV0LE61FxlgW5UrSTHyMn\nag26MDN22y3C+US8YzyEYSjN9QWm/bBXhfisLnuQa5eDMQn7owGTNBR7TFHJ\ndMZcpm71hlNmyAbxW7eH5fTShdPkOUMkN3Gm1xrXF5a6CsP4o/pQiELxIVi5\njzD/UXnBm5NZsOiIUBa5rmz1c66ntjhBp4VotUa+htaaJuaYlbUHeA2XO7Wp\nkFFVd/mPZwgSCfVIArEZGgqUzEBoSb+FqP8r2acRBLFW1HHeH4zHeSwRWfx3\nUJ5fe+jg7YDzfvxrKwsbbaTHfs9TGi4g2oUVrYwuXDDD9PLQqBamwMv46wr3\nfSMAF1EWQuM73+vU6at4Ijd2avLetM63yh+SLkcl3yhE6ec+FCYAkfovrGyR\nDDLM7GIk2IvowRkn7duJEr1lANcG1jXjgRqYKv3wWgHC6OlAE1aKhwe2CdpY\ndJgM+mdwqku/URqpmcQ9WpmbwPFDW+V7xcXimNXo9o17NHCaDcHDfejTuST2\njOU2pwLcfmojRZ6JN7YdELAjVcD7d40Si6FLAX9ieNFAip2bcpBuPwAuriZP\nyqFeisICM6QPbEzoch3CbIJb1O83CC/PsBN76ljijQ0C4KTvONkaiigmq96C\n/ajT\r\n=jaBn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b667692b8ea9ff144ff54b789a86077f1ee1672b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202201319022"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202201319022_1642100461856_0.7735281134746568","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201319130":{"name":"@chakra-ui/system","version":"0.0.0-dev-202201319130","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202201319130","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4d103d2942e4dd2de7106e1add0f0456b21ccb0e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202201319130.tgz","fileCount":34,"integrity":"sha512-tiak8y19b3kje8ciKuPC7RExpqzNS+Xc3zVEm4shPn9bDDy4gps7woKGZlvDdEhGwDqTnwhHsB0c9mCVDndOUA==","signatures":[{"sig":"MEQCIBA39VU0lajZRa2wDIOTawTNkH8DnVjJWyNMki9M+IOSAiBpoQ4F10VcX3zyWyuLoMD5EaRkSiXJblkjn/bVgJ0M8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HcvCRA9TVsSAnZWagAABVwP/3rRK+2rzCDM2LZNtlod\njLR3ep2RG8miAB9WHT6JSzNSfp5oR9HF9vsZqsI4mqcM0X77Ns6EVagP1J17\nUATmqGPxNwF1DuRHeLjwU0YYRl+vISRQOvY+MGokMhOfFhO2EaCzeuDaeI/Q\nAP5D6K+WfPW/gMy6J1EAWkwnxNMkVb3ia0jIGHxHH2Zkw3MeVG9GK5/gewGl\nluzgRlqm8mrc8Lb11oAE0R55HAlG58uc7qJcIcLxK8en7k/PF+V/U8SUkq2r\nPm6lWJZUKAdy39B9EWqBkVn/FTfVzkCCHsUy7Fynfslw6Lhb7QFj2C3GRMRA\n4kRZ97tnQXaiP4FH0FqTXcaJU2hnDF5uAJnuN7IVb+5N/PjvIqTVqdcSlGxT\nALakU/BmYLEUgxOS5pRSp3U8Js4LCuBp2OHSqOO/2uHSuH0Z8GfM1fksotJo\ndRv24ipRYzSKl46AtJfVqrMHMBgwhHEtF3R/xf2SH1JeGlyZTrunsh3AiJi8\nA5Zj3h8B2+oZVumIgmEqJbOn6ZTk2CP3vQqAUq86kSaX/bdxrkhDR9GMQGL3\nmeQirLPAyboguz1jdCGx4AHo5U4Gc2zbo+yDw0iyj0sopd3nrbRmyu0HL2x/\nqOwBe64s4EidAv0eoqmEDbhjD/GrUDUqKTYLegg5t1wJEeFdJ2QJq23B0yIL\n2gMP\r\n=hx4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"893c696cb259ec46a92fe0feebe12ec3e3e5a67f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202201319130"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202201319130_1642100527386_0.05575439922484393","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201319211":{"name":"@chakra-ui/system","version":"0.0.0-pr-202201319211","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202201319211","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"51ddd7eed9f771c041faa3d4ccff059d3847ace6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202201319211.tgz","fileCount":34,"integrity":"sha512-LrtbB5q9uB8BN0byIGhTJ3m+lhXFU3Su10+stX2T9fDvQJRexxZD1MMRLWmOiBZPofi+GGuNa2nWJ5z2Rb5MOQ==","signatures":[{"sig":"MEUCIHT7B0GofOvQ4IMknAf/yPEpb87Dply/FLuW3lXUvTVgAiEA62UKZiedxXWykNTQV0gbUPFRI7oqLfKOETJD5thjdkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HdnCRA9TVsSAnZWagAAAfgQAKGE+YwleBh5ETV0VRt2\nlkz36PVvk4mTxMUV+ZkRam3vRcQ5hVTeJJELPT/2rVfFpFGrb78ARGPQKgaG\nzRNfKXZ5gcTOAjN2/OMley29qUW1t7Ye3xBjN2dO60HKo7C0pXlrOGj0HqFk\n36j113bVhQ+eUMDT6Yhwn5QJjcPmitAqJVZsuFr/5DMpf1I/iihDeUqYvzDN\nBn8WLZf/UdpNCGAuI1wJOn9ywKT+RswfqAcw9f7ERLVOWtx7Mm5OHLTQn7T6\nRvSLkyamjVZzdh9LL2/PCr6FWss0F2J+QClWZ98OM3/x426RE7rgmY2hsrLs\nR2DuCEFHkuJ7Dv2xtp2H5FWbb1KUUKhypJCWTE/n7IhBrZrpcyHFZEoKcSdJ\nD23c4HD/EIEm8+pFzuz3ik1SgI4lLeaB8ycRQwR2EBP0+c+JGFSKKETgcT+/\njDMsrwf8ujHcsAjvbxqNanpTAptKab7q1DGgtWrwpUK5id1+qbhhn41YyoOz\nSzDPJvSWs92ts5OeiXckiETdH3H5u88fs+2RO3aKyriQeh95TVOXRvXvot/U\nGu58aJsd4vbTaVbuZ/zz97TiOAC5bN18CBfk9PCV+iRHtPBfSYmggiEcEHuf\nWxASpkbwo9kwFjR/YUOUC3emza1CRGm7k3alrETH06vXvIXyRLIeAV0SK4jP\n0znw\r\n=ZOa5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"893c696cb259ec46a92fe0feebe12ec3e3e5a67f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202201319211"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202201319211_1642100583430_0.7892622470263952","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191557":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022013191557","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022013191557","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c83337ab9121190f28829d9cf90c9cd06d4987d5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022013191557.tgz","fileCount":34,"integrity":"sha512-gUh0r8FXyQx0//1It0EOBqX/ENrxKLreoFflDA8xzRk6V8D+SM/yp6zR6VKBITNVO0ofqTiugdY7+EpqcAM+rA==","signatures":[{"sig":"MEQCICxLFbir3+tbdWo84eqbVLRbBS302zzlpwR1jaFs0opOAiAomiq+Q5C+2ev2zsymLgA+wjb7kxSW7jAQw/phcfGmxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HqQCRA9TVsSAnZWagAAbP4P/i0KTmrkGrG3r5l7zWEu\nBdZtfBGJg8uL1DlpoPbU1UseII3PD1AI8npjZrBneiisdPhr03QCwzHVNPCU\nJxeLtjQLArmQpe/ZbI5+j3t3L/CgLXKUnfwGYouRqvGBk+Iqq4fE0ovrmr01\nM1qSZJ8QM+0O6BoaLkbuHlFfeFjULD18D6f8oKZ2KRuof7tpSSmaB55/irYV\n8G/7VNSp6o/HpHqz5QfsWf0k9VZeEyjoj2dQ1xyJbKJAq0q6vTJUcg+yX52h\nlR3xLTCtbvyZn6SFwhBxfDQc9Bknjb+U8td+wH8G7Fa0dzF/W2sSKQDp0cse\nOujJ5SCxLMIgXyLB3m2LKQ22RKJRyBAU40vRFf+yqx1yr3FB7Vm//5rRpHT+\njNk9G5D0emLtvxlsCT9oiuffSiBFsyPsx0Y7QQdLvPS+nVG1I+Qn82hZoM+z\nR48IVdDos3zUPLECaJh2KSbx4D29bn20oDuZY7YJLAR4okJCshiQzraS9SJn\naX34HvVpt3M7uOmQgYV1N3P8Wgk39u55ZIqgggrKr394URIGXHjCZEDnrcG3\ndCvAho4rhVOnv0hL9UYM8gQXKR7hxYXoD6aZ4ybuwgndJ61nZ1UGDD9rM6WF\n2b3yEaFLUqV1sWhRsDPzivgOzlieXTeSu3vLLQ+PvSHchmQRLOIXBmAqSTGJ\nbkrq\r\n=YpJR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a6219c93bfc679948c240931a962dbbf1275d0e2","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022013191557"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022013191557_1642101392703_0.34524783619440513","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191627":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022013191627","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022013191627","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"996c5a106ae7c82edb707fc76f32abe00cf91844","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022013191627.tgz","fileCount":34,"integrity":"sha512-eqZarP54osrqtDgP8E/ZH2owvedYXoYJ1FF/xBXzcOlbujatLns12ZweLQEFZUfEyuLHzgDRyLnfs24ilp0qYQ==","signatures":[{"sig":"MEYCIQD1f5E6GK/8DC48zs9EoBdYDnrRGAOm64MaU9GhIKQN1QIhAPXZ5xCUliS86nOAuN4bzy64U2IHSCs4M381A7P15a9o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HqxCRA9TVsSAnZWagAAQJ8P/iKoc2BWz/nwNhjtyOF6\nN1C5zdvF4w6eeSTKISiRxbqAKl3Zv+d62kDawfTSHSsErFxvxMYX/2MIJ8Hh\n3GzMmCSwhZvYuCnW20mufQyUY/vNN3+OdGNW6PL1HyEc6z/Goi/sGo1wmgjl\nUU359UiCmGHdgyr9k39qKBSQpkQmhoQ6BM8v7hwPZiuJLReBzc7rVab13NHD\nXEEGV+HUoHcdxuF0uebOqgSpPfACgpxEJ4cIzQfLOamGhUAKEuwayvo3GLPY\nmapq9lJ0wDJ/ZFm3gloUmiw7LM6b01T+J4P/gFzss+jD5GpqVszvm+OKnOPz\nFWazqnG8kKW0PBkaASJcpMcqlTYnlYwxSzyhXxK1o0UJqvcK8fQ+YTKeLFP2\n0i3jD4f5Pc4z/QdZGqq60vGqdq+Lmkt21MzlL5aPOr5fAcyHWJvmQkIYEyNE\ny4HliVFF5+oAITh4GHDv0idbB066N49TvLSOIGh8Zn1lmPFXk3eoDBoNwOvW\nbVgq8O6ZMPRrlCWiFRwQZeed+voXQtZFLnD4b0zVe4Ugj967+yTMsZzJFihw\nq2w0XBu46FwemZAf/lmB9Had5DXgMLyc/+axVAdcBzKvzyAZZ51ey33PgT/2\nD85qACjEXWKoZtisZl5ZeLVEr8dPrN0u9/Uurgj6gAN+EiJFwpo7R6ydDw8G\nlxcW\r\n=PjJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"35cd42c5e934d20b58adfe0a2e856716b73892c6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022013191627"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022013191627_1642101425335_0.38051444393713196","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191632":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022013191632","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022013191632","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e1484e7ec92d0d646abfb5f1720dfe1b252b88de","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022013191632.tgz","fileCount":34,"integrity":"sha512-v1w2avtvUdNjutGu1TgC6Bv3+L2HjSdjIIBv5/JpEsUqixZUmkAD5MS1wY0us/5ciYQN7RLNyBYPkv+CJVvl6A==","signatures":[{"sig":"MEUCIQCmHa0E1xwKjXbaCD1y3N1Lb87q9KgUI/KZMxZUtCOnVgIgFy4CnGealWaBVwltSzFqQB7bqB5q2Kog7P5jLyW+MAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4Hq9CRA9TVsSAnZWagAAqO8P/An+WvTsdj1rFF7PrtVF\n2V8LoBgjOkTGNeUB45q59T+gfwixhoNpbpap8uDRDBT1liDPD2a0cymcnDur\nLJPujL9hIHSRAdp9wdRk1bWYL/g3k465/f8oCXfclrXch+Y1q5+x0V8kgGqh\nhAj94kI9S6xQBwIGjbzm9ItZkPcXuU4XCECLFuZfL2FticNuWFMoCb7mNUtu\nqmC61tIGG3eAtOsgJb3ltSaEmjSS6A9As7AEE0jq2XK3GV2ggUWz0j+hCQUD\nDYdHw9RdjKWZPRMrNiG+Ku1iLZgoAnZKrxX+v8BYXZs1K/JNjBjnXDYooJOt\nH/s89NNyLKauFyWvMwbDQDS3nRwmPi/SdBUTxwAekfzSdXQBVXfEmFGPPxKS\nBtwYeCpzaoyUTk2bfY+VW1zdVw+9My5uf+ANsfktMRWK6JEXtgukBhlRBTp5\nY1dvLPM1HRAzwiEJUGfACTeAFJS0kH8wh3n8ME6B2w1efr2HqWzZrnYht6eI\nheSgAJp5zzeoy9APNgwgPEysHAsRetxXTQUPFdDcSBKkAIARQFeePmmvwUYt\nH3XzwuN23nEdfTo5q0wOeldUoIu0EOlvbKItcYOABiErN70BfqkNzTQ7hprj\n5BskxqeMYozdl0Y0pDZb50jyTYRA+rRxLK2fH1/YvlvHXkAwI+ouRwFvVbLf\nu7m/\r\n=jhby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d9ade3b2b8c64e5194f2678429235ebf023608f7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022013191632"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022013191632_1642101437005_0.3178816710902115","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013191659":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022013191659","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022013191659","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"65a2229b11ff586f4d2fd96eb54d95dc0787b48b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022013191659.tgz","fileCount":34,"integrity":"sha512-RHw2ydyehviyPTUV6A14R6rGTVN6K6LJQg76sDav/3Ip71c3HbEeiMjLADhPhfG9PYIVyP4881mw5TqOW8D8Xg==","signatures":[{"sig":"MEQCIGSoq3jxBLWD7aOMTW7nqBJjLI23COnfW/Tzb0svSqCYAiA+pxZ8KrCUbXP/FqfaO1dUkG6IPEGgR8M+yZxnL2NdbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4HrTCRA9TVsSAnZWagAAQZcP/1qtcaqDobVLj064FcXf\nkwbnKj04WISRzzBUJVAmM1tuY3WJ2eZiKXNaCr8pmYyUu4IvgY7pGQzj4Rjb\npwVsFBKE7+yVmrSsTLyZtHquo7EGJy41AkjTRf+pejXa99vquJq7SrD9VCXI\nI5OKt4mlQUq13dayBjdlbtrunGFek6XqSbMyNNK/5Lsy5CAKpf0LVA5YoZjN\n7fhlbqgayecsk8Y/JgIOkMtObljeXSrlrmkuMepa+biKPivAKTKDNVNC12Jv\nSCo635Bjj/7HQeRjEk2dyFJx/V8ydKhRQQZRoLziiJGGgsdGRLlv3jMXpSf5\nXcxPNto/a8nSyEFJ3XHGvEOTqqGCX3qys5AxnO02S3o2aUxJK4vCGcft110j\nNt7MHkQMBysTGOLvzLrr1itg78OuighMq0v1XqdM90a1fSe4eMihYIkT2K9N\nLApt4pR47LPrYWYSvDZY8ItiNB/ELn6dxFxARMwiDwgEOcqAhBTr+TqTI9OJ\nF+wY9p2b1QPtSC+8I2YvJx1on9PVtaBig4vovK4pD3t+Vi5tBdlX09Etsj95\nz9ODrRLWrD6wl+rKYI2gc3g3jZZOdWCTR0QfICxHbxvYCZG7khOidFmGn5lh\n4yDjObxMcfTbthXUBTxQcQeFncBDmhnPazq7Y422WzM8ifu1cl5o8giLKGva\nC9aO\r\n=/FEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7c48a61f8c08cbad295a35be6075bfd36a403f6b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022013191659"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022013191659_1642101459672_0.2801006894345832","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022013192043":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022013192043","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022013192043","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"621eb727533539a706d2acacbb679711951d9189","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022013192043.tgz","fileCount":34,"integrity":"sha512-UgU9ENLXqnwKfjCzPeHmlAlsOdXSLbxzuPQjN884pditnyzOW/mwWbEOvqlyRLqXd79drJorftHSbQOgEYpLLQ==","signatures":[{"sig":"MEQCIHfshkx6vVRIrkfewjTXkTVS+kSfUpkXue2q/yRMJ7tqAiBh63IblXWMHREaJ/+m8CtiP/qd44j7Nn3YerfurhUH2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4Hu8CRA9TVsSAnZWagAABfoP/AhAyhTa1FNGOgmpFivU\nwnRzxs6hOn/ORJCuGRtwrNaYfKHcayFgvh48iTlyDegv5fpXHNLYC6oG5yJk\nXibfkjpXIyckjvOhOysse34w+SXnRpHz+VnPC/qD/r3FY/wG1gBwiXyhcixA\nEzqnd6a8nMQX4qHED4puILZa7z44IuEZ0S84w+Jtxaew69VPG3PY4K54g6nC\nGaJ8ihXOGrdDQaYe0WKRfnKGoySX88bK81xwoFTmFSWVdi+wK0M5qjJQGHsW\n9KRh3wW5pMtAk9uvfIJUS+FgAdJ8bXmTL2RiLEWhsE3BaFIGRPdLX4clFAVH\nosHwXQ0WNMmtf5NfQCEYxOpKdvukDCfuBCC2NqKjtqLL+rRNjQSUe2dNP983\njS2fmbemJeXa/Qf9N8AbLVVqelmWfQK8epjFgn9W9u2eIkDJ/pqOFyIH13PX\nf1/HFK13jouARfLzMoG0sTN8saji1eYRlQBPqAzS64Z8BH3/hC3dZkOkC51A\nifm3KeLTDrog75aa+zuLRRozv/T9DDuYwZQLCfQER90TR7H4cDhTA9JU8mSg\nP8eeythZTFVTFrmAdcHMUknpr+IQHd3KvQNGLFZbJLxaVd3uGdJG3jEqDkJD\nMGNEC0SIQJCDwObbTxwkcplCIIsEVMWOpFgsc80eEA67QYLSCNgnRRtIbq5V\nc693\r\n=J3nO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"360fbe69c665cc1b33069dc660bde05a8d62c16a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-2022013192043","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022013192043","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022013192043"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022013192043_1642101692064_0.09501141060942131","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013193154":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022013193154","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022013193154","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7249ae474a8eef709d12e0987afd3bd98881b8e7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022013193154.tgz","fileCount":34,"integrity":"sha512-iR17/r61StLftqbji7MY4lNa2OEdROSU5zcjwV590QwrPIM1RCh7zowsOeeLjhU7Z/Hyj5+bbtPPaAkN6RIptg==","signatures":[{"sig":"MEQCIBNlUxRVc9jyB9J50LAwWCKosBl+6xlml4TbJ/XWB6v/AiAK//AkkZ80+qb/+0FJItlXWhhhUV2Z5U+zgsbZDRitXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4H5RCRA9TVsSAnZWagAACrEQAJAflYxNFjzZMCcE9GpK\nwp9trt5tRKUeV2chEmYiWBm0XlOWDaK75ZgewrcWM6CQeMvN2ZXFW5/MW4Wh\nyMF0yk0jHGrjQp5cEYdVowwfj8+xfDA0seUHPlMtN+x6t1YaI3oWxjmOwTsn\n2ZC+yJqHO2eOBCWTMwEBPK52C7Ivfx8UOPR8IAC4FW0TMHZpDjg9n5dnzkLJ\ngctJ2a759SlEIqy4npNUoi+mA/GKUgf4RBHjdpesgiJJX5Y8V6ytbqPBJ9Iu\nrGRMM3OmouBg/Na1RlSs7V33dSwAC4RWlTcIrG1J2YKbHE2/2NeHIasy7uwL\nKQxXESM18xQ7wCjLQyu9be446Qnr3Hle3HZ4N3e+4i9NjB5npeiSJwEtQEd/\nOVPNpoeX3UwuUIydCi2MCEiRymu5wTKDbQmMqRkOVwtok49K6LYowfoTG/aC\nF5UXBT1zOu0wcO0nTUHngyZ+QLQqjlhZNJopITV5WhxBVX0CyPkTM2/MQauk\nnvfpmaujvQpoLTghqvp0SvOPOePWSs3L0Nb5nWHVPfXW6B3IOUYbF1iyqFby\nzD/Y0hArhiUABmSSiBkRlztzfi88kpNj82IKpA9hKAKlvZYO2kDDTJXmnD4p\n+ZEh3JsS1sI0U3UxkwfADozSYGA1OXkdUitvXd+ymd+as5LvprH9W6oq9fQu\ntZ9s\r\n=9sPg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5d796ed4dab53d11da1543a78875858eb272968a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-2022013193154"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022013193154_1642102352879_0.3582050624397639","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022013193526":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022013193526","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022013193526","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9ea8afd1f20ab368962db1271738bc001023aa8f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022013193526.tgz","fileCount":34,"integrity":"sha512-Yo76vpT+Unx7Ihg3sAyYmUiMHJ2z+OmLuIxQhVer0Z5TsbQBr+bkxFSKDgnBmRFLrOSddjCv5sgzZtw+1+MjSA==","signatures":[{"sig":"MEQCIFcVNWzcQtipcN5AzMerPFdDbZu8hJn982otc6xf2INQAiBwQRgeL3ZKv7HijHpPUAwhTYitnzAuyS44zupV1RuKYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4H8rCRA9TVsSAnZWagAAwg4P/RgTWDDUYgcivNIMWQzp\nIxHOXEw6/nFVuX5zGftynY9w0M26a/QCB+lI3xbQ4VJ8+fKU0LwUXIpDC0Xw\nCQzfbOWbiKrqAX1BOsiINN4qQmCGVbbR8RomNYX5tPW9OsqUa47Tl696Ysih\nG4yKoPui2QjAF3Z3FA/kTXUc7149EVPs4AhVKzGrDyx+K5aSiRqLvZBuj4Cb\nPFYeHDsEmV94ORWPyU58hIWYopRwQKKFIS+3K72oWyJlAkLWZ7Z+a2ZQB1Nk\nh/h6v57fMbiqNWFjsinneoq+qpm7Iv4dloBKKNSn8ikW0vBsP6TOtvU3htLL\noRz7LeiuCn8qHIadCce3jVBGONGDlPirJDfxdHiSCQMqIrYy8Wn4/l0tBhKM\naDdP6wzJpUD/UK8sHVt9igcF/8MP3tGYOdAKk05EJkrq4jwc/KnWaS3Q3XCy\nQ1GhD6+QZ1XHwABQ7jaQJXb+gUOr7DbDkqJNQILE5jt06Uq0m84D/zbtcpgY\nPKm4hR4jLZw1dDw3drGfJNE7CnEcHZa4uk88gksPU6gSc1334gSOEU2gFyr5\ngSsKfI+ZrehXE3lOk9BvnpWHGx3JYnY1ae3M3jTb3x4BO3skkJFwKV/oNq5W\naRIhLyWNnKGGGm556rGjkLSXXFsRPZKbXUwIBkPFArbY+Rpll8rg7pqQ69YP\nnbbr\r\n=ab7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1cca30b9d40397762e29181020f5bbc6e06989b0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-2022013193526"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022013193526_1642102570523_0.9989904496922879","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022014102532":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022014102532","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022014102532","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"789b3d91fa01aa1ce5b7681a81258717e9e75967","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022014102532.tgz","fileCount":34,"integrity":"sha512-d1p2CIB7jKaxG6RsqDoOafOgiTAWMDYPVNbGF5waJ2LAlswVFwJObzeMUlme3do0/RmBcl9J38thfuSwXwVaFQ==","signatures":[{"sig":"MEUCICDofyeuIW5M9+XYmAcTXrRvmuESduyhZgVJdLcTaF/pAiEAjrltNjv1h6UfTxNk2Ce9C826cfY+4kC6vWN4e4CD834=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4U/FCRA9TVsSAnZWagAAOxMQAJ+Sy89Wmj4+Ei34IdZW\nkbU7ZTP1Z00pLCH2Hqpa824uZ9OzIgZ9RQeL3gnKto3MFCkaj0+fk1dGvj4r\nbbvjzzIwNZRStEhbBvFMRvw8SHMGw/0Ljpj4S6u4/2aeOTw8KkBnmcUHCnUq\noW7ScuMWqOWO4ZsxTVQg4DG4j3MbMIxFiSotA5XVGOgv5MfumgaDJtXOAsk3\neeegLpqyvOsEXsuiw5lPPQlTuvgHn8UQuN9U4JYEHjI89x/5DfQD04vRHFgd\nn/siIJoYxG+vjS5yP8VFeB31R91JjuMIZ5dolP3EKvr0mpLY1oQSbfMDkuO5\nQtNgkXXN8HEP32KcONr6dYatkEmw6LFdol3r0voklOhgovhRRs5wpBxo1UXK\nkFZvewV2wX3g1H+UXYkSBfPH8cm5ATiTZV0vINsb3vStuiPgL5W4aVS9q0e/\ncPM3MNhsJrcPOl65VQGJTsLtUK+tkysusXV7kKc32glxMd22ki2014wIu2hb\nVe7y9ItV/Op0n4z7d6AmYKxCMIGvSiDmCXsXQ/afo9q4RpIvDrjQpe9eBU7K\nRuLO0ZJfH9rjsjdtIiTAUl4dUUeUbMBRijfJWzS39K40SEZFTErD2lYUWYB5\nasjvHav3RusaL7A0UI0J6gyKq6TyUy9QbWxyvLrCJm7RNhgwKGYT/HGORpSt\nM630\r\n=xbUv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"52e1ab1af187484c3a1695d1ca32b3bfb083ba59","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022014102532"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022014102532_1642155973184_0.4565191350683009","host":"s3://npm-registry-packages"}},"0.0.0-dev-202201418849":{"name":"@chakra-ui/system","version":"0.0.0-dev-202201418849","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202201418849","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"aa04dcc0dd7cdcbd17c763d0a39cd44a0a94ac6c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202201418849.tgz","fileCount":34,"integrity":"sha512-mtGwmbdeG1c4oewd+TfulMF33yv1pSVeYrRA6hgM9LBNrO1gkhU7DgHoE4dnLPYofWBFepT7uMF0sq/T+K2C0Q==","signatures":[{"sig":"MEYCIQCv+CfTVeJpgqWdZQxpnRS4xCEVxXX7J3OzQcDecnSZDwIhAMtYFw51W7wlHqnI9g1uQ6jinxIHVHHqBAvoYM2IK4fa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4bxdCRA9TVsSAnZWagAAehEP/RlPa2icSKMmwsmaq3UN\nnMmKLuCG1dlVcku06GwesqLLh/X68en6DMOv0q+gVKwLr+1ZKm+j4t6pTp5S\ncAKL93N6lzRRyzOogKStM+TV1a9Hjbid+uqw3jQ8oXrzVIuVVJcuHgLCoTD0\n8CzT5fkXpOc4dIYwz5ba+Q8Qo9jVPWM3NKCHyvTJgJlw0c3P7Kpdz+JYcaDA\nrfaLesEZLdNG5FdmN4uHbNlDRr1QVwLBN+tu4fbXyjA2blfY/ykjUEJ9lN64\nlJezgvcgIXKBZWr1nOvYFbVpbItziymEaSwdCvZQt1/jdud75x6uLNXdtv6g\nRSy1+2cec0Q7uwZ7DNEq7A9oFDBQ4VGU2AAQoZJiMX8tDKfmLaA54s3825vq\nCzrDuXrk7f4E4otSZ1QE/0Q3c8J/25dhErSXMPZUer2wrNJBA09UwXGzk61N\nmAhxaxAKSlxO2LByHNlAZGHaJKebLrILl30dPMTYjpnIvmTDz6L/kJsLh36z\nzUpDPYL6HoJGGrmQFTEmaYNUH291s8IOvqWSCmNc19u5/mRE508lYk8snD7j\nvfPIH6gYT/KsWmcBNCWnNhCf3Al1Y7pGOWqp+txiWTo9AHGOy7qZJJwSC3e6\nX+lz3lmFGXGNg95ZD8XEQkgqFr81/3BgJng0vyZ/ddZoJXMatazc6R8P1FL1\nkQba\r\n=GwzF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"c9c54aee1e45c2ca96f7c032400ffeb06c57e341","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202201418849"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202201418849_1642183772876_0.2624239195145106","host":"s3://npm-registry-packages"}},"0.0.0-pr-202201418280":{"name":"@chakra-ui/system","version":"0.0.0-pr-202201418280","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202201418280","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"de554f534e6c55f362e51665905e2de3b644cd19","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202201418280.tgz","fileCount":34,"integrity":"sha512-B2lT6XtYjAmioZ6Gd5gHsPENVC0kpsvrVvrfZSI9BTeRKRe33qoOLWLRnEZyGEwzbkXCLMKekAnevRIIDUNAWg==","signatures":[{"sig":"MEUCIQCZePTgG5iLB5J+qlMrhCINEOh4sjHEeW4HUIwyY1BEHwIgKHXPqlrXLVWnGtJnijvtedXmMQyHtbO/0Xn8XBUchyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cDhCRA9TVsSAnZWagAAngUP/RhlyLeeLh4uuqfxjNCd\n1UAd6A7jJ+haUkKT2uOhrzKercaRglRHhEKDzX8o1KMY65kGfVNrWdBC8mBX\nyezAew7RrPeRJk24BZoGNdx9Jh9/XItT6lcuegGf1dXF6y3gLYeigwce88vQ\nhaZAp2c94DI5pnr2GONvpQbv7zjW9f9ZVkqSFzf5nG5AQrTiijTTlztcCxiS\n5D7iSN8k8POaknMP5vkL/ccLjLeQ/sRZz9ncuCFzQn5hrwf//uYICQuzHlie\nu4IKOQkWhd95PbTBYihgPaBrhvuzYQd2Mpejlj7hN2QvdJixK9u5s3ijAwjS\nhYOsJKZ1e3kJqk64up3FOaRLOtkZvGG+g+nuU5L99uOYWXLbndRbb/cobP4J\njxQEOdC376pqCWKEBQ1J3eY3mLAjNzQoq+HW5o19b3Zl7l3kBZgTPV+Xv30M\n0JSRseSEzXPjImWu7YkWmCd8qEwsBzKcVhumiH52APIS+b0iDgCAQjbmaBQn\nFxdKTPkdhrA0yz5g5lqvFT5kWrsEccZOziBK8ndsCN3OcdHntnt8spcDsqOa\nX4KMyVNDewve8HdP6fWqcyse0WFv81YrbmFUEZCMbG3o3uLkxmAc4AEPUsfO\n7/9noljjN3mkKswkpdDflzuVG3wtODFX1ukeL1VzWoXveQVew90eDzsiR0Sq\nhuqy\r\n=441H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"ac818e4f791e510a42decb8bf76f75343f2d3329","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202201418280","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202201418280","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202201418280"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202201418280_1642184929531_0.36491934532072223","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022014183133":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022014183133","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022014183133","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e68a3032ff0a77a9be83d75c4a703dcb5731b6da","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022014183133.tgz","fileCount":34,"integrity":"sha512-YVQgl/1gc/UGnEyPt/GMufqqgCQOVEHTuBNtWLfzWhYLkISA9bK6ZLfq/1OeBzXHo3OzmJORBzfntUG7JvvAmw==","signatures":[{"sig":"MEQCIGeZPVRbYOROjSUv85vtf0Cf+ZPVj+aUjtDbpx3UKs9kAiBaCpYSCfAge1NahHMj9uVL1wpWnblMJLzIwHz6G+Lg0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cG6CRA9TVsSAnZWagAAcHUQAJ5AG88QcEmh/XDf9PhF\nqBmxjtDV7auRGiGvplXsReWweZ5wpBMWflwrGFCIdb9GQrZMV7QY5UV19MOH\nG1w5hSmUFsGAtuV+A86B4MM5yWkQr7w4O7WxOp7L8zjOJynKPkimvm/GQLKq\na8WjHTc+/NFVB6abX4CaVOCSlBr3Cch5R3t5dyNEjfrSc4gMRqFLv9DFeU40\nXPWyPV7fjM7RJcSBQckXN3d4EGEXMeR9BPe+Uoz92ahs5zDJQq/w7dJFvLNs\ngdb44BxMYBMZ1aPP3fg2sDGn7RalrY/BuMKOHioEYXlFj/148qaWSMz7tjTv\nuZ0PKiPPSSlu7sMBEJ/1MSzNHDYPhaOvdHzfc9ls+8CT5PJKMmvsCoZDglWd\nSUwEbU6mX/dYn/ygarp/OT5/tOz6ZD4Pz1OggsMRG5GuC56FDc5MdWwUZMj8\nAvZo53vFaZGVPiP0eSO7kf3qDegI/WoJC6cXA7Umzh8p1uWEOspgM0BoAokv\n3AxcHua3nFujb9PWOk9OfJqM9BhXa5Zv8ngR+1xpvQdeKKTwyWVCMsczVKYH\nWDXs+ph1yYw6zUKqPnKJX+MEmIPNzUby/GrVgyrmiNm0bw17waR/OjHl4FGS\nJcqq/OYg4ON/kRVjk2JxSZN2+LhLHVzUQoLWNgwtw+R7PAe0aoZBb/3WVOBu\nFtQI\r\n=asrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"ac818e4f791e510a42decb8bf76f75343f2d3329","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-2022014183133","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022014183133","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022014183133"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022014183133_1642185146027_0.7242938789149098","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022017182645":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022017182645","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022017182645","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"af30d7bfe3067721d329732740aefc845a655a5f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022017182645.tgz","fileCount":34,"integrity":"sha512-tOBpC1VGTOrLXYb6IxVnvdms8VEbJ4/YkCpL5rrDau1K8zu3LcxkmSWlAQFv9hyTwqquvJVZk8ZJP4Y2rzZByw==","signatures":[{"sig":"MEQCIGysXqUVQHrcZkUp7Sz0zY5VH41yN3XYtkywbuUQMrVnAiBW1oFa7NMVllnWkDNyES3J87AKLPH67FN0AwAUtYaW7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5bULCRA9TVsSAnZWagAAC5sP/1RisdA77DuxKdLrduDO\njAFrqsETUkasQ2AhN2VeeAPI15ejjFj+c3wZ4biOHZdYKclRVPYDIGrNpvmB\n16chtmNvu27jV9rOh5LKRG14oAkp7tlWoZUDwj85NGvSRzEu+OlI0ZfElCDR\ngrWKupB/PZ7jIKKMKmpos5Q2ZG70J6ZQ0tpyvI2ip3TVc4K4JJjMZXIn33qe\nx8FmEe/i5GDL9HEE+7a/vMZkeAGNQL47OLDil6U6Uh5/FrOHd04XzOqGsy9W\nbDVCE7vjx/6BTvMjIJj6NOu8831L7RUvxV48GGtDJJW7iyu6J2NZQ2mqDqJE\noHJ4BkUoCr6dVj+Vk3CbprWSddXHjgHJy7ggkVRW3+gwNVkdSxXFgwVkn1gv\n/y8F1CFYDR4jhHMR57zcfuIjNL2FNmYhOws03T9LI2Mg33UnNJatKG3MlX1K\nX2XddOTm2wXaGlokTwgMGHJHcxcFCBlzyT+j6apva/kZnbsXWCxzioc5fDAa\nprnkT14WI5mr4XeCQm1fWL7rzTFXBzyjZqzhp3W4AGehu4BoaLwaShEqEQaA\n3LQWRCuZgPUkg/9BoZFZri4ksdmNfN4f1SSLZxeo/qpS17BSc5F88jjZ4jEh\ndiGvszQvuu0YbywgP5JtGM5NLM2ZG58ORTDiF9xPkmG+PXqo8DUyvbp+gnRS\nOdmq\r\n=tAul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8956926a2426c08d4176513be5054c66f955a3aa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022017182645"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022017182645_1642444043175_0.09343107312483001","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022017182859":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022017182859","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022017182859","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b04c8110e3c2aec6b0406cfe68f54d6006b68225","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022017182859.tgz","fileCount":34,"integrity":"sha512-pOUrdoNm/xHvVrbeUWSD43aKIbQFLvJgRltq+BO1AZQkNNHZRuC0zb4vc2QxurHmpqotxnfgHNAboq6ya0JBsw==","signatures":[{"sig":"MEQCIFixbS54x5raVNnlz1X5f+OLqZcuds8voNWBdmF3YosFAiAyRSkZJ4d8t4ldjvFEM5DSVfqr+A6ViPCFNHSDRlQpug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5bWYCRA9TVsSAnZWagAAbqMP/jlOegznoGcf2CXchPDw\n+uIwGNH8SKiv+u3UdEw+fLB9N5ZrcwRdAWs2NF2SgfSkPytaKds0/EF4Br/m\nuIrNL1hKy3VUJb4za4188mTY0HCrguF9hSEosjYqnvqVz5fyUw6krFupRH4S\nNPdeDARh/plu532KAZgn2YWjy+xMyeszYUoW+eYkcJsoy2xT7of7KCc2cOju\nEX4LwhCrQnYgLuS5HWfcBD7K1DYzm7iaKm/P3efL45wQ0fLeQEqz8/2ilNBS\nAQM8q/dLUDr1rjKB77wOmH5vjK7PXLNzHe8l7xsPzyb2oFhtgM/X4C/isHZL\nTa5nMUQPWiKnlPPIBaz7dAQq7s7N+GRkQ+uSxEwZQJJ5ZKP/pLdrn4iqpv/j\njXfqrD38MOa+CEKWuv6g/0GUhdJSwrh72lHz60ru7Q5qC879dyoboNwRH1K9\nplcpFgYLWsySCDYY3qvbJGFUxaAhjBBV3z3u/Xr0QDD9Mu8VlFhOL7YfKyp9\nBy+jnvpfEFskl8w0x4sg2Amfma7gKK7lAi5YVl4Tz2iKY86TxE8oKMzwzJqW\nidzH1Ir7uX/ZFokWUqWVon9fdyTZ5D4CoQ2c/smyN7atOj2kXgDmqKl2I1Nk\n7KU9oGgCTwAL4amGPnv2ZCsst+3IDbDPhSx2HdByFwOWpvy8p0hLHb1JPtIz\nrwOT\r\n=J+G0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d88782d8af4d8d6bbb988cac1fe65aa2c58e2a88","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.9.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.3.3","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-2022017182859"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022017182859_1642444184274_0.49028137735008426","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220209527":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220209527","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220209527","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f734355b32b74a0a073726035c9bd57a88da9f02","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220209527.tgz","fileCount":34,"integrity":"sha512-Eu1rA/ujBcAdWMETqp0RKvCN3w9QP4tNoNAvKJ4970twNWWW/1W+0obyL0s2552VzLeNZ5xudvsDxcQkh+3iYQ==","signatures":[{"sig":"MEUCIQDvK5lnh1Ls14IK+jrUNYWzruV57rxmy1A2Yw6Eo2FUdAIgI9qMpzDsqhZnES21VMS8l6WMSQE3boe3e4ym6I/OkUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SYCCRA9TVsSAnZWagAALqcP/1yQLwYQkvcKhV/YbHw/\naxPpZi56+fJyg1MupbdtnsZi8mDm9/tCxhxs/pW0yTT/HMP0IbRuYlHAJN0i\nMP2zt4O5Huqgr4nyqOeq9KHciwYuLhQ1ek128NyxOineI4vDg9Ba5rDNHuwS\n1NJ5CXuRlBamwxcpdnU1Gtfs3Dn747a8fael44DvAE72VFDTXmaigR9VVsag\n2ATpvjt/xdgGQpwtpIQwBhXMz0GAOK7jCdDjqpNxgd5sBzDOPLDIDocmDooY\nrIdIQjzrKtMpL9i0wfwiB5W6RNIh2BXbk3sldt3Ll7YVPk7LE4zbk4saoxj4\nea5Wi+ZMpRP1/IL0/noYvfAzXRWG+msKMV1VOnejXR5CJHgW1MS6Pnr+Vbzr\n8sxvgwDlMegczDh8sUWQxDPxOS+0Vw/pDYTk2PKgd9n7bBraiLFyV/Y/py8G\nso16k8aTtCXFWVPJIPtmrtp1xGs4UOSZB9d1V3oti9cPewENfd9MN6OSR4jT\nAc7V73NsUvQMv9/xGkqo5nlybAq8lZ7TnSDJNLRxfw+dJzVoXH/ZXJDdWoql\nwEtbFMY37KuLsj1x4KMZtQaMmPnN6PaPMNWT/h4jddqxG46zHAlMfVB14Vpt\n2IWPGrmwRsYgerpP+caRVywqDva0X5+59/JNcX15YnJvzbwala1ehwYTRjMU\n3pZ2\r\n=wBYs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5fcdcd7a00feaf606214a1eebdd43a9dbdf27e59","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220209527","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220209527","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20220209527"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220209527_1642669570507_0.7098763504350918","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022020961":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022020961","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022020961","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"095f9068997c9ab1c5536b89a37f93da95f564fa","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022020961.tgz","fileCount":34,"integrity":"sha512-1RPw+dJ40mlEf9g8uonX64+YylmIAXWjPHo/4reKoZsctEq6GoMBOM2/OYqYhD1VJRHZ7RBEtxizqLBvyhr+aQ==","signatures":[{"sig":"MEUCIFVSaATXjLyX/zrIYDMlHXUI5104F7eGRvSlZN1JHaY7AiEA/GLCjq//5bYqsD6/vlXyH5d76uf6ejZQvyup5GN3q5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SYyCRA9TVsSAnZWagAAReQP/iGx/hgE7byWOrvdH0xk\nEjRU5jBxTKQy+Jlotf3pXxxWIw6ZR1kfIfW1kSPWhwZh9fCg6eSgpZL5KltB\n4Akw7fFk2h4EgXMMiMntBOO4WKOxDR99QXaCQ9RNMLDzz4cyhWX4GcRTcRb5\nosBOZHKkdtu3GAEE3KJRpIU/2GnSUJfEP67OZyEjkPz9zF04/MvxxqtyvJHK\nkhRsyPnbHXoOMuIyH7vFRW2RP5gaWRzWEbzBa3CmPR0+MuEbQK4R6lkHW9hz\nq595evuw38Vk9LxfW12ViFwi7yohU3GP4LgoUA4SgTvC41kd6NXIFwiLnfO+\nifEgtkZs4IJbFFaTZULL9+e/uz54RItcnbZ78udKPQEo3jbSRr66JTEqAlv1\nSRa2W5dA/zbhPnk/5OwqX9pg+ss0Z+jZIylNBBm8uSSoRMzPexwOM+vIC1En\n0bJzmf/WVVZJp0Cl/HlUUSUqsUkiaz4x3dj0AvCfbVAa+GCB7Y3p7nSSHdNJ\n9PeyXoXUhNjsU31WLA2NLjI06f2O1BItLvmupz/dUNxmufVxEBSXwP5/bga2\na+tcS1Z1U6L8F3mEDo6A3XvOjculViOoJ3NB6ZcBFbESvyMUmNmE20CdrYHJ\nRU+nE7dhw/XCvGNPJSoR3d7KW/YpDyiNYcrkWl6jTBanzwPSfzAUn6y70f/Z\n6h11\r\n=kXSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5fcdcd7a00feaf606214a1eebdd43a9dbdf27e59","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-2022020961","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022020961","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022020961"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022020961_1642669617955_0.9468148077248697","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220209192":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220209192","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220209192","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cc3d46e160c59eee405683b7b42e5143d9fc6e16","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220209192.tgz","fileCount":34,"integrity":"sha512-PPSHzgZD+fBH/5D3E6px/EzvJxeODeq1XjrNIX7c4/b5AR0ze2RVGohp9mSPhbl+HjBVOgclgz8/egetQOYy7g==","signatures":[{"sig":"MEYCIQD4SrCNyYwuvMVTVDqJhwgg1DDcwpZq1JsdWkjMYde0IgIhAOMYfXwViQiukw2o/XSbsSxONyAptzIJmxbGY+yPKzJh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6Sk7CRA9TVsSAnZWagAAa7QP/js5g8gR/hi4vAbipPkX\nzyW7szJPmfFNyr0CCWBkvDHwoE8FpYeIFZfXhHK3Il1SwQgWCRXyscRenLSv\nkKs/0TuPk412d0juiKpn/vd+8CIsvitL1l1LFT0XRMVGMy4a41wDiuqJVraO\n/lmBk6fI2bZfdUjoIbUJZ6hBGW06wrkIvgT7QiwC13QIEdU/lJsocWhw0X5P\nyokGWv97C3MRmXIAcFdLlBq089gjv7CoU+/RcbauHgAwXBwZxrfQkCcvItKb\nbk3xiUb4nu0I+C1uKchqFaVt9lMggLyr3HLU8m1GDLYmpAxCuPQi0+xfMB4y\nCgx7HPy0HndJC6y2rRkgutVVuVVQe2WVj14TBzrrMBZuAqla/ZD6eACjNQI2\nxqEl9HzLVXxhzFJv2Cn0v7ITmz1FoHJCnc+w0fPpRRX3qDZE2rfW6zDplqI3\nUO3jMQ0n+9ASAsP6XGRfTb4cNf7vUHzXUi4U9vNEVcrstW5ECDvEBWZyO/0p\nviBPqwKJCUJoOQv25DZP7Dkv5mEf2015EI1sU7rgFmYKv4Sb15oWz+zJfEjV\nXIkcenJ50PCIHyQ2wW/MyjHs0yXPQVVUHojNYLE1eADDDJvdfLjp72TJUJEz\nW4c9LgFkFUY/gup4rl/MPvNBOkxfF4FZOktJrRQWdvUpcdbizfkkODgducov\nN9pK\r\n=I8Sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"90204c2ff2fdb19a376737d7519135ecbc9794c1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20220209192","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220209192","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220209192"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220209192_1642670394892_0.42362820808683965","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202092345":{"name":"@chakra-ui/system","version":"0.0.0-pr-202202092345","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202202092345","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"563afe9d80813e49d360848e05aa0df905a212de","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202202092345.tgz","fileCount":34,"integrity":"sha512-+s5/UQPGScE5L/EYnj+SfrMa7GroBriajDgl7traZyL4O6mJPWBxNdVsJI+H2ajF7PzSECLLaMp7odQNuYHUNg==","signatures":[{"sig":"MEUCIQDUEf+YpY+KE/+emIIHS9h9MBjpnkmIaF3P5Bk/ScdOPwIgecGR0yslU5BlbeT3BLWJqsPl3WL5HYLNqiK6MfrBF8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6SpRCRA9TVsSAnZWagAAHjEP/2Sg/aWPj51bE+qy786N\n3vkJ16IA6FCg838MZ+1vFEDlnH+oV/dXfyCJLpQ5E/V/JSJCe5PAungxr8rg\nswPG5T/73anUFXCReUa5c/rKsghgsSE6meAK83FjK99KopIc4mXiNdmBOQ3Y\nQ9rbkxT6Dyt6+WL6vWnnITEb6nh4bK+NkQahOlVJTJ4uYMGO0D6jGqgVSlqW\njAriZ3vCEpulHnyoVSdzTmCMXg7/4uyBWmuVgTp19awJlDF3k5UWv1qJNVtl\nfBIXjdX1rAIAFXGrjP83Wf/bPEajHNEGrKoCiyEFrzqOOJLSUto5Lv035C8b\n+cGsawvmVsxT+QRtgwT4rP9e0qK1A91kgBDP0ae03bzwcTknS4mi9kQzB7FD\nXcshKArcrvmVWE8a9pmiXWmaG+1PlOTKurYYM8zmroitKlXy8FHQBm+gctzn\nCdhbGNeG9WpqlJ/bUN+A2KuXF+YLIkI/6if9jl4nnh2WblOBVwEVRN7l615r\nn3I6sgYwrw2R6vKGNURbENF+tOkMAaJGT8XcsujKSv62hjHVasZtSnLrQLD5\nf0NRKaeKBTC/wH9WB12DjjX95Z1z9j4ynfL0LGlIGo9BTv2HqKUwqneMzB3L\nkS26oyL1B6Yqx5/oZkXPSb3d1E5H8uXTxFwhi4++qp2WQzBRK7ie5i30IPwt\n3NX6\r\n=Qhos\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"dfe50d3b7b06b49149b8b57305bff4e0d8d486f6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202202092345","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202202092345","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202202092345"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202202092345_1642670673355_0.6559441573636728","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495259":{"name":"@chakra-ui/system","version":"0.0.0-pr-202202495259","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202202495259","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"65ddd3fd241412f67f3295c8400f3aa713879373","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202202495259.tgz","fileCount":34,"integrity":"sha512-WXn+hMOa2RQWEYqukJujBbAgZiS7bciZhqxMiXj46eZKyBceV+7hzMgsStFnJM8FiB1XQM46pwiOASr0wDRtNg==","signatures":[{"sig":"MEUCIQCC5himG0mB16AUGIvf1zdf+jUuRg46wLlHmDthH4wS4QIgMAJuybIfO9uYpky+mH4oyMidb3DUxsYzKO3wRhJAUIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7ncwCRA9TVsSAnZWagAAw2cP/1Ij5YNnE4wUMco1xO4a\nk/rBOVKb69qBACgMCTttV8MsMoCoJhWsuktcFawEQhSaCH676hj0ZBLzpImY\nAuE2IjH0Hn2btWtEeZWtYe79UhN9D4cWnU3mhcMYzFBooK44N3k/cI4yh2ed\nfnbYNfQdENpBc2/yo761HQ7umMEfFantIwpnTcndHMAYlZwEF6dhX4QDZTUM\nzirfbOWcPf3iG800CBDjCL5zrK7bJrgUiYLYbDZIcylvykZuN6VsTFwFjK7E\nFsDovozCbUateR+g9Y8d51by3hQoVVJ7oOU0PBIEG/EHIj6pOFHiaDqMTKEV\n/DZW9Cbm9wm8ZiaqQF5lsFBafaHsK7tpaofAIAfHsom/h/59rg7y9Z/e6NnZ\npaXDUL4SLgwLhqcKP4jwGbrhvqKYvIzZPcNsJKf6dOSvTptI9XIENTUDKDIW\niRCMNS5nndC2bfTy3Z9Mtb/Ec8kOZp0ij+O25rPoB8keH5UFkVkKfzpbFMMK\nK5fj+ROOoop+KzUtYxKJwvKAVEbrpmvk1T7e0eozZORjbzEd/bOT/pl5UbMY\nPYgqeebISGhxw+Cx82wxU/OUFB3N5WPgeul8X15dFZ1RWCob6oN7cfF7IddH\nYObaCaLceZ70d7HNXCVIFxMgtIEE2A+GSf3vhp7qGAuiTSySGprUBaaeYvHo\nsOWc\r\n=N2pA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"cb7bcf297a212523d5e01079a08757f49b76e89f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202202495259","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202202495259","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202202495259"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202202495259_1643018032382_0.7144523334569413","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495536":{"name":"@chakra-ui/system","version":"0.0.0-pr-202202495536","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202202495536","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1751f15b2e287c14a69c40d640a67ed589ae4079","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202202495536.tgz","fileCount":34,"integrity":"sha512-8Yb1cM0FtULiCNOAxQ1aOmhTsAViQ3qi/zyLcUyMQU0J+akVBmeH3CXEZVkkvsdTZlKRrWKreRFmhLNQ1Yohiw==","signatures":[{"sig":"MEUCICwA/iTyae2deEawxK+qdBM18PdvPvxpsDxDzKIVrZv0AiEAtCshtv3vXuHFFOsaJv2CuWzCQ99kuk1kMeARvfkj/W0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7nfPCRA9TVsSAnZWagAAuW4P/0PIqsA1NYSZoLyJs++g\nLi1UP5HoOxBIlBGx9Rz1mIJMLK09XHUqFIfIzyvYeKWKdSUGE4T53hrDGqYp\nCOcCFu2FOLsZfKHB7fw1cduVgxaD2M1v9wBgP0b6d2BIZHOpNvNJyr3IaXgY\nq6NYGafn1A3WtT29el4LaInrfJP/3wWEYQeVpqn2vySxCY63uJFHFW7NJKdD\nEHunS2zCgAlJCjIIgR+5R0AnOQMAxFeJKclm1/wWT8ThkUoBj1tMOO5rrVJ+\n29yJg3Biyoj3FEw0ZSZS8UrEiuRqjWYwsJMXKMYZjvS3ZffC6QvP26baTx9k\neLjQBU7LFaWHY/9HLbLyiU2P+Jyd8XcmWFfsU1lkesOcpiNLyQ0x5NP4mwXi\n9aIUPo43iyB3DVYt+SZqCB9EnhrP0b+RTwcM2VxaModHUu31YTA/kmHIzxp6\nXIPYaVYEbyZ6/ZtQil1ewst30VAJGlXSYYe3rSfbu/JPkDCNn/O9zbNe3YnG\n2E9TVJSSbDwqJCgARKkYkJE2M3TEgA1C2N0d6qZycjLrDkBI0mME9BXUBXGT\neHcbv386YN6rsX+H4RC45ZivMoDkeqlnA4un5j8OWq3dYpSmTya1xj4Gft42\nvOqQpduDUModajxR28NBUKN5I6tJQxafRgx+JArMX+kJu72WKg7bGdNcKvqa\nqHxV\r\n=l4Tg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e56b8f644895d420cfabbce11146af62b5375095","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202202495536","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202202495536","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202202495536"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202202495536_1643018190748_0.637986205233857","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202495553":{"name":"@chakra-ui/system","version":"0.0.0-pr-202202495553","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202202495553","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7446a9a5f76eeec697f31ab3342f98cf037e2a53","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202202495553.tgz","fileCount":34,"integrity":"sha512-MO3me2izXKpTABGeMcdaizJ5G083szLXXVOrEAzpWdw+DskHR7AJBxPwbawFHtgC3527NdBw7ZUHJDLS+ZgTSQ==","signatures":[{"sig":"MEQCIFLHLzAmjks4RSoGiP5NG3L898MBggvB6HX970EtFHmQAiB+q3SI1OvV5q2ohl+K03uIG0RDCXj0SjmwxrfIk/d/1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7nfYCRA9TVsSAnZWagAAq5YQAJ/3v9N1RaWHoXopJuNS\nXu/bq5l/0s6i1PaWeZdUlWTN4IYF+nAesZT2XJaMdfXrbCukBhsIY1YRerCb\nWeNFtdve9gJ9UEcpcjY7EbP2KDfCtoXkOkF6mNI4hK/buxuixB8l3Tal3fBF\nyU9+5CxPffkQZoRZzULL5Rdh/xb5UuEx+eV4QpKuEDLH5Ylk0Ull/7fsW+38\nyw47oalYWI3qTOR+exx8+49GxP1jUbpAeqiIq21/dcCXkHuSyE1obXq4hk7b\nfUYw/IiinZpExPOye1ja3uFVWNV8dCvKRLZ5hnQHTSx6/BT6miTjhGnLLJ5n\nvW4oBvh7+L8D+m/auvma3B63Lk6aedbg5SimdmIWaobY6UDIEZSUxl3iM7QA\nlqHMz2+gbPqqxCX/sTiJpbbdKZ7CVjo2qSjTVmrPAFnJtxdWPBx7olPdjemt\nqQfvckiRc42IjyMGGOykHb2CXCSECxYtdt1kkeIq/7LWFa5ObudLBEQg/HRB\nPYHlahJF55PBzSOdweGklWYUz305BLo3j40Gcvk0R96rURBqZRBFU+nBwEjc\ntmbY/9K/Osx7N82xCGfug412sVSG3dajhGJQQjjbmkebvH2qe0vbn0Qjcw/Q\ngeh6EmtVt2lbMe5JHl75cY8GpqNHUdH5LrMhL7pzk9FFhxtOq3kC429rnuvH\nHkFu\r\n=DOux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d48a2548e718c565a770132e1c27ad2a6d316623","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202202495553","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202202495553","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202202495553"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202202495553_1643018200699_0.9764194698613804","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202495727":{"name":"@chakra-ui/system","version":"0.0.0-dev-202202495727","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202202495727","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"be9891b03b7f3a277b87aa5f9e6369a9a2930e45","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202202495727.tgz","fileCount":34,"integrity":"sha512-MC4VNNsBuwLj3XT/u9EPW0D07ui6+hhYOb3RIfLuYWZkE3+migoHNugmnjh6EyFXzQMsKa3pGLEwDlDbrY0RpA==","signatures":[{"sig":"MEQCICXZfudcYZVCe/TAH2CYstkLU9+pCuH/XuQccDRftw7CAiATDY/GZBWvWchkUG50aJFEB92O+fnK0f0Apycwa9GxeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7ng8CRA9TVsSAnZWagAAiwkP/iOq3/VMBIR/LdDFh3Sc\nIpU5okFaVN4Km63D9fdy/9ntenEAE9AdXN8LF1Hg/AAJNnrlnpJMrXPrLTVG\n/QPa6CR0wzDidR5AOn7XZxWqf6VySUR4JQVCxI/XycSaPFyDCAh7UK8igC5+\nNYHx0e2vjo1/1N0AIKr1Q9n8xEHDNVmz2pPGr7fpR4CoygHfoHsZa0+hkDem\n5rkpj7AgQsiRrAROvgC4GjF550SedpJd1MdQHHYvuGK8H/jtIJdlP12pqLEt\nOzNfkGAeTxdjQvYBdVIF1rVHE6UtzL717yXF92OYwf2/I02QhuhmzHJyc8zB\nSULljsP69YkuRs1faHq9OT/1t8p2yutnT/BywLsSeUI+Yj0zr/904HkYiRuM\n1Rar7lGG0SmiXuwaaPqEYdJCcHDpAsZDFjD24Xjb3pV1ckEiLgJFg3FSiglC\nSEYtH1M8nPMOXARF7Leoo23+Om7NTkYPTtCP4tNos6bE99zoysZjqzSgnnP1\nFsORmQ+voFLrf2wv2namXAqYO0rJZufMDMcECHD/Do/4Cq74mGTHvzOHVn/b\nAseUbeXG6TYY/Ix7i+aT7emLQGMPK8IiuAt6INYrD96seoFNKZitTv3uuGTL\nyc3+TrMxs4YUuuHo+KcWcCx6ByVoOc0fmKziG01tdinQ5wbESeOYVGLnSD7s\nmWcX\r\n=6vy7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d48a2548e718c565a770132e1c27ad2a6d316623","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202202495727","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202202495727","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202202495727"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202202495727_1643018300187_0.11144504490036589","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202410017":{"name":"@chakra-ui/system","version":"0.0.0-dev-202202410017","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202202410017","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fd003e85bbeb972aab221558979a997e24d95008","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202202410017.tgz","fileCount":34,"integrity":"sha512-jNCgN78lA7Rzdhxn3gtzmDCl+QUMtrHjoRli9HFzdhtm8HJHizxGastGUj/AzKh2cNcg0g+UYpP4paWDxZPIbg==","signatures":[{"sig":"MEUCIHDj7B/wfCb1ENObwqhcWUEYHT9DSXs4QYZgugcQZP+IAiEA89VrPHqay2IZrnUSh44gvgVXv4XvSBxgHhkJ3MVXUzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7njfCRA9TVsSAnZWagAAw7sP/AzwHRl+iqXS2ZjKXv1N\nT1xKXImq2CMsD+NyFA503srskjs17zxoHbYbuSp3gpsTIR1roeONDkHYM0RR\nk/wkqvRQylJrzI0VbsjSFZge3SyuGo2qVDIsq0gqEnzk7uSBrE9UBLnfK62b\nxap4QtI50YV9lj7w3qx1GzM1Znomb7I/uSzPVkfsqii1Fq9318pC9ymfIwaP\nk9JqXIV+azPXFJx3y1MhRYy80KzQjoOpVn/LbN49gBXhtq1C45LxImKau4//\nhuDp4bFxVLyIR2zT0SdCwJHuh+8Q+GGRnHxYCzMnpt7fp3iTXz5JXlOFDZiU\nnFIO0fsy/Gv4uolnSrubGseoHcUj2UpasPp704SCbkGwCu2MeLv+i9tV3SaX\nQ1Y3um0EGNB3p/snPyq7HeKbWZC29por4I7xddAsh7iO7Yk5tR8znZCiNR8F\nFHLVUr2h6s5ymochPkjMVPJpqSn5lDB+8ipPBwoVKesI1bZmciZSvPmmvpD2\n2R8d/tjhxkRJ0Rzh0ggZB2GVjlEIVhcodY+DtKcTqpyPD2JTl8PDj9JPxYRT\nzdZNaEm3uFqLhl1mXOc9YrSPqHs7fEtJ4kyNlD7pWnmijUc/EpWWwpe6BJ1h\neSHsS5Fg4T50eysAzCMIJYwaTRfKqTY/8Ic1XW2l1uoCUwuqBjfhCvgkP6oR\nVTgr\r\n=X0rY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6f63e44a5848d85e3be9684b0f40a64b4e613139","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202202410017","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202202410017","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202202410017"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202202410017_1643018463649_0.23058765583984786","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202410034":{"name":"@chakra-ui/system","version":"0.0.0-pr-202202410034","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202202410034","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"851b09b4365d978f3f54f46461f25cbd32af4e7b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202202410034.tgz","fileCount":34,"integrity":"sha512-gGs/skLq9/F5zI1s+YtG+E1RMd/cuSv/Iz6DrJpqumwvUP5lzOeHRHjCJiWZ8k6gTAss/h3W5GQ8R9iQmBQP4Q==","signatures":[{"sig":"MEUCIQC3I5l6Ydxqqu6Xb1k5PzO3VIlbO2P9CwIsYxGcSTh5IgIgCX5pReNPjLBoFGvSTbr5lQ6BiQLV7Yxg6t1RhmVrcOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7nj3CRA9TVsSAnZWagAAj9IQAJu6aU/Pu+2WWuCkB8Oc\nzb0ApVrMr6mRwqrsio6VTG/qlhiRFwjhQoHnwpx3r/XJFYJn0cCEfHXgI3Tj\natLQs5bQgflR2M6mpYUstSU1ul750hEB0PN4gIojB/xUlJRHHp3ivcyU9g25\nV64qmYgfmF7dnatuEfv51tA92LQuH+UCNEpGPaI/Qm7d6t7O5WLNcODiUXSe\nkB7gQcuBpFLINlVVngkwr+KG+nvNpoa1MaKV4qbPThkPnGU9pb1poKVFrwRy\nCG2AWA32PywZqtAqj2o5JD/RM+hH6SWT09ejJCUFdvAgOs57oGdj5dUh6t6I\n/nqQd0oLuxByhhaWnUQh46nKurC2tsZHadhW13PQiNUoSVGnjB9sCCtQqjIJ\nx1hrJ4czj/184p8hPgKJVNMUW08bP5893xmpFUILtMYyn5yzAJQAl1KgFjcE\nJ4BR4KIQrki+a0EWp2W7uNmBYkzETN5RnYM+PkB94UUmVG4cEY/YFUCBTJMx\nPRRFTKaIcMLh9SlW+dc4j1q4BLUJBeerVrAiqIBihFmqwAub38Ulmyrv7kaY\n69eSJHxuvBYenic4yxrIRAt/yZlq1eWnbyAACajuvaPFQi5CaMr7plzroCzQ\n6guD0dRW1EUOrX2AtwnXeNzmk0iNgLQeUUsVjCMQqyc9xtf3ddCc1JkCK64E\nZKAl\r\n=nFxF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6f63e44a5848d85e3be9684b0f40a64b4e613139","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202202410034","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202202410034","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202202410034"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202202410034_1643018487203_0.7055392298559577","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022024212254":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022024212254","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022024212254","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a85957a3dd9b3771ac099672d6da3c2c9fa66d6c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022024212254.tgz","fileCount":34,"integrity":"sha512-yZLqO8yFlnZfU0TIw88G/rnfJDkooaEdWuIwO1R0pCX2xIiz/q1fQ/2rgaZ2p8e8rGI0X5SDL25j80GfLJu6qA==","signatures":[{"sig":"MEYCIQDYqhPm/fRGKf/dtTYAWh/bymiSfBujvO8YrthlIhqHiwIhAOwC1JwX0D0DKX6mbvxF+VzQ4aAqp5Djc23i1pzwhIiG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7xjeCRA9TVsSAnZWagAAamcP/3uy0Kpki9rYxuo+xnRU\nJOHIO2QtN9eZngZapW8WvkFEXktc0HnbvPIcME3t7YQMFqUySnJ4R25aak90\nmyBltic7oPXiqe/SOR6UKfd7wxROYD9WMcLvEA8uNxtgfwv1PXwZSg8b21IC\noo9/L6FkX2P4DB3wxraHXLdeP0GjRyb52cMMvdrbDnHF8lN0kgTAam1ngWn9\nMW8sCIosb9s/6B/0n58VqsHk1KI8mTgAjlso16lziu3z+goIJksdqBx9mBHC\nuQl2MFRhvm95DMXBpAqdWoLjuORMVr7UO3jdzyiAzxLvVjyV4hCX8crZnZLk\n6sF5XM3BPhKi9efCo1jxSMKnnRa9+3D33lLOIUjd8dKukeGYVQXPW7MUxgf8\ndTwPFNrTnjkfo12aVEqLDJpltaedT+98R6tN7kNil5pmAOuqXaxizXF4awQU\np6LBPgw/Lg9udHA8aoKXZUvusNRcmg+P9Rna3Wh7T4WDCinhw0MmefOX+f4L\nSAkuTDHt6rZydu97cFkBfYHoXHUByNP+c4c0/shu3CTw1TrNmvN8jt8MqELi\naI7yxigkg9d5/7CDf1/Ei8PCdaVmvCQOZs2iGOPyNB9qZ/kkgmDVtBo2YPWy\n47Bnmncg0Lt6JDtrUmsv1zNcDAwZC4D9dQoPyrwvoNmSVtanQiYE0v5FABfa\nGzUc\r\n=HMAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e69f154a1e1e88a636f8730e2d405282d77ab174","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-2022024212254","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022024212254","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022024212254"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022024212254_1643059421843_0.5356252221238889","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202423375":{"name":"@chakra-ui/system","version":"0.0.0-pr-202202423375","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202202423375","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7f56fdef539aca11098e26ba6806a6007c6f077a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202202423375.tgz","fileCount":34,"integrity":"sha512-X7zEqhLXJNp4LELI0OiXWMGxLMBMQP3eDXBt3goSUfCLQ4+alrWcmvhedAx4/fXZnYeQHiC5C8e7B1cOxqVWRg==","signatures":[{"sig":"MEYCIQDin5GuP7JSfT/ZRuLSFlIv/7AZ4bQuHydonlHDZgMJngIhAKHEk6W2QHDWMUsUGD1BJ7pVVcu1UBTXVugTqoG0fklJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7zhMCRA9TVsSAnZWagAAkGEP/3ok6uY1igy2/uLSMFSR\nMhbjUJDYvAMiRYkRP8Am2BJ5Ei2+/V84uYRYiCCkyaWC1v7PFs6Uz+gELD7E\n7hQXV8bdnzQ24hIcCzIOsIGAFaXSdwreyRCvkPPHGj12SGw/xrB/rPcgNfxE\n7GxvVzdPjLQQQNHrvGsJDLqlE62nXLiIKlqOaADSYeg/Yy5hD2wifyy8QKrq\nZvJUK4X7emnPzGX/PuguIJ7aHV6q6FqShrTn8Yrq7PzPuuxR/Rg9urtsthRe\nNM2AqJzHZGz+ISS/KNqHsYo8DpVpCEh/VmQJRTZJGxxK06W9OV/NoLskIjuF\nBspdoKPBKYJ93OxxOXTMe/y3RAZk/Q1vkGEa2sgmy59E3H16HAr44iGz15ec\n9LEbzUMoS07AvJBsQcmGqpcpzFyUvzRYdgAxc/f6mI/Nb2ZJp1l1Z34UOHoE\nAwmInLiKLetwLTPxMVEIBizSTBP2+c6QQKGgcxK7HfYoOrsYffCcUpk+OKX5\ng7ybd92aPdqNDyssgZRAnhVcR3D2sKXPCjHNOX5SeLxLNBIDOuW1C8xx3hip\n2BGgbWRPg1FUTa21jFpR+fuvIeeeFweaEPkBxOAEpcWR8UTAm9jzdo6hXy9Q\np1Wwi7WhOCjicaLa3/Mt4zFUA7rVDlU4Yh4bdSJmUojkXNtAafHfmBnkTw32\nwmWV\r\n=ccZc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d3eead0763d58975f197b4c33b5c045f765973a3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202202423375","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202202423375","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202202423375"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202202423375_1643067468359_0.7259181000271488","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022024234531":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022024234531","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022024234531","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3e0f750b76eaeb41488d96e3c4e6c2515e18ac22","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022024234531.tgz","fileCount":34,"integrity":"sha512-5IiyR3hcWrbbQXoULLcxTxP29qHCD5JNmoERROeX5UCRmnCMFkLF6OL298ZtqwXkrWERgGlKw+A0NEfrh938DQ==","signatures":[{"sig":"MEUCIQCIPoVdjgS0xz4KR7C2rVuMgO2595cRIG9F2UXvpEmZhwIgAqnGE8AJBZiZVyhbd2Q3cbssbGw24LTHnsPvlpithko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7zpLCRA9TVsSAnZWagAAiWwQAIJ3b+Xj2gi0t7Lgsqgz\nuTMVSeVSTbEas7TT+obay354L5UJFKsWQtnUaJojcJSSDsxG1yYRRyCH2YWE\n9FrTwfsBAviRO6gnPdN1nJCUfSuZkj+H3YWwxpYdhzF0VgNYJs0qAq/spO+g\nENnLm44UTG4le/vpPweofRIPf1ZrY2+qrSnPwWdfIlM6RpgYisDMP5zZ1gg2\npP9dQn3MvEsDH712JIB1x21wqLLeKBvGem5dvmOcXyL+Rbn+tqOsEDp0Dcfp\n0H906/gmfmJmY7SDoigF9Nh4R6katBglcPXK0/g+gD7uWNLBp9VHzCVSob0t\nZPixD5zxohwq0gnbonnzl7D7/16FEEw5vyjTUD0+sbdM8T7xAv1ctNqea9dO\nT1QbKZXDZFsW3SndhlZR05X1efYIUx5mJKfMaL/j/RtgwCik10Z3i/NwyWva\naT2HJiNzQfQLNbsqHBnA6SGfrD/mn1DzwOq7xIW8E8+mH5L9QtMYG9WyuEmz\nga3dPCn6Wx3CLnmd2HCgg44SbeJ1eDVI1s8YXNi/zjk+0vzHetnPmgLpykgO\nCP38GWg7Fxtpqo3xyETqXONVSTsuPfWdmrkfiSzh8FuQNODndyuc1s53aBV3\nPXkks5CRmRmTl3COZCOjtgWL2pR9Mp95hZuPBRDcLDy6bvRDsfhekVQzXJNz\nIHE8\r\n=12aU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"4fe2787ec515af64d8a9642306de839fb4a3f973","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-2022024234531","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022024234531","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-2022024234531"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022024234531_1643067979097_0.178103320215095","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220258423":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220258423","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220258423","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"346c4dad008185ff25997728146032dbbcdbc699","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220258423.tgz","fileCount":34,"integrity":"sha512-bTfjXJPn+wzFkQrCQi/PB/oZPKbrggq8WHb2d29KmJKwr2DVhtMh2B9cId807SWym7jF+6MBYWGQG2+nM39daQ==","signatures":[{"sig":"MEQCIFeZWohES1YZpn8uSZ0SeTSFMH3Ret163sFbtAxBnPEbAiB1ihsexFMJc2Cb4v9z5lAvy1EPfNrzuOh2h4IZeBEsUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77gNCRA9TVsSAnZWagAAMzwP/Al1bKbj3/jbRiywBzAM\nqRh8poLpS5AZ2ONSRhtfj0UfIoOarIQlgEWTw1xi/CVrB9srQV0Cqvy5NwIM\nITBqYjeF5f7tkpIpzFKTz61ov6Yl1we9hIPpMbZQya4LQO/AB5MMAEs/vxR7\nGEM4iqOHC5/ebgbA8GsqGTkfh6ZcsSkQVsxzgMgruS2PR800EZLLPYVwce8o\nzmwj8nFMzNoG9U6N9RGprv9hE+oSylRU1/lbvj2JISjjBVqQImIOxP9quMGJ\nZdvQuy/FbxH4SRyEVcRTA60Fiwa7dNKQWhtqxi/7qckcKfumpx6OZOVN0flC\nliz1Xdk3TS28GNTWG3C8p12j6aUO7cd30aotQLQa5uevwxoghbzpajhfGQvG\nibFv9g/vI4kE3djMx55VFDt5WivlzT3wlabB/r8Pxzl8+pqj7X/w+AZ74ADE\n+pKB9X6DNkkIP2WkCedAALadQ8y1ZyjU2wn06JlA8w0xTDc2ycb6Ls/VDPcS\nBwR9nyayov19B8CGH8doFNxFiBPWNi9zCgTfBekFAX6DHu/13l3DOD3Z8LqT\n0GPbfKPf3Cl5/HsZZQ5+YDVEGUMHyf2pEcAlSYvgdOAizERGYODk3FWL/0cs\n3uRYOSUkrYKEM+53FzV2Oay3ge/mkon5R7VkzyQkHI1rGHnGdDNO8jTGA4ob\ngwLl\r\n=6sgp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6e651353369eb28099e440b2c273921356ac3361","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220258423","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220258423","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20220258423"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220258423_1643100173808_0.6620106951822613","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202584437":{"name":"@chakra-ui/system","version":"0.0.0-pr-202202584437","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202202584437","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0fe20cb045a1944a9e04abab4382a3885ed6717b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202202584437.tgz","fileCount":34,"integrity":"sha512-lQZhgYhKADQJKUyjRFARJkyRU5r03ALvrx0CrEzQcA8wFCMbsSqU2YAvF2AvRHHeBBaXVGeHIObWTL+D4UOEiw==","signatures":[{"sig":"MEUCIQC5c6TgNDTQhV29B/nhq0n1gEdgv3Ja9LajkbH8xAt+2QIgZgDgR9ZXFNBl5bmNeRpsnudAXaBHCkZgPu1HA6dQ8W8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77ioCRA9TVsSAnZWagAAXrsQAI3bw1wloGd3Kovd/lXG\ne4PERIwbaIhPotPCB+Z4Zk77Thgi3rK7/HP1Wwqzz75P36ZVm/q3tjekEeFW\nwUFySxZpegur9+2ZEJU8kFKwFKNE5UaKONXH/jiZa4Em4ZM31LCtsNZfa6tn\n0ee41DckwFz/WPawkK3uodU4h1E/seKHHP97kCodXHH2xgXi6RH7z8j2yc55\nCgLGNoeh1JQdH+6ylqISzfxdAG4Jhi03jahmWBlvaPEL8GsP6FitCQkdS8MS\n8s3w1tsGOvevcIT+D5IrWuDi1AwYahZb0nvsfHRDoey8l6TVmYPl9inwRQOb\n6EMa4OTdSmuX03gDC2OrFhgKhLBJEazyjNVC7uHwTxwxuz5XkMI0QdpSN26x\nA4eovZcwni5TwqlNW+l8iiKZe6WsSNaMKVBitYCAWCIzinHPiQ+GoJJF5VWx\nMVtYcIXhSyu9XSOGQsYkiQ+7QvMClnvnKUNKZWh8/xWz3rOQGj71vsOW4Ob/\ndGH9uYCSptZh/4OIGfqjT8xPpxKaY9KfTXqp7+X8F4Ta0MBrcg5V7KTvBTqz\n/V+abHD9nCyp+LAc/WpjTpi2AkJ7aI8DmjvqFAmHGvhQEnaN81nPt2eaTAZT\nmJWZ+huIqejtKSaUcco16P0MkbHCHhoOAUhL/FcEJXHoGg2HQfqUgdvFyawu\nabqs\r\n=XydD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"92fa404bf4bbb7127cfbdc749accb65409eb3bcf","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202202584437","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202202584437","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202202584437"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202202584437_1643100328322_0.039821529891518326","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220258462":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220258462","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220258462","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1b6dbd80b0c01fc780fb22982705cdd7197cc5a1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220258462.tgz","fileCount":34,"integrity":"sha512-Q1NzuoJ7N2wNqrJdJXEG3Q3qvrnTRSqHtdSNCY34iiLfPxu2x1qllN+n0nv22Ae6Mq+c5gbtjGUcCVANS/d6gQ==","signatures":[{"sig":"MEUCIAsH07Nxi7y6qZTRFha3UWqgg86XaMFS3wrHYh8xNPFoAiEAg+Ye5SIGBBeUCMgMRxxqU3VQiWz9v2CZNp7e0tCvBKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77j2CRA9TVsSAnZWagAADv8P/0+SWANnoVKePeW6kxvR\nltYeNChu6qPTOyiFWLO+7wtWVSt587ZPfOIbtgtpXMfIpFisVUH+RjMuQ8mt\nDab8B2DUzr0tu/pNGljGYMo+vhlbMDhFb92wHkJILvLXhgd/ySckz13OiAnN\nkS9XHKyMC9D5O3Ce2iJha4QGlc8j/iK5feVvvTaQ9n5nBS/vPi1YzVCFegkz\nf+e3+p+ZN2J7cTigWZY/r7UpLLix09pTt9/qPNhU2HHKnXqzkjqRVZQissMS\nTsyFl5UnTaDb98cLDgS9ITgEYLGFFjK6DDkQBPwCodUU+yVSreggMzsRfjDN\nuVp4VhPZEJntIZEGjNufSPxOG6LiMf+hBxdFV7tAFIVg1aN+pwItZuKXf2go\nbiFaWSpc9FZwTz6Ch2PzZNtJ9WGrCybfY5NBlz6fr5G+fi5DCnrIPCsZjeTu\njgdQPJnoUXFbxbCvGQimn1gh3ug1HAIkgEf5+b8cCZffGsAzZHYXl06NSfag\nRQV435lZodnfRIIirIX/jn0o0d8oZ5MKOcD0V3OIRNFvC2/2w5z9924hzB/f\nHoxP9O7frvHD73zG5who7El6WjnNMmBFi4+ncQY4VjcI7VBviZW8uh6ic13B\nGWQ5l+W2YCbxbnKjiF+F1IjdJd7aC/0MJ1cq1odQfRVAjXvIgn3m7ZktBgLb\nNixb\r\n=0g5/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7a780e413d76852ca5a956711f4f8470a7d8694d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20220258462","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220258462","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220258462"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220258462_1643100406400_0.9592098814684646","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220258486":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220258486","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220258486","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"626b4e56c3a55b7978fcf0579bf9024566066d8f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220258486.tgz","fileCount":34,"integrity":"sha512-k6Jc6HOQ/eLOKbQvsTzwgunLWjNttZBqn7mBBcoi+vuxzH9pbpjd+ewhaYTtrwlgVYxbNLxQ89BNcqtzUPyqCQ==","signatures":[{"sig":"MEUCIEUcdHVmZptoWK75LQTzmA+9UUrIjWIqOBEwimXIEnmBAiEAjL+XQwKavIEJasEzwPFsVVfrvWcIF/qph8H7rBNYoFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82466,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77l7CRA9TVsSAnZWagAAwuwP/AuR5cU0YMIMoTv8vJp0\nZhq1L9VEJU4sO+PJwFYwkf6v70HOJBJf0XXG7a6vKSDK29zdXPZGhT22H3Uv\nECR1MGAv1ggK7emRnshEt9hp9zY3XR8fZCdyC65NO7x+jmRnbLdUy8cy8lRF\nAINKPYBCy3VF2t2bbCP1BmwPQa0Ms6A4Ti6Ui1uy9s73TvzQ7zAaQCd18MQz\nhYOz67IKTNEWZ40nhnohhej25d8+zVEOQTBuIVt+HGHgllAAM6yFHxU/W3tH\nqTyJyenFktd9wTBCpihqLXdv6kqrByJ24RuE2mV/H/FTLRdGSAu1ebvnPeVt\nUtxXdMBRMdx3SSi+SpBVch0HnrvquOWp70z5BVbcAlFmIM2Y5Pi3KJQC2gv/\nkocoHb/L7rmeU2IuB4/Zxqi3+0gI2r5YSEMIWB0Z0coVP11IFriSXBXDbzfP\nDgXj8JvL0YmLozIkHkgQw9fADVsbvCR75JisAIrl0L1yUmszDOUFRmelpNQ2\nCzNQISCGLcPIDVBXf7V1Y5W0hcswYGYVJs9GpdegAO+01HXvcdiMWHMmb+o8\ngSOsNWq5MuaXelGWcYr2KFMZWQSgHn0fRsMszw+xhwEV8k5NeG7Z8cJKU0Mu\ncIQzc/t/hL/zZxj+x5boNq68NDAtc69v1z4CTgKe+PndTLBQVOmK+90ZAYTg\ngcIR\r\n=13xq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7a780e413d76852ca5a956711f4f8470a7d8694d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220258486","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220258486","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20220258486"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220258486_1643100538911_0.9906595884801879","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202585455":{"name":"@chakra-ui/system","version":"0.0.0-dev-202202585455","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202202585455","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"87a1914479a0422374b8472388fa42dcd39ae8ba","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202202585455.tgz","fileCount":34,"integrity":"sha512-csEyAsQ+4oTQ7Jm7uaHvQ9IRWTHOseZ5n1DGBzCVtxtyymY1ku9z74EgBBrR2BSvsWE+ri3T1yhBoQ2JKcHbPQ==","signatures":[{"sig":"MEUCIDTHfOdThTyH7hqcfTr7QqTlEggEjqc/wEHSr9z2DoE1AiEA0I+fDxBzrrjWK/8CHog6IO4mkyazgNSaxmKsVw8IgRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77sKCRA9TVsSAnZWagAAcvMQAKLHzmyIksM6CrumA3Ts\n+0c+nycg4ZXHihAqGw3Aps0EqGoVEaLVGVRpF9lzbP5VBzFbfdJWqwW4suDs\nPWd6PN+fQhVMQlOz5dp98DhCg8bG/l6gaAm5gmNu0hvY8El/rvPNkj+jN5M/\n7p7zxC8szGyhaahC8ASOr968d3oKSw01CQ04DaFWsQlxrJL1q1JAfdkG07dF\ndIiu/ZF1gQbgm3P4NE5zsnYX/m/tI3HbwUgxrZ3ryA6OkfDt49fYBAYTWb1R\nXiQs/wwBtUYtrdGwz5KCoHeCushNL7lKDgKkkCZX5dzsIjYjMF/mBk6JpiF8\nblH4RQ/R5L29cO4t3FR8ymtB+xHN0YuhJfo8qA+4XIwh2cpRSOQisG0JGiV+\n+ZToVoqnyE53uanBMPV9TNLrPYFnG8iOZxPER9wDVIQ6zL8fCPiPxQ91Jz4r\nBNUCcWUFd3OqjV97kAo6YSU3RmaTT7J+JOYHx6vsXe+LPfMx+quwqW+yxn2q\nVtRp7MxQfwNiJp9PwQzJalPlb+z6WdKUCnqxw/2A/2+e+aswQvm2Y092iZoo\nzAv1TrSygRhzdyDOAJAAzS9YxPAe8PbAgaju1GFqWwETkIpMMO29i9kizd67\n6TciqeXGYAvO7RZgTtNduLyfvZ78hs3ZD1ZJsLWyOuiKJHOmLSbyOj0EOhLR\n+4uv\r\n=SMtc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6d3b6d368771bbcc93006f4935fb54fbeba115fa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202202585455","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202202585455","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202202585455"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202202585455_1643100938450_0.7688114326223376","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220259146":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220259146","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220259146","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c940afdec5fa50144269e6647276b39b0beab47f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220259146.tgz","fileCount":34,"integrity":"sha512-vDfygf9UsfLayxiPR9r6D7LOmpmKz/ZEXMWTvXZPiaCJLWqMcH1zhbWwgJwGBHqcEJTRIfJLI/f/WDKQMl8Wdg==","signatures":[{"sig":"MEYCIQD/j/1AaKIZZV1G/3OBMXbMigJYGcR9epvT9urGV2oU3QIhAKA7+vIjdB0r31l/RNowQbnwpHssx5EDnrALzVtboeO2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77+LCRA9TVsSAnZWagAAagwP+wUzmf3QuiRwc5amzpFv\njxDtUco2RemXhLNm3Oy6X54f0GWrN7SweMoNYJRAfEuiT8F4bZtaQUDZL6TT\n52KGaozSnP0XY8GEy/YIPcu681Aw3a0txZrpL+i55DmmoURWV32FBM/gNqbm\nRgjcZiPxXEhqWIbnyhqKD8ZlR0V2Id3Pl0q+OJ8jKs1lzt4TGwzN8BGQGVBC\ny0rGqetH+MbvZsuOrx19tJU5s3WvEU/PuYtZh+4s/KfheWk38wrJ9NcH7+VD\n1GuIh3h4P3j7PIzWDx/GSAW+gwRWw3E+LBKnGVEuXzI+q4qOjmIXIUY4bQa9\n1WjTx4orJ1ckqgbBhXC+7EBjafdNGzfprRGQvrR/4z+xibbloytiQdPiKtU9\nz/mEmVBJ2+tvEwNSWOG5oOecidTiMAtD7FnlGq8enwbKhX03dP6G14kchXR5\nCxZ172O/AzqlHd0VKfSJI2RqdvKwmj66aIUa98LYVzHySIRLnL/iYVjD95zV\nPOYBGLqJ2QTi9IN9Ul/gDXu9iaYXHh0WWOAu7wdxyKQI9OGNKE+8QLJFOu64\njFIFUNbO6HF0dNHKx38VOzyFckaknjS97FO5byKkrmFt4+fwRdnH/iXGZEc9\ncFJR9pGc/cZLz6Cj0IAyFTNp/XSaPngGvE+6cYfLB4gPm8+ravlY7d32Y493\nQZqO\r\n=I1Qt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f4846a64804ce7a00f8c34cc8f7cff8d85d4861d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20220259146","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220259146","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220259146"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220259146_1643102091266_0.9302205660932141","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202591453":{"name":"@chakra-ui/system","version":"0.0.0-dev-202202591453","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202202591453","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6cb47fe4be07a5f22d4a63cba09817362c3e120a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202202591453.tgz","fileCount":34,"integrity":"sha512-3OHT4aGrRz57CMN54uKZE4Ot05JJKmZJ1SW6orFu0OCQG0OIEI3jqgzMzjvvzzBYo9uVpd6nz0/dwQ1ELQ+u2w==","signatures":[{"sig":"MEUCIQCD09uP91360UxDOK66RTIdoHmU3zTEh917t9dWuzK2DAIgSl5+PtwrEF9ykIxD7VuJ1H3ERljLbhB53kNwQJlpskI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh77/ACRA9TVsSAnZWagAA31YP+wamNq20tn6ivr9h0k5S\n7T7rnxoJEv+ETHKktWsqZhcyR1Vn9PROGn05qcvMEFBaKbZTu5NUrgx9sbAW\n3ljl/o5lDe/194xj0xnIQ026b1xfOQMd62ogwS1rUkTVseXVyGlOZX/g9q/f\nEcDFfHgRuM7/DWXeYHwx6wHZI4vIloX68agXOqyUMirHKhHkUwQHET5Gg1pS\nCRffkyDI6OmmfjqwJVxXmcQKWtBA4BQ2ropHOBONKLaDuuJNhEr0JQnbSkHl\n4pmaNqll+eMQk7FPnErKM0BwR0svDSFLfdiA8mq5UuVlFujY5eyKJQSePQal\nV+BtlSJtwdDyKPnQaUyGPxWPUWhBO9vUwyo2odyrLYsx13JuXy7yyILIkfGS\nsJVKvxfydITigBCfn63DvdwKdDUzROe1LzKPqpVqJhSbongoPjT49zQrUzI7\noEOqbk8g1fEUUE+fd2re4mPHUYD5F724d/zzrMuK1iz/DlSHQvayEB13fcmA\nKi7W+bNvq75uOSyxF0ucAECvMrmzKAMeL53LAV6jCwFJUQ29MP4lL1Jo8bQ2\nJkCsKkTD1v/KhN2OkNgFa1ci1dIsGSWj6iKm0IloSFTmBwa1CamaWTt5pVHz\nv41/XS3CzfwewCeobVe4nLYfv9E17pJcIf54T0gXSuF8t3WBRRgowV+9J/Xt\n/bB4\r\n=BPaE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f4846a64804ce7a00f8c34cc8f7cff8d85d4861d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202202591453","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202202591453","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202202591453"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202202591453_1643102144081_0.8978077543023326","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202591937":{"name":"@chakra-ui/system","version":"0.0.0-dev-202202591937","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202202591937","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a8b358ca7481807208ddcecdd0150df245c8ea9f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202202591937.tgz","fileCount":34,"integrity":"sha512-NdbQPHsY00BSdOhMdSM98JeBPmGW4wJyyfLDGzlFUEIs0HfNziyjqg0d4mv5/WaCn7ZrBsWaLIuj4gvFkdsyjw==","signatures":[{"sig":"MEYCIQCK4v+pWwLEp1lFMCAOSoBW/C7bk/D0HBhn/r86W7o07gIhAPWGbvSb70U+vO1pd8sAVL0Wm1Y6CRr8N+q/RKmKZ6gK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh78DaCRA9TVsSAnZWagAAZgEP/imbzsmxdci7mPUmko/v\n56bENI6aSfH4GWO5x+oJdVtIvYHNBUaJsM57PdfOb5LR7JkJilAxVAmhGG95\nVEV5JR263tl8dm6FWUIQK0MNvxYB6zj51Xr6ki0pfPJGNGolo4l/toUXMozE\nRbc3/Jd5402/VYmymrZP7YlAriS0NGbYTDkf+Ot9QTRZgXZYxe7XZ1tBuPzf\nb4djCBSr8C4AbJd4aNZrT1nTJeEkRW6+pMvw2Hk/AeCZKOpUCHbh+adq9nSx\ncoIibMx8mbxEMHA85+dMiSG7UAqLkDblu+0pKOqPpCvwxzrbKDsfiYpPsaO1\n9SgXmInFGQTAMc9eLWE4CDCfZlbnmj1JSArEHGhrdRioHIX20SeJFZyymyXp\nJK+R/nznuMRi3At+eLBo64m3aVgG5IyvKehdvIzkfY6AIKGFQfACXR29ncBz\nywWqc4AcLC2FMrn61pdqtZxrVzf/+xF2hi0yA9ZpWehcCdLN+piK7T9t2QKD\nv1bed/jwIcHNOG9LR8B3SJBUq/c3cHIsuYF5cAiyqNNbSfnzaatPIUE3JInJ\nORbKXhJTHaiGMm5f7IutB6IdH9jKbtXy5sS3SRi5xjhL8Dxi8s5n0YBBq8Af\nXgR1Z7RiwC7+fEBo7AXMWdqb+GGeF7XhAVpfxCFAL/VkK+MGqaCMZl2Dx4Jv\nVbTN\r\n=YQiy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"39c7b1664ad18aec22c2e0bf5e92ee32a199bac3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202202591937","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202202591937","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202202591937"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202202591937_1643102426335_0.7734751048380748","host":"s3://npm-registry-packages"}},"0.0.0-dev-202202592640":{"name":"@chakra-ui/system","version":"0.0.0-dev-202202592640","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202202592640","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0b96b352415932e0a0fc75f52dfdbd7fd6638e6b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202202592640.tgz","fileCount":34,"integrity":"sha512-ULOsGV7AiRpFwuNws/sLkq27XbiFjS3z2eB5GFoZvyZUdscfJ866PVJTeSsTog/FsnshHgMkgkXTeFwKRW/Mdg==","signatures":[{"sig":"MEQCIEtcpyNj+vOl/aof1KYY3E17AGT4LxtrAWv8FHdsnr4tAiBLvxSrTLz/WKSCCGXsRaPlL127qIrNmJgYy7oHGlS4pA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh78KGCRA9TVsSAnZWagAA33cQAICxnNeXZrxlTspeLdrX\nAmMR3cvL8I4bkdNXJlV2PH0JoxBgKb2MRDmY2HL2gukeAQHUbMT9VsvBncfc\nqwxUJbsB/U5fOPTC1e4IthYm+SI3cjYwVMrKtoLAhRqf6xGCxJcan/yUiPvr\n9PdVNZHTvv0jz1w71B5su0t6qQz19rsRHQSK1a9rhFsUHUFZnKsSOFi5mw/e\nQQwPW2gs9XQYtFO4kXjtqIprr6iq8+ZMgYsrQj6TSiKO3x539aOQSTuiuBee\nZ5RknoSCPJ6p/N6b0wbKWodvK5W9Kk1u0Ccg+pRstvVZN+QTorsUs3C5cHZQ\nGQwoSAQV9oWeiG0kI9XgJxoEsxviioKejLvW9aZpZmVzDz9Rc1wJgupCDCAF\nyTxW9ZNzFuomawVR9VFzp//ylCSH/N0Ky/DEZuwKwnhwYjhFaBgTaA9MXEs6\n0Qdds5vaBWv0++VEWJdj/kvEcSYOVg6E4hqW4EKCKeMch5Xgpq1MquLxlk4+\nb93blu32n6PYskKjH11fFIw7DJvVWKZqTwM5qHyzIH0bRcr2l1bwZFfgB/Mv\n6eV1SLVjM3+OHtccKl0Ita+Y1ye+NkdaN2IGbUOm4uSFSj75IHNhklAg7H8Y\nUxEXvHVEOFxjRZyE8LD5ztClPB9hsrl60mCjr2h4uH1mYMTUPnZAQg4U1CH8\nBJhD\r\n=gRP6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1b31b374cbf413a551b8bd288da69e35c6bb8379","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202202592640","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202202592640","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202202592640"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202202592640_1643102854746_0.3778421703344539","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220251866":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220251866","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220251866","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bed4f2a9d3e6e08ce54b0a233f38637daedf50a9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220251866.tgz","fileCount":34,"integrity":"sha512-BdImBzLx9UuRzC/OXoBibIuV3N4XieEPoTuDHY+tSYCCLLW39TB/m+AZFvZetX7x4FQBo272Gnlrq3DvhQEpAw==","signatures":[{"sig":"MEYCIQDzVEn3VgP/PiXT5Pe+phty8DTQTFEnfgDEgzD/4cuR3wIhAIOOnVzsFH8IoY9Dj0N2ay6KrMYSFRRaRzKLO4+L15Me","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Dw8CRA9TVsSAnZWagAAUmwQAJwwvYNfnUeQxYi8LFjK\n3Z9rl4DhKzh3wBpQ2lSi48VpTCXWb23TsZJ+61mgntPu8rZ056HLewjPKlYN\n2XxwnWkXHQ6X7145ehuK8mzE2egIn9J/TXtT805yyqw6uwtlMm+8sobBn1uy\nhI+lNWrOzQE9e7cl5yuIfS3VDzHsD099l6mcNYGvLbJC5WJL2G4ayMgrN3qM\nbfGe5E5dUpqgVserSTUrSRTRcZi2lciMwAZu9QOuo0ymOoM0IQD89OtLf8Hn\nWEYROt5572rdfxmgSQIOMRZ5O8IAu2g/J01rWveV7WSsfPDAsvWhIev0mNhk\nSKOXCHdF01w8DY5t4oX/LqkiWnNPZKaBk3t026X+fivkTXxO9YUpcNShtiU4\n/pUSA8MUcalIcbV6prtMEqUK6oGM45i7RT1gww14IbcsWKsrgwaU/3Ia8ae7\nKWIFs71PbFE95T0b9iYpMy7rwee+WtCyZYmOrmidPM4Mjf07HAQ0FZSxkzvN\n+s5XRGvlGXP7StXa0fMqYTvqzkVYYgGUtyNa/lXCTEEPmRZhkMyIsUQOOfhF\n5kN5cIw+dWz/N+j7GpQsXODv8FB4yN1RIuT7bTuAknapaVcSv4qMwobo/Kip\nqkN+gHQv7eJmNr3AugwQqFmLg6uKTgadWFTCQLj0eLXjpd8/VAeEt+K6E8QQ\n/D4l\r\n=HOIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1d6266a4b69086a2bdd69b3a110678c16bda4c4c","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20220251866","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20220251866","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220251866"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220251866_1643134012266_0.8272406746630545","host":"s3://npm-registry-packages"}},"1.10.0":{"name":"@chakra-ui/system","version":"1.10.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.10.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c3c4ede9c86c771cf936d6ef8b852127345a91eb","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.0.tgz","fileCount":34,"integrity":"sha512-h9H6PRGOcFxFHvNnobg8dgPmy/wAuQ1UNhYO5VhQvQlPeLOxAMJxWaYpU7nP3PeaPed3GZnWkWh9Vz2zgL4RVQ==","signatures":[{"sig":"MEUCICj37ayg10xxsr3phxfuJP25bqGZxp6CZHSk1z0TV61sAiEA9xiuEfDPZGn9Wf6UBdBAIXLuTNuJOcTIT9nZ0Gcu874=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8DxkCRA9TVsSAnZWagAAoksP/R4UHVD4ZlHSBdGx/LPP\nUIE6AWqN6F7vxvd/uoO+H4Q7vegHpdD4c7lO8Q0+975hMbeN9glUufTbMUyS\nk8DyWSUXSSPbjR3oxhsRyI4UJdslpxs23DFKu71Ib41/l5O2u+w85vYGSufG\n0s9YeiqO4CL2FUiphU/lwXHt8Rhy3Yq2RuDZJ0Cd7OztyK439QEen3MPHRDt\nXxw04iUj0Kb6QquVRvRH+hHNJEvsndOA4GL5e4ir1q0NB0jiB2xYMzYPGz/K\nia0oTnyZFCHl1oKjseRQfbdghZxFK6AXfPONo0aJn20ml9Z4B1YHFsUsq6Vf\ncDzMCEu8+tWeeuAer6gmVpsRK/yMpzOSx/8/yfeIERE8BEffzgEplldvxe7j\nIMeFJnmZs0R08nOcPGjH9KU3TtFEJEI8dD2UHbcjM6UEf1rVRu7HEd0ty+IC\n7BoCoStDYVQQbCwINeMZqSGyD7iK6vYjz5bqrmSkPDrz6I1e5gaMcIPlvbQn\nFIi1Le13btcJMYpuHQTStcmwRrG5I6S0hIoLc+0qKq2Ftc2O1ZtvV8n0m5NQ\nu+k40Nb1Z5IZyzUavLjHvTEl9gPDJghvM6LWPLfuNufEyKJ7x/+AW6JEVOcu\ndKJSH3pmJ3wskt5Lo8O6OBBoSdqzMsSbqvzZWZjCcHxPwxYxZF52TdW7fOC5\nPimw\r\n=mID8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b8508b0f3f99e0ef04333812938efad93da02dd7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.0","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.10.0_1643134052830_0.3826337313009738","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022026181758":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022026181758","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022026181758","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1c516ea715ca606c1991223701113849cc541e95","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022026181758.tgz","fileCount":34,"integrity":"sha512-5yi6411niO5LDmerdwL3X/Pqvd/z+p+gfvxBU7nr4TUp59dPrzelHquZDv3MZ0XJLE4HyLaZg77b+JCe/6Hi/A==","signatures":[{"sig":"MEUCIQCfdg7lBzLccr4z7kUDS530LzyLEWvgxm2Cb8OLSHCb4wIgfhNRybgTKBcYhcAaeDkNFWJPxScfvlbSmPi9Hs9eN20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZCCCRA9TVsSAnZWagAAXUQP/iddFMdlILAMnzDnayV8\nAgYs+HT2C0xcmXVecQm8dItZ7fgaHf7SpYdpgWK7PpN+D8pukbDQVuXEbb17\nl5Vb14tN45mc+IXLg8txf/HPRByTd7ilF9Emi7qSyax6duIl/BV4pk6y69ce\nCNDSsfNiquwly5bWOCI+yGkN+5SGeWQoNORW9HiscYsTGSg1dR0JGp5dyz1T\nKCNFJvKzfx0WToAU/HwRz2dy+NVGdgsuWDXqi8cI/jukwoMHTnRMF7VwXcV6\n3wdi/FbR6LG7mJbuDSn99ldMJWqrhSi+IU6fG4LPfEf+WeakajuV/talY7YU\ndl/+j9kTvxha2Pvi+E29UsEzgdD8YJr4KzP5nRjhWpO0xGhbnQGfSJMrGd8b\nKiJ/4b6k2125kb41Xa4GgeuecYmT/wRuZ7DoHu5RxalBVRnhkCITGNwLmBLd\nNwz6Am2++ICFZV4gqdOSBC6BDnOP+8lcg2/5JYE8cTQ+RSv/T2PyO0tF19sb\n9B5syr0QVlfxHblk15A39tbY8Eb8b17dTj6yGGd+s8jneiWbNGmwlm2XufI/\nAC6hg0bNQ7c5ElHDbbLRd7fJoLk1/7WTsV4oM5Ns+LH/aZRisbYusi0cclbO\n/A7CoCGgYZ21qOIKACiLFHJUlekl/vnMwKO4WACgOOku3xJZmaQQ6K0Tmjaw\ncIFk\r\n=FQQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b2ca7dcfda51c801870c864e98dc23b2cc90da78","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022026181758","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022026181758_1643221122591_0.9679044137858934","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022026182926":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022026182926","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022026182926","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"311836f19b5bd1068f69825a17aa5b308a055e8b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022026182926.tgz","fileCount":34,"integrity":"sha512-EF3Jm9xxXoatwBJxr17d+z/k0DR4M/utefhdU6BOocCTsZ0I5XcqPGxHNJHoapbtGvqUnkDvHtYproMsbSH2Qg==","signatures":[{"sig":"MEUCIQDNIBoGbyYesZsANBubcYl2f/CFsTRsQTn61LHl7VHWrAIgX2mgLVsEMZYokdVZYkM3ms3giR9/NcFAMO/MC0skbS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZMvCRA9TVsSAnZWagAARrIP/3MUZon0HGZh46O8TV9g\n7wRqdVDsis+lsFJqSujKF/PlxokV+ypY57o5kwgnDxN8CWjj32FqxyYeD0oz\nR5gla7aal3JD9WJfbpRRQwxq/ql8ONuSQQ2KVkpBbhGhHi7kdgw8UhPfH/W7\nDtGkX2/PqciSxbaXTp9eBkNbGmGWhAJq031LoOLw6YYmYV0EN05KTUNmMpri\nGCLT3gDssQJZcl3eOqvAJh+ITDgG6sNAftoRyw7TF648BnsdOxw5wKYSlBlT\nMUM590bGFgEdQwoK4JaUd8JYfFalU9lNWFTZRzyNCyE1KII04k41yI+2x0r1\nPqUmpdH+0362fAfaCKrbwsMFKijkqXyJJAVsEuJTKZdEqyEHTQXsnUhq4rkY\nmgUG4kmKPm/l43dTi67XmoAi9hEupCJUwVY07Ljf7hIo/uocqJrsDjyglNxq\nR4Oq74iphTQ2z74Jo5xz4Ry005LZwCztTUDbyd8HduDgq+SeDfcbBHWFe36J\nd0WZnz/QucD1Z0P0dxAqU+lnXx4SSvAacDv80MDKvmWucF2Gk9+3B6qcMOjU\nwXV3zDH2x7aactouwbG9K12qCCdh9Ae4SSns8df/+cKLHvqaeyxR63TXBgnQ\nm5mhox7fNLpLM/4CAZ8BeDXOvfAph7qH3LOMlrQcFwD9/P+uSVHEtM/cO+RB\nB94L\r\n=MgCm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1bd1f2ffef44d810a099b001be98e3bfa229ddad","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022026182926","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022026182926_1643221806863_0.972766988425199","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022026182947":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022026182947","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022026182947","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"},{"name":"with-heart","email":"mark@chanchan.io"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"828b3034c35fa4f96112c7c8c500dd3deb298c6c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022026182947.tgz","fileCount":34,"integrity":"sha512-dp9auWAqW/17kQMr2L+DD60wJBE3s4Jae5rBEgWX4oPwPRiFQPVmbZOS9kXeaUGuk+EnFYMGVLlzfpQU8Pf0sA==","signatures":[{"sig":"MEYCIQDzXtQDoABPO/IDlxQQt8njbqn8mYVsoLnB7FRzWlZ7TQIhAKr59taD/pxlgqj1enbIkuqbv44MAKSbM878OSufrwlZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZNBCRA9TVsSAnZWagAAlOUP/RMI41b9Ekx/vQnNwuyQ\nbmZLEaODKdI/Lw7fBv3HoyTezRtNis+hnHz8eVBlmr519z+QUH9jrEAyQU0F\nsG7BirfG1wMw2sUC2RIbg28CynUiJoh+0hoy4um7D/7CMdSiwAKzc2lC+DjH\nCvlaynNNDkB/64ZG26tPMULjkSzPTWxka5r5hG7oH6hsMSUUly+7KDruSfJG\ndR1S6kt4zi1VjPDe6jWrqGDj5SiA2jIvW8WG7xmLl5NOVqL+PM9qquybmfLt\nUFAQXHaFW4Y+rx7Mut3OkNSp/C/Ur0svQYRYMntSSx7I8qMqtwX+3RqvnHHf\nxYYKsiBuUPVGtEs5W0xnr7BlKYyQTzfCfoKFEa3npMfxtCUOCDdo1cYtnMCh\ncYp2quM6zXsBMPsBGJogzO3N909FtI1reYmSNIFiBl8uI3e+PHuFKD7pW8sJ\nC69jTBsYe+Qsf7OIiEVcwn57p6lmzipimi3FGl76jGl+2S/VmztQe/YuNws9\nFoPjDslcFteg8Mu4GINr7qhUBSz9ZI/7H4ug8bdq8ZIsH0ReHf/Y4h8RAHYQ\nvfkwbL56VVAh2xyR8UMfurctNSUg+ffMj75u85ecmWgpmXa+vmsKTXGXZEAb\nlqTp8EMJbZM1/MFtlz+qo6OsP45vyvFVCclN/D3FHeSTlmg5qIDTqjb1Dw5P\nAING\r\n=3iFd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1bd1f2ffef44d810a099b001be98e3bfa229ddad","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022026182947","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022026182947_1643221825465_0.7293692170289117","host":"s3://npm-registry-packages"}},"0.0.0-pr-202202618407":{"name":"@chakra-ui/system","version":"0.0.0-pr-202202618407","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202202618407","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"55ec7e2bcc86c2838f5f38121c5ed2bb14d9eb7c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202202618407.tgz","fileCount":34,"integrity":"sha512-2qEbdpvZaJGhO8MRh3UDQca8I6cWKZCi7wNmkCSmYRMCxkL2Zots5nvTNQ/8pk4Blznja0sOW06c94g3JevPYQ==","signatures":[{"sig":"MEUCIErJixFw1JqDL9waBXipnl/2shcAnfXC7TSSvTm10a7mAiEAvmhnntPdcfZ1oueI0YKVGiI7HVvr1sSBK6Ju5GMIBjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZWpCRA9TVsSAnZWagAAM+8P/18GiWWL8yWDmV7iyV3S\nDcNq3rHZwYlqsQd0gZYGdNbL0C7hmqjYy4nh8prm4jnIBbv7wIIiOiW2ZJzH\nXRzlj6rJ6KBov2CAT/mkB1AqwQ45nmBKszjoT/d+j/JLyXPwEA4I74wBlA+l\nl/y/4GkYPtNgApvpj8lQCQMf1Zh0UsldQA8WzQQyQtwFOSDYrSByk2S1tF6/\nlYzLg4BFkQOMwty84TYCqri3zdM4aO2xRSdlh/r1U8W9s9lY9uiOiTG9rBQz\nLckgKhZbBlyxu+tiNsso1qG/gBjMGnWiCCg+qbLHsNnpXHsiuMLWEOOKtR6Q\n5JUYa5x1eKe6uYP8f+Zy+Uzm/PJnD4b24994sGH0AR//KGAbnRmYZAg0o4RR\nyWCUTnYcrmcBlL/ZaniUV4g1KbwheAqwzZxlwZy/Jr/B9PIee+dMOvuj/1If\nh5BzIZ2rgtpBEkszLA+KSBwLPuV68nVc9Os5bZsIfZJxrxdeE1CCMBXkc4Am\n1vIJCwIcpaGP6JnQy3W37UBXXtiPxd1t64X8Z12AuNTFrE6QzpmLT4KAWp49\nY3LJjG5MsYfXDjx03e3xqlvz0jvVEhIt1ULrm4QQ42huZ/UIVgIdsoDx5cXK\nfhpHad2G0W+sp39UrKVd7EmPIuWTGlPxpLYX6byzis9u+f8npeOTZNXaCcAR\n9AZL\r\n=8s1D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"14239a2e6eff4ea17b2eca405f52fb26f02c48b0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202202618407","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202202618407_1643222440996_0.003593692277598315","host":"s3://npm-registry-packages"}},"1.10.1":{"name":"@chakra-ui/system","version":"1.10.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.10.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"799fb473c0309baa56c6096cc07b38abdb5ce65d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz","fileCount":34,"integrity":"sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==","signatures":[{"sig":"MEUCIGzDmsi3LWdsdUSNyaROK+PZAb7jSGPv94bprRkpFa2ZAiEAqYAr67y8fGzLrocKwQGk/F36fNOlkBEgmlEBIth8vhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8ZdECRA9TVsSAnZWagAAKjIP/RIWl/Dvs5CJOBF7Y/12\ne76jjifWnw23Bcao/lxMAb/tupXAri1db4hm2BpmpEmk+9Z3LXjoPjy5wqrX\nA/2Gqbe+sBvHvq7INlBd8C71yKUNRg1kCPkK9+HXKC5oowlIj1ehyPJrhT91\nI+9qwiR9w1fiHmhXn219/VgXKiVE/qEgF8ETjFsHqqzGPFa7KeiYVKBRO7FQ\nFUo08GKVmHUdb8FMPtSJHf84Mf33wIkPTqId5zfqMqnaj8UplNq0U2jzys1v\na9DHn15wyZgaHDpMCYlxvCsJMP1B4U3r3XHZilMxXXEWsNIPBh52WrtZy2Bw\nYkrgkpf8vC+Agdo9/OW9porVQOEfprv2peZm8/zusf6b3OSpDCpMkg3S6W22\nmqRr7j7XEU6HuMWkvUq9O6LubaWCvff6T9D9F2+xZeqxlVZWPmYsVfcvv8/R\n1F+wtYcJ+o0oDODVBt9UyBZHE2xfmkUUF9/vivzgeMveM6J7W8PYEa5CETZF\n2DyvIQiYlwpXA29gmonwutLvhkJfeaRqOFtX1D5zNz9nhnHoLw5BNR4wW2+z\ncQp9c8sWrSP6nc4Ed8r+U7wVEzPVymhChSDQAHVumwb1C7mJYYkaf9j4vUo9\nyu/Bl+k3exGrlk5Ua6UPlBw0DWXOZ59C3+p2Oapnc/0xTIfP0lo4QEGYZJSw\nXHck\r\n=k9rd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"8b1b0d24d22441e391a9b26f5f7b87abd9622aad","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.10.1_1643222851958_0.960600154396176","host":"s3://npm-registry-packages"}},"0.0.0-pr-20220300344":{"name":"@chakra-ui/system","version":"0.0.0-pr-20220300344","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20220300344","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f676988f32240a1872e82965447f7fec7d16c846","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20220300344.tgz","fileCount":34,"integrity":"sha512-iAedIkSqjKTJlTwEwEd7anFY6WmJKpfwOSBgxBKIQPxYKxDYpNN1D4SEFaN6tJjQe9GAhhhRBuoKpnLc4mI7ig==","signatures":[{"sig":"MEUCIQCjxJZsOwcdfTWiU/YkSZRc8ET7S5xj4JNdu411YH+zUAIgMiOuwfMz89okeolhT5ZJyW3vEaWGrKdBSrTMIpNBtxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9dYFCRA9TVsSAnZWagAAH60QAIMgwVPv0eyEcZfMgtr2\nsVWsKL8F0QrPenFjXkeRG9INHJzHnCajGmZjgoHyuMNOcn6Qn31kjz2yiLRg\n28x2iXe6TyP/BSrgYDCvpoKRpX+TNrh2l4MHO21t8C2dto4h2iQtcSHePkIA\nSGa9jTzH8aCIo6mOC5RrBvTiN3ZLTmwGXLn/AqCgqZPq/giBu12DgifZGuwn\nHs02v+KFW6kPi4LeAVWYUXWjSV5FqcxgF9fJywNVmHjKpLxTdGEEl2otDkgt\nkanyNHexaMhPKYqC/CWLoXkfHwULF8ylb5XFmh+sYY4fiUK8G00M4viivaBE\nijfvc44VTHmcoIMHjGHYV4qHuTHbMYf5ns1SQkp0km4MooNTW526530X0ufN\nak3pSeLHcPkTZ56HqKGlWUUfW9H1IPQnVBz0++hk1Uwi/Pq1IuYeREjdlgvg\nUvnALT1IB3lioeTsspZMmDDJtRC3TwGnyt4UIY4A9sQ+/S8ih1ogHGPlc7ZF\nwIKt8WYQ9LX3XfIVLoCaNyYtOV/hgJDJMPL6U3yGvggWhGMferoRJAaU8meU\nxtBEetrNiRTw2OUMn+RzePvkKPJmk31Afgxe13BKEAEtfXznbjQioMWt7Au9\nC/i0ZBNRO8jLd+cUb/yjbOJZpBoEGCv6imoqqylSsQlNqoxUwS6pIN+8coyZ\ncrFK\r\n=cdU2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a62b5ddfadc06b2af6d674a48e42d17aac9f93b1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20220300344"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20220300344_1643501061084_0.8659895457239806","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221152957":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221152957","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221152957","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ed55b4c2b91283b016e8312abd5489e549c10a9f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221152957.tgz","fileCount":34,"integrity":"sha512-X/7GFhfKEqm38qkcCYd25uyD39jDWWoj6FEw0GZ/RgT/slfDnCFpJHoQ6UaiQyqlq0QTXTb6VGLEYrbB71Eecg==","signatures":[{"sig":"MEQCIC2MOzl1NjggbgKvLih6OPi/D659WQZnU6Ma6JEThqfgAiASpsHGbhVcNzixcdDefYvxbEh+Rajv57HROC3fbYL1kQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+MWACRA9TVsSAnZWagAAJbwP/ilYqA75NtVY+uciW2Y8\ncuCU4Cn2GaGuER+ZGnzyEBAMjyxH0Ijq/WLoc9ypumn0NTRVf8C2meNiCyr/\nvlK85/MP8cdBhatnsVz+D+zrSeXBdLAB9CjSdBliYxSIzDWXTBVAUfrYOgBm\nD6VqJ3iWBzkyQH9zJK4p2OV5fBB1TiXo3KcRozImxh3n5X+QXx1toVZkwrrc\nn2HLX6SSHDhud7uESKq51F6OG2WOwhxpAAxnsbz0Iq8YbuyJitV4IWPnW7WX\n81k9JOaEn9Xprjku076GovYJ0y1gxOFgmbHEZHyMSSG+BioZWQrPjKLmaoeC\n7GrWy/v6UNVu+m+tujWMCkZvT5ryIs1q+dLm6hPthMBw/+/4FsY59+5QdFvC\nTpyvZeOFjKyQ6QtzuKIXhQJAaeo05dangdK69iq8YKngjXZ18q17VmdeAMyG\n8PXOpELmLbwbVE2lBt+X3dUYRU7L5zYBICCYUuaIOTDzNdf0eLNeWmHr8Tr0\nB4KwhFCHrgEOxxQLu6WxtZK0Rp28br3w6mbqocRZaFyGySapyORfuVVq1M1q\nq95GVjAIKPFrtravVbK6YgdrA/raEUP4jbeFLfgkRxwPkCda26DDmGOfySkJ\nMogl4Bk6J4GOHBm6egdg8UjOpOsaBipO4xamiXcT11k7qIt2Ctoyab5HCux/\ndSau\r\n=paSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e1057b085f47916fb148561e40fe0b4afbdd633f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221152957_1643693439881_0.0224684663768997","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221153122":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221153122","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221153122","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fbc5f936d62806d8d18b08a012ad98588defb111","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221153122.tgz","fileCount":34,"integrity":"sha512-yPai2rkybQ3AG5L00H6u5H3FuFTHtDrQLL1scHMSomPyS1RZcZKrxz/BrKLMQ+9HXOeHq/kMb3U0CRk33tIUsw==","signatures":[{"sig":"MEUCIQDPYq4eYq0E+fy9qtfIIjpGR1nDYA2pB/ErLW9Nw40/fQIgOF28dscfjCzGCOqdKEER9l3nup3xNuSiITU8LCb7xGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+MXRCRA9TVsSAnZWagAAM9MQAJIJbT256AvCyS5CRiwm\nP6y5D5a+BCJgahL+cxiifAtmZdGPBYTxiII0sO7RK2xLAV0IxGt6d5bd/6ZK\ncQ7ZKJjLHS4CJ4OLKgv+JuSkihSHAFrEVbFbhv7LnLamBCB+hnJkLR2GVhWA\nEXl1Gog0M2mbjn9fb4CLjzZM89NnIfb1zKngS41CqLfekWGxKlvgvrGAcKYs\nqurJPNVlmPZ+dI/3pvhY7vlttzkhoSXUvOfCaL+q7MXPi/ZJ+k+rmoXgxX74\n2jc/pQ712JfEXRh8wLJHDY9KOkB6n5KBhI0Tm5QflCWH/m2lILRWraNcgbdZ\n3uVAUZQTIB0DkYOOIaC93dg5FfVXwRbE0VtBiv5v+pv9Ok/n267YCSwSleic\nhuA6fLBmPS8ntAQdCG5DBw8fWZU4gMVJU5hdjJS2Umjo99EppU4xlFoyHOQE\nIPBEd1RDxX9X5ssWDfbaLe/vVjbIFmNpNgF4xAUFbiIB/FMVjrR2Bv+XAgDk\nlhd+6oHsAE6Y6swZo9sEzOR91PrZ67nWO+y+OPG/qRKaPatVWMSmdO8d5m1q\ndGevFlaa3G6G5opMjNDsJp2a5aGmUL4TC9f2HjCiYDeStUAsjZGZvzrJ2alZ\nW1uvgTXZ/hwjjvOYlRd8ZQm+3kTJ4xjxLdN4Vsax0oZilG8NY2Ecan04MUIp\ngb/o\r\n=UGxH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b2ce85e29e16138bf67268fa4f2ef56de33c60f0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221153122_1643693521717_0.9162667597020793","host":"s3://npm-registry-packages"}},"1.10.2":{"name":"@chakra-ui/system","version":"1.10.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.10.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c442847753e522db832d2ebe61e8583ad98c7dd7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.2.tgz","fileCount":34,"integrity":"sha512-lIiwF3HQEzhld+TdfOvvWgRoN1gFLsKNdKPAStxFdvIkOLmkU7vxX+M5LWTXBU9vmpqcHLCYF3Dxdo11QwwBuQ==","signatures":[{"sig":"MEUCIQCw/7HzKqXeWi+rRWMiebroXqNnr6Jfg/lPhUBjLgrrqwIgTnrY3MA28p0FmkOQqRKFiipJC+xUPoQxoDIY0qX6Z9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+MaBCRA9TVsSAnZWagAAcvoQAKMEo13ZnMWJ1Pzgl+3a\nCHGcizEy74+IvIhij1HqMKVuVdJilQq8VGzim3HYgQuSGk+oBSYMfuxcBRok\n1UNGn17Z3bW9+R5xwFtHhOeL71XdnbEg8rYRpNADNha/GWRPKqXmHJspEUJM\n3EE4jkQKsWYj2+NwJB7M77kwUGwauazwvrIIg45K4mfW2LmxzKXZse1LybtZ\nmoA/f/PX1QkSwNhSzkFdrCfWUS6/THPVBIbsGO8SpPPMPtH/bsrESWmhxbmP\neZc/MbGwSwnZlDmdQAnZ6sVNOlmNyA28+NNb8YkclwNqzr5Ad6dmgprdImoS\nGyZdotLNIzHo0c8DRy6temsahQ4t192oTfrkhF3di1fS5edSE26RiltIoypt\neLwlX8TKoYlC1H3O3kE5kxHUfdtjvWsypEiQXsSrB34uU2suRhUxqGCCrXaF\nA4CVBIYLrzPsYKS55T2HukD+OJLXEhFXN4Cz2S93tci1a6rAqSTzjxZoTR3m\nwgZJ1Wkr4XrlNWwriHB67va+q3fDG7mI8+HYtSGCF6ipdlYXjblaHmy9EabZ\nXchsNCbH7CeO4zsCrRE8mEO0w1Dg4k/FKU9qblnPGVAFLIu+5GQ6lKhtCGfw\nU2dP2X8vR/ChKROqwY9rDQCxM9sVoFp61j27Nuvu5lWlHd8X0j3/iTNn55fD\n6ufu\r\n=dQFD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"381338ed8499d69979d2dd441963ae8f3ccc0bb9","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.10.2_1643693697079_0.9918318649488644","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221173228":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221173228","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221173228","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"994b5653d60f491a4547e812b32862a25774df06","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221173228.tgz","fileCount":34,"integrity":"sha512-73F4DDipxfeE4O9jeazXRQvtzZMyLcQP0ztwgDPQ9I7+6tEhHosUaa5rwr91BUMyoeuOhu1iel8evsgkMPO/Fw==","signatures":[{"sig":"MEYCIQCU28EdDcWkn7ttMgcHa9i9YKiP1yub/1R8md0OA88CJwIhAIpLdXAJ/1RztlpI5Y+ESeVBLc3MoSUPfuQpUv/J/wb/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+OIzCRA9TVsSAnZWagAAgTcP/RzrALMfcGf58ruEHoMw\nG4u9ufMMJ/UIOZXQocVihjArjL/h2Qgnrt48LZ25cUTqLqqqJoxsTJWKILc2\n4othENpCQK/fcbJJxWrAW7Rld0f2C8+nLLy52UpeLX6CvYvWLjUvPp1XUTOa\nc8ZD3bJ/K2hR8FXTX+52gSBInj+Jn+Yl2mREKBPbNsazWRPCZWU0N47XKjb7\n5B7e7IfbhK7gQZNDUoc/5s9Geye71Lb78Y1QTEY8L8AtKEFJl62hwcc8kvbF\n2MrUzAolmkK4vjO214G0KkeZ/AICUHZHkB5/Pj8CMqzMr1nY4KYPEus38czH\nnLK5vZlLtLC6q6Ae1/pFI3NYoi5gwGhY2bVLBMLbaCtG67ZwM/IIn8urUdwI\n3lIEJN6gruJMZYoC2JyGIvkBJQFf+yBXDuDQtSgpWtaWdpuGujniQR3QUHfd\nsGlHpSnbaX/CGfbByO/YPI0GAiY/xp5Fj6nDbT37OqH7qeLZ/Ir14S1Q0efD\nBhVOVeiuRdi6xEY9MMMVkKW2GAxFVaoFg8lYjMnDDFI6Py3uy/dXH1ymL+dc\nY/xFaUzmvC0lh4sgK6tuSfvShhG2+aEZnrpTppqaq4pKZbaicOuxnkuQaAUu\n7h1+eoGCjTERuuYzxpIPzMGQqnBy3GNEU4pXVkP4v6W+6GgG9yvYyZ/mFvSS\nHAO+\r\n=6eXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f730ffe104bc5f34dc08a7546c51feae821932a2","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221173228_1643700787006_0.6669153912620505","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221173648":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221173648","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221173648","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3eb46b53b88db790bd1ffb476c2b035de6ad5211","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221173648.tgz","fileCount":34,"integrity":"sha512-Iuo7j3C+aGj2rBK059VHAlO8Ghh8QdKNwYtRVN9jwokhzusEs8z3GJMulHey/HNqP/i+YMTJyHEZJM2+5prHjQ==","signatures":[{"sig":"MEYCIQDwJCH57ZVhxU1LBOH59Q25kbEWJ6V8jl4Gst6tDO7aMAIhAMlF9QjvLTF0mF7QW0OWzgqS9d1t05T9OzP3gJBoGgJT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+OM/CRA9TVsSAnZWagAAXIgQAJRutIFrP8vz80QGAv1c\nbMyf/i4+iom1kWuZcjx8wwQDUeody+EBmsc2Qo031V8QlwXni9BmRBPqPZ7B\ngz4A+UATPtsDFjlalkBqSznPlrAnuG/imYo9xeIJfMKgF3ea8DlHAosaXbfe\nK6BEDsv4lOF3dNT5eq2A3cMPKdCHQO4wuSWtKoLNwHS2C9UlyjqCB0m/o14a\nuIp3sRaNYP50ubjDONewan0sYNEpMA7BpiNf8HDtoXr/tmXsO9zVtePNPSZ3\nsq1uEa7EEybbKkOQvyv0y+zeO8GjoPgjF5j/VthhoLZnwdwYTndBRr5YEyCe\noishD4FCDV/DB46Dcb/A3Vialdgb6/vVQGWIVUuFPlScik3h36QscWpg+m4C\nol7y9lmGppEuFqAntVBsVRouG8sSOF70uIwEn6wKU4MNa/LNvG7XaixK65sg\nPjU/Jk56PcvWKAYjbNjhjhJe1nBnLny8eSgzG2KPn9S/j0+921AKArt2/Npp\nI0rcIrfDWXPuSfbUp4fYJp78OwYNa0JwHOEZBc+9IpJyITmiZgWShWxYfolm\nhjJNnT9pgFNRfg6MdImQl6ahyAz9tiCuAfZAC8M0gYhf8OcWIqVdsA1FjeDj\n3NXGIUVbfcxjapu6kGp4amHArGkQrqqwmdR8n54po8pOqZJ//6YSUmq1o6o3\nolI0\r\n=AHRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f775c980f4d1e8a692bc45cb642eea796d4025a4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221173648","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221173648","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221173648"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221173648_1643701055381_0.8402215921260727","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211224055":{"name":"@chakra-ui/system","version":"0.0.0-pr-202211224055","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202211224055","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"82fa4aa6e53f17be7c84faa060c28ec8f040e860","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202211224055.tgz","fileCount":37,"integrity":"sha512-+rV3B5cF9vPHqDm4W5Ub1b4KIY3Ei14/kAAevPMy12f6xaJGWp2O5pBsVQQ/cXlmUYJnQhEAZqNuYL6vYkVzxQ==","signatures":[{"sig":"MEUCIBwFZAp7PucmXRJvi9vip+7yuKbl0LJVj5FcHH7l5PfLAiEAhEcfKp9YclGlqgLRpy9pwbNJjj6Am71hdRZs5d2B7e0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+bccCRA9TVsSAnZWagAA67IP/2QcPO63RhCZcB4xy6CD\nFY/ghqiw4k973+pu8RJnBOhAlYkjAzeeJUV8jPi2/tbsHh9HBnyQkkvX36Cm\nRJtrDLqyKD6Gpq0zz4XbQCGAu8T3ZfHlsOUlOpjP3RR7X3AUdXtNvfs5QlXi\nJqScFzyC0ctdFcEzgD2iRv/SipAoaJ/Btv5XLd6pS1Zijt0ZCpEJmr7h2Si9\nxFyJOnY89WP85aFuV3QCNrPe1j6yfW62kJZOHVIj5PyEDjgngorlJSG9BEfm\n1lVXo5DqHm8Ew2tKnUNo7Mhk39BIo/P4Mq08wk1gh2cEvB3tYb5nHOfgpxf7\nJrIcK9loS2rOEP2xa5lMTRzT3XxomgP6g9ay92HLhaBxiJlm3iUUXVn/k/d3\n1YBrZ9nn3vqjNMVcjAHeC8M6svSkC7Yk/6i/W3G8n8kDTl8M7a2qJilHf/OR\nb/8GtSx0bnB3n5QKUUv/fV1NAoEaut9+Sx4rr6oekmCG669n/DFhEh40GW+Y\naKfqwHHTMSHnwC2G5LgdC/k6DtWjNTPYP6QejUB/EgqWz3zYY7BtW86ERWeC\nCzoVACO47Y+ptnFRjf9gzwjHqdOeiKOL2huM34VF5n6QvVdZt/k6CBTt/E5L\nutjOVtwMqR9KnJNxj2ojoQrSVIAqSUCh9dIeR+NIVmwIibVY6u2Bu+Rvih5k\nxbII\r\n=MU0q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fdb30f65669ac70b3cf3c6b9d667f09af817f32a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202211224055_1643755292011_0.0933004153559196","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211224227":{"name":"@chakra-ui/system","version":"0.0.0-pr-202211224227","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202211224227","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b7a77678caf0439c6e30f069e2878761508249b6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202211224227.tgz","fileCount":37,"integrity":"sha512-Ucw0a1Tx/18zYHlvE5nfhHBrVydI0KtenCF6A0KLkCOP+7A1gjc4B6Har8SGDMfpTZOREhqY/Ul8Y18sFqj9Fg==","signatures":[{"sig":"MEUCIQDrltZGnDip6MSr1k4joQ4kwkKS1G/QNvf+waU0zalLfQIgOIUzmatcYlyxWfDE0VNlKbcpTppKgmDu7tThnduLQcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+bd8CRA9TVsSAnZWagAAEXYP/1pzYOnb5txqn7iK79r2\nOxzemgYl48m1PSkdZTUGYAGNTaWdlFV5TuYSlZLXJfRKLPiTBBEny4IgfURm\n0JrgXJfbnFqIoGxZH9qhkUnAqv8SyPocPRLwNQ2cR8qRITZW79QRFflStSXD\nyv3yTJkpZTYpGal2Oia3FP7JflDnRdZf85SfuXbdqxm3/gt0f3Gl7Gp3Juwq\n2QYa09HrZkU3//+3UWn6RumfaNZ9sGKF9ohF9kVNITycHcoFpoZxgw9iGxAu\nvjbQhmcdVBobIG1bHLf0D3lE5KREx9qY0nvRWAy7trBnDSIX80WgKLseg/OP\neD3DYvb3p+wHfKaS7g71eCH837F7SxabtqOOTUwXRTlXmFREczPcoW8XDVaP\npJZM6VFb3ewR+pm4Yrvc55nl+KZvpDDiIsq8xEqbfbR4GaQ650FEfU/WAgFT\n4oayJfoqRQdW+iwdMXJ2AQ/pBVrG/gB4DiGRxamCzg0OukYnpxKQEewD1yCp\nioiZCZ5eo80k/gidsP+nijaqBxlUVm4f31E4LX6U1x2ss8+10Csjww3BgpNP\nmNHuuV/N7l+f0lwGwVTKjydoDnPLkvDsZzZfaZVTtw82Anevdsq6uCgx2V00\n9XxF4BLoEHmiDW+XAXo8xgA5q5FrVEIO4oSgOyhsxm8HTIbDC+rfBNbO7ArF\nvak5\r\n=/LZJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fdb30f65669ac70b3cf3c6b9d667f09af817f32a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202211224227_1643755388311_0.5025223078945851","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221263638":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221263638","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221263638","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b2f07730e54d5b4acefe71be647fd6dbb1fddb64","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221263638.tgz","fileCount":34,"integrity":"sha512-IDdnRZdAtUSvC2n1bw43MV3LWlM6kPs4kHjGNvV056/pDgZBscieq4LocdN00p0YuCJ47dPhzMmhWOaWZdxhGA==","signatures":[{"sig":"MEUCIGqTTJOge2GipNWz0xuxlHyTwIIK166Vr8c0WPCr7Ww4AiEApVhQaaJ0rtirffOd5Rr3dJIvimfXKAAvYQIV4I60jtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+iaqCRA9TVsSAnZWagAAH84P/jwtHahHeuTyFlB1K9sv\n0L0PTW6Ltmy4tDhE+tA19povE5jS37IY+KUk8/R2pV9yYguAdAN+ChjO+7bT\nZ3dVgDNs4Iqh/zNiJByvrC2ApMjIaigNin7UFlm0ZrnoYeiue/9I3AKTU8cf\nO/+uD81UugS9MqPBFIkX3MxfgUKHbz5r9cnK6m3Ex1lOYdlyE4vVf1cQHuCA\nSuH9nMNVFfObzk10iJqDw8HDbF+gu7PL1prMzpjQSljvHwEszioRRGpL6LcV\nomSX9XAViLpcY3966nEtI10YBkrvGbLq56z1+ZNWdDIi67sQ88eS0IhHKwHw\nd6fU44P7xXRjFDHqY8QKNOcWsJ1S7JYGPp9lSN+euAF9afkq4IqVyNW23N+i\nALeSf9vM8DkaXbCunlUJhM6ery4lAb6JN4MNFJeALOVeu3M5KJNxSXniwo1R\ntA2jUZZgC8ud5tIbPQhvBiFin9KZY9ejiGWoroRkjdNVLpLk/pWHqq8FSkbC\nEe+82XmRZEoY/Sr8gvhpFHby/P9KiMgOKeH71cSfZXomvt7bqWNwaNQrfjdy\nUHZybScv/4BbIjMAAKl0Jiu/Up7rTm8Xdw0C08/lvDXaKB6wqxVQs8to6D/Y\nl8uVAMtMIZJY+kLkjW30Qxwxxy0LRMk1nHQ/CCVF3Bm56rejJN/+fjKStMPW\nk89k\r\n=Ss0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"c9eabd5a0528dbf3870b6e127d0da14b6caad740","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221263638","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221263638","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221263638"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221263638_1643783850590_0.7429471809722616","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221263715":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221263715","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221263715","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0bef19569aa846eab3bd44ac604f6402b625f13b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221263715.tgz","fileCount":34,"integrity":"sha512-rQhtxJq+45rV6GNRbTQDnUFnFwL5mbrDF1SkF5n6WMjNSNkGz2J7tAXkbZy32ea+LkU1YGFQ64NcXn/J+8WOGg==","signatures":[{"sig":"MEQCIBabRcZ69OUO4TRasBu7/5jJi5tFoSdXwswfqfpBZecxAiA/FmuWSXdTOxEEghyUM+GiCnaOIlBal0jWiOr/oazxFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+ibFCRA9TVsSAnZWagAA2b4P/3DQSDgaQ5j5CmD1RiXE\nf1wQL7OMpLQFTURC70nnUz71P84J8xBlMd3kovAVCNiZGVw5UyuPT5qBhVI/\ncQnMcLA/IWWL4tEGGc11od2BGoPqeL+Ojq1eXpoS6JH+ay7iiXb8ro8nEuQx\npLvarX2cn1Y2AcdPh1q1/FCejbnxb1y9M5WiigeKq32JsIaCSsMNByR2uR00\nZ3Gk2jLWDSJZqfTmxu3wSwusCi4tPW4Hr1WHCZ3/fbYXrJMeAc11ncsc3w9J\n8zH49mSjCK83O9lLRDWoCtJVbsL4qAAT+eezy/xgYzRMr8FQ0px+oACgu0Fb\n0awGBqM7Xaub7w+ihdkLaNb6CF3QCsUaO0L9dJkf/njg90qPCPktEwyLSyK9\nO0fmie/0+5Ch7lSsQWrb03ARvmcc58zQT05qLIFgDkkYlvKaPHxMjzwABQ/g\n7QO6TSWeZ/wzZRNJewcaX8t6Nd1mNcXXYvOs0ly3RfuUqsO6D5Y89XIC2Ftx\nR6/k7Pow6zR21ICNoVazCjgARAfIPt7IRgs1Zvmc6w7z1IMYuHhokSMMaLJ7\n+EwM7yHTFOCGaBjsZn/svUEqooggWeJW0qyhhJX9NFHe/LSLHSUk4OAcEShA\nLu5CSxFwbcjiN1nbrpTKDbsYZHPGsC8dl06Zq9XaKt0FDDOIMjxOl3p+dwPP\nTViI\r\n=sTPd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"c9eabd5a0528dbf3870b6e127d0da14b6caad740","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221263715","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221263715","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221263715"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221263715_1643783877251_0.5070695931211275","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221272130":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221272130","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221272130","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4d3b31307345fa844f5a2d80d2390193a66ce78b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221272130.tgz","fileCount":34,"integrity":"sha512-3+kWCA4fH570s9Z9uypbBHo7KheidZXOd7tnMRf1vWAuwBDKFVBPXkhBDm3a3nd4mBC19NDzi5p6PuWxgbotvQ==","signatures":[{"sig":"MEUCICFbbHS/f7XWc+ePlmDIu22wzFwSI0oamKFslRKJ8DzTAiEAjtaxpFhaTys9/h1o0wJ8zhdgd1NdJx5EBF8IFesN9Y8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+jEpCRA9TVsSAnZWagAA1CMP/jKaH3ph5D/B8FYYE1TZ\nHFgM3ITT1UIkFBp6NtVNrK2BOx2vZnSutAslfp/JojW6kAezwB4jPcZ8Zp9R\nxvNDqGrnNNV6YEsO0aIWDiosAjz4Sy1mz9ohlc1kPOQfNhK0NLuw/ptbBnd4\netM87zvnxtQfu5ny2f5gkBjrMxLmDN0SYsBu5is8C4Satw0Ap1w8CehEZy9u\nU/5+qQm4lpvg4P1cWAABgK3doatSa0T1hTlunQYtuymUlnXAoT3D8fvsrsQS\nKVXP/OvNvabgsptaTdQ5/naKYNwzALghnHYhDytxD1gKuSBlcNonR00U8ena\nDPYyNAv9S//ADWESpRlAy6I1F1KU0YJ+XGQuuQoGOk3uScqyXhW9Wha22m//\n5+t3w3DD/j5gh5DafJB72oA5i/ry4HRkbkbXmSMz41dYZvwJTGuwHJ0bFCq7\nb12kGtpFXPhqMSaubDbmnXypSd7vnvUtJEhhDle7Zes5BHjzPMzWLyIGNBDq\nnTTDnd9x5RCASjulg8v1SFNl78s02prRAqPuxN0v9NZFS+ZSJLjBGIs5HPsJ\nDEr0y0TUnaZvqRYJG9VfwUVsGKdgadPgPWo4q81oxhc6KqfyFp1YAeTA6g63\nGlLQuABAq6FvxapSGHra/10zQVsa6nfyCyl00SI5HthziKE1hbQo3xXkHDBA\nDSVD\r\n=SgZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"3ea8fa9b83b10aeb76162450f2d997d87c4c8f6e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221272130","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221272130","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221272130"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221272130_1643786537609_0.6794494900529067","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221272450":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221272450","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221272450","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c80f3f851dc1b46798f90b3d11988a09871ee099","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221272450.tgz","fileCount":34,"integrity":"sha512-Ed2V84L7ZN4de8xKTCxUx6Nc6xTamsSF5Pj2crB6NOlm7ydM9UiQP1lfaG6aaqVwM1avt9AQuMOEinY++FxwjQ==","signatures":[{"sig":"MEUCIQC+JfpBVO0Vd+lLdL/D4/lFO8mYnqlgRcsanpUqIxtpjAIgDjTYfLQM91enaTO34HLGlja9VwHpY4zBLpmJoxbRMBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+jHxCRA9TVsSAnZWagAAM4sQAIerNCXa2O5kJvC+fywC\nzBWHzmPzQugYG6nntDfw/YEAQNVtl9lZ20wUElJDd48OqWW957Ga9G+1LaOn\ngLs+AxbkdgFmoYIPHITRKKYgZj7mCGOzih1sCwvAsL3uSs8khmwCpNGyC0Oa\navvEChluQwPszBXqbh6gHrha5q5YPQWuA01v/2TK+Ev3YQRFPCvSoJnmUNsz\nQXwm/OO1Iya3u/c8VLni7ElYTlM53DSQPYWW7QZKFFfYTRbFP3bNa8Fc6vvw\nXzRPSiAAnvIpyjBjLsTJvd5GzgTbwG6W9V8CJoAOu0HHsf/5RaXh6TWOqD4+\n47U2Orj/+mXobMSKkPEJECja0Ux5hLl1K6mt4AeRUJeuwOi50ykYe2yVj5Om\nCHpHgo2qV7vwLWiMQLAd57kfcRPrfex9HqFi/G1J5nr/acHsiARoyIHj1n5a\ny62UyCiE+z0Au0Q6ZZL44++Tncu+H2EJpFyiOfK/ogqVbOPqQnsjzSXQ2Af7\nyAN6k3evqSRi1F5K1XnnKt9sERFu7orl6EmK0/KmkmFnTRf4IfnwOkqI5+yy\nr4Q442J/rkcGIMSfTw5h53DrkAgHUyoyRg/vYnWVUFpDwkqjpazgg7Ru9j/I\nIuhTKRhpSP1slBuM3kKw96iv8mX2fwCpdqZkvGw0WCeot7i9bUBkGiJVeMgs\niwJv\r\n=BSeb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"de19787ad8bdb65513c8f2928e2fc65425ebce3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221272450","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221272450","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221272450"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221272450_1643786737787_0.2765090090394926","host":"s3://npm-registry-packages"}},"0.0.0-dev-202213175727":{"name":"@chakra-ui/system","version":"0.0.0-dev-202213175727","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202213175727","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"387452de1649ed28b0bf6df1a2d5b56a2d8f3013","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202213175727.tgz","fileCount":34,"integrity":"sha512-JP8VAMCZ4T+87YOF+W/cy3pj/AzC1MIEP8cwqH/AhfSH/0A4HGq7CFjPu7pu4YK0l35kUoHdZiHoESgtZZTPVg==","signatures":[{"sig":"MEYCIQD3FIzMzbnksBzdXGjmpnJ3vgW1lCfZxINuBxiy1OfIVwIhAMSndghvW4WYm6l+r9m9SG6fMzAIFRuGXfxw4TC7JZB5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/BeyCRA9TVsSAnZWagAAddUP/iXih5A0Rs5Ts63ypnrS\nE0jRs+WX6raqRXfD+d+xpB6V2s/Wz+5HWtRDJeH+eNVLENFU/LOVpakLZ79I\nv389Kis/87elkFCFhi4mPgD/d+FdPkYUvbCtCY3/n3n6ReGEUnuAralEVTUt\nwruHgHSEjp+2ZJLXIqoJ0vUonVbW5mIbNGeAZV4UgHx9LypBlyljp0kKdeCe\nU9Y+VDiSBx3yiw9x1t298iSEe+3RAJMA1UtqH3ei1sC24ZAKL5uTTIoO8cVH\nz9n9arVbxZLfG4O6+n8B8zq683PB+YaXXnvDZjouIKuMMKp/m/psmuirjXTF\niJgTchiaQ4iIVffefJiy6s2nvvXkfOuZyZE+kKnFx2Ek5Sm51K8DUryDj8e+\nU1q+RGXg8inp0XCD/dyuDxN1Ggfc7nZjeCcQL7HA94ZGOaRwwmn9beu9PIDb\n1Ao0gex3mF1PsxS7SBS5fdixuebL+CwfVhwmbNyOf0NSWCeU/ENtWnm5OsLk\nXqDBhLAUnB7WXmwnNnyK9r2PvsKAUOlnrWtDKrwDOW1eqyrXB433pXacSVcx\nc9zdUBtiXDpns5WKcNFrGegEHOrwgWQ/Gvjy6r/O/rLvqdzlxA2j7zw5ZtA6\neNEmtow97j6tUTIDW6Rc7CVo1XQV0ac9D8NJhf5Xtb0vFvBOWaYYZxzYJ8Rw\nMO2R\r\n=85gd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f149c6c9aa04b8c0abebaa6ac8dc72c7f8ceed35","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.1","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"1.17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202213175727_1643911089909_0.6573769621015717","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221462931":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221462931","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221462931","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"50c124daae72b065877c6b815caa8c90d0d57625","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221462931.tgz","fileCount":34,"integrity":"sha512-3M2jcMDekjC5A6wzdvo/gdZ460obZHLxnEKqMSDrTnBX20rC0ygiTQV1MeJQsfnZmeZDCXw/dhfBR3WE2vP6/Q==","signatures":[{"sig":"MEQCIH9llVxBP8VQLF8aCb3TI5b4IIAGAzhc1zcEors69qi9AiAMp9fnb6kVr9oPUdTziPC3Yp3XwBiqYABoLRnkIrDnIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/MgECRA9TVsSAnZWagAAdLMP/iImDI4taQvPQbs+RC0l\nejii/RnTG9QSIYNQa/hJBFeehht9TgJoy3I4orbMLbSK9nQohEB43WGgT9BK\nd1JP0My3YygnaPSAzWz3aqUpaupIXRlFCkS/dIPmgzUFB82fLuvgFCEa/OKM\nSSGY1Oo8kt/1BCRi34e9YPpyLttyzLFyeZMMHys2avbNfQAV9YRxwa6WPy9A\ntNXc0digPVF3MCPcRU0PxSM4BTwyc1+IgTWjguvFuMtCFoKQp39b+J0ILApk\n1LlAku3ygJOburijooeZX6FrzRnZIUbJ5IC1pXAbGo9ROV2mOZ1t83rmqX39\nOQSTD4yVG5XbUgthFJzU8wLIlSZpiqvW+sXUPotHD7Kh2rXWCUzYaqvx6yzY\n5uYRHJ3Lv7DaGutw9yRcu/iHldr01St39g9D+d2MSu0ka5ioNQQ71a+aJolw\nhiEZfvZkehDvCAKuGNBw9jBDLdEmyZkjNXnFU1aMxid5mHxmY5XsWrjRtW1k\nzFyMqzzAN+HMSEqDgW8H2l8JXdhs763SF8KO8e7dt4MLAxy5gXi4zDNHbuNN\nB+IRLM0H/uFtcwiHKzwA9NEaDA8Xr+YTX5bzA+gXPG1pVKmOyGN7j3Y7KKcr\nv4Th6U7j7O/pDioKJ6815m9Itcsv9z+cLXcW9ihymebmXAfAHxyp6D09QkA0\nR5hi\r\n=LXUG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"147c971a8b1b08ef5189bd99586689f0e7c5a383","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221462931","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221462931","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221462931"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221462931_1643956228511_0.05841249424913375","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221463045":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221463045","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221463045","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"37ff3159cde3b5bd3895083bbddb724371caf0d5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221463045.tgz","fileCount":34,"integrity":"sha512-2pXzCpYEjEup/cU0+lu0YCoj4h8IIMrlSLph30VYCxy667Fazj8gdqrXuE9ecGxB4J7ryIoDrxUkHEzbWXLscA==","signatures":[{"sig":"MEUCIQDXFyTBL10cDPIfg8KWTfMJqBUY6wWsfwmgxiDUnRNNZAIgKTavgSC+IawifoU50RXR93eQDefIew4GMoQ1uvJ2kPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/MhLCRA9TVsSAnZWagAAdWMQAKK5lX/kjypt726XXSLQ\ncurIxDzNiB87ri2vQ9cfe9itnnpgOuliR/WGHQH1b3sLh+uWZJaUB3YEJZbO\nHkxWwenNL+NWJ9hjg789rHaAvRRWcyN7SmUvb0b/EM+zGxiTnxIXi1x6aMLl\nbR7rGt8g4rAdHmuxXlqF+F6/bnTPlUetvaHsQ5dm/idh4vzgL8DYK92qh1zq\nJln7PtrqFsIh1WaZLU0Hq5AAk5fTUStz193Ji8/IMuLEqopY/Z6w6y9fGRU1\nPqsRIyKZYFaaG96fBqCnatqATWoMAUbBFJD5BwB8EBxMI3yc91QYtsC0I6MV\nI/Z/wlOq9ug/3Gna6BWtaz4OPlYVD26/RgjIvroUW8+cBFN7ROigGdlrD2gR\nmjAo/8uGQJpDA/tiSRCCBe5eXf17GgyzbX36c2tEzclnZiYdKZyZFwO+6CAv\nJ/joWrt0mqdMNmfumme6cp/tkNA1LakgZLmo0NZwGSRtwuiXHmNzPRlRaF7J\n5rLE/nC53MhHViKfRzFqfcIDn5pnqe5nwE50z/jK8GgBxGrDorGB+h6PqLeJ\n521G9pjJzBScGHgC89jG5v5SFsYiejkqSBLZDW4160xTUgSfaqLZYKSjdpR3\nJXhjGYZQ/HKtTOOz4pU7CLOBt0FQb2cpurJwjH7OFSfAfCj2fnlZnPdAZVEV\nE3Lw\r\n=yPhB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"147c971a8b1b08ef5189bd99586689f0e7c5a383","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221463045","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221463045","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20221463045"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221463045_1643956298871_0.8503697545748732","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214171317":{"name":"@chakra-ui/system","version":"0.0.0-pr-202214171317","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202214171317","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"daabc4f47ba2cc49c7bc466578082cf58dae9c39","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202214171317.tgz","fileCount":34,"integrity":"sha512-95huznexSynDaK6NAUkpkVdL6Vo20qPc1Vuq3Koy0Ft3Gr9IQMc77rMHG/syTU1sSqi6KHlYK1akJbc+BPLMQg==","signatures":[{"sig":"MEYCIQDxuw77FNdAK8xFAB4e44cdZvm3ASY+iKPaL1DS/rJ+EwIhALx6E4jo1Esq4f09QrtQyhrA2koe2awMmfs+kLLjX1wp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/V7kCRA9TVsSAnZWagAAyUkP+wS2N04n+C7X1p3iw0RP\nLLeDT9CRKVNEcdeFyv7Vt0ETFwsXdUyHy95F3R09GNw7Iwvndq1UZLWrHpQI\n5MaGOCweGRqQVIBM867iQ4h/7LQ2NihE/75mnPcGFn8JQcJwUcHcig77FNwO\nLlvblfDoQ8Be8fZ4BNuRuJO48AjdPpKrrVdOjOj9PAGDxN7iUCn7JTRp1kPc\n3ORDUDrahRFyORhkbK7gKASnvFRa8BUwQ7h7qMJivTekrOiD1+dKQxWbMDgj\n0sC8+6fXAmssjTj2UB0Z+hoSOuFC/JMPyt8+534AXbmrBM8LlbFQVJMVC8pL\nBSlRMIq2Zk0BtJLdK+DhjrmY/D53z9VU561uwUvTv1m5AfNTXrxcK/cDu/5N\nuP/XWKS8yvOIuAowFKka1V6UE3ZkXofoVNbjKp4I/YQVoYcQOus4bCbZ1V6i\nTeWqdcZP7w4gmSLWGepu/+M3yAXTM7IQonnmTQBCkRmrvNBJOdNWKSTzIXRu\nLSdhR8DzFULPmMzKdfULVjPhwnwgvQcuc4WU6xpZktCTT79QHJdSvpXEexS+\nNvfCzAqSEQ1gRkdENXzsV1VkcJkzk7tBen5ZsIR85HolfymZ36g2KACM1cvJ\n/pYewjQUuWj/YAJ7nQUKISZRwPvvOwPhSIwgifTEchgnwId7SeHYGb3/BKKF\nGwv3\r\n=f/tN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"0299e357a2542e035d6bb17ce6072f38ff037e45","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202214171317","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202214171317","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202214171317"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202214171317_1643994852426_0.7261432213038823","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214173019":{"name":"@chakra-ui/system","version":"0.0.0-pr-202214173019","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202214173019","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e47b1ac3cf1df21caa658c66075edee0e95934b3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202214173019.tgz","fileCount":34,"integrity":"sha512-6GtWX9pekUpXxd/X/jP5MJjio6LPJRJFMpyvWAvvA8aQgI01KGn78omknrIBfUyZHK197pXwBSBTmDG/QUgDfg==","signatures":[{"sig":"MEQCIG1bpNRoqyTIFMVh3SLY5Im950i6B0TpCDT7T+4XJY2fAiAuFMdJ5imdxyBkCgW+bY5UPwSdRMLNlWP9uUig1LQlKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WLaCRA9TVsSAnZWagAA/Y8P/iMk7huFXDfSVS6lDbGf\nWh6LW63FigHL/AOYrzX4hHHGo9oy3St6Ii2pYLQUbgHDOVkERQwK0bUb1UjP\nTo7XWlfIrhvxK7wObXL9fkxRf+U4hh6nhqNcAbFXFXDu1GuyeWaoBCtbCtMt\ndIAXR9MtgikRTPW+qeWBzJN9IKVvyzPKhQKX7r91nQn/iEz4mFgA6vwb2t6x\nxn1VQP5nNLlkJrKaq35V1pJsC4HPQtZVKxZ24VkeviRHdpyykcOWz0BjgVCD\nuloUQNN9XOcJnZ9sbDOgvHAzBbjep6SytH+5vRaGRhZGjFBOpMFgHE5ghLmD\n3fKE3AnsWj1MIWXwYyZDS0pNQtulZ7OCABqk7swwiQNa+6Q3AxBDmTFZwAz2\nLQdYCAbF3kXZYioqBuEuQIsg9SS4iw4QuxQRBo6+A7PKxI5oY7+utink5Fjh\nwU9jd8U0qmcObjQq4OHo/82OFy9uRZ8a6In/dA6rdJJQUwGRwEUOXFMTiI9s\n7BRh2lI7chT1GO4n5a3fYF9SdFn12B1xsf3i+5S/stA8eYuxEFUFQ6NwuPHs\nx0H5ALz8s6I0GWqOEF8Ol4oX1gqk7K8IUT7V+JciVjzn+HgoTaCejHuFB+PM\n8iEQDwoppEDdb6NuS/H3r10HM3RiUmUk+jQj220Smn9mTk3zHI4hTr6XR+we\ngAgz\r\n=OCCS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"99dabea67ae9fd0509bcb8f92867d4f67c4824e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202214173019","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202214173019","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202214173019"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202214173019_1643995866765_0.35512264602475385","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221417318":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221417318","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221417318","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8e5611d2acb4c8a303b1b8ab601c2debe974a727","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221417318.tgz","fileCount":34,"integrity":"sha512-QZfc02q3uOKOJZR5xo/r5qkbWlOFrQwgDm6IOrUVXTqem8fsIRNgWqeORkIYVC40viDmyuHXVeE2C9WZYyrYEw==","signatures":[{"sig":"MEYCIQD9Id+jp6u7dZ1gttuyaHA6I6YbTTwLEPcNM+DSq2M9WAIhAMzSApwb1pB0Z3WpI9QcjESScfH5odbFi+2XExoakST1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WMSCRA9TVsSAnZWagAAtYUP/1lcoTrZ/yH+kxh0OzUW\nJ9VqXFpQPffa6Urpdze8XCLdcImX44MwFWHr7yZL/l6kB/eiU+Q9nLgfZF7D\n5vavYyFkmAGl8GejRPRPOJU5mVXp+B7iZyskoa8wigA/eBD0OIbTpB4Z5UoH\n4SkybAmleaLn/5Zuozb4MW4M1oKeOCGhD7moYcwViZepnxQpt2EXdK8ubFXZ\nXtINB4z2bX+KJyF6XKefGjsZDYSosBj8X2Tkt5tz65RJvIH2N/9ZeRys6oNT\naPY5olEdqnV9k95W/rnXP/6bxD9ZVFceakJoPp9UsxB32Ggm2Ab+mY67pXye\ncHdRbu2kqoGEwXpLLSRZtdFlhjf++r8GWE0sQUeS7//yV5VSgptoXb+8vsAg\nq7t5ov92TFxw2tWEkK+h/ljFCAfXGYvRhkkHotXs9gmT8/7TpBP/AkudIyBy\nV4xeVHs86tXVYvdmy8SWmhQHPXH3SeFYWLzmTSV+LNHR8NxBJC3cm5jTvqon\naqKHrWBOEv9WqDJgQmkc6Y+xW334lvujLrPFoDkU8v2/80cffavD8EC1iNAE\nkBZmDkBFkX9+MRTwEVv4JOHfABg2P268dLDqOAscWi4TaJNtDgIFHtUuIYZb\n3Gv+K2OBAvj7QiG6x49LaZ3iFV7flM2irQnzO3PFFmT288UyumGr2uIro+Rw\njLdF\r\n=ob7r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"99dabea67ae9fd0509bcb8f92867d4f67c4824e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221417318","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221417318","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221417318"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221417318_1643995921821_0.3012071250546422","host":"s3://npm-registry-packages"}},"0.0.0-pr-202214173148":{"name":"@chakra-ui/system","version":"0.0.0-pr-202214173148","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202214173148","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"36c49af1be7a9510345db133ddd1d06f936d2cbc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202214173148.tgz","fileCount":34,"integrity":"sha512-8nDXZ0stksjl3vHOpuls44eCgxcIr/nfUaeZDX/XyOJYyt+zG5bDi+lik3Cg/tW0NNXfI+pPOc3T6Rfcbiff1A==","signatures":[{"sig":"MEQCICd1ZDnC12aSVYGttZ++XnrWp/O39+B8Nl/883ICUQv6AiBRXanXNwoFDJv8UyYGPaEdc2S4MHQjw0fGTBm1pRuxTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/WM2CRA9TVsSAnZWagAATO4P/3duJZJ/RgeWlSv8nXLT\nPu7Sx7YIq7diYixAe6J9AinaFHeLAzTE33ApSK1i0ml58FeqJ2R3tjWHkgHs\nApc57w/S0ri8MUDjYIYXxIFfv/7xN5Fn4vwgJUfFjW+FLmsHwphcnv3VgIMt\nEvfJVJIp267pc58uiyOwuOSE6llMbWof7lCfbTXICdyEg7HupUdSjY7nsSRO\nx+vZAcAUjtcmrtzkYf8OEo8Hnu14uVEdnenHBfWU2DqkimJx1tyuQu5KFx+R\nCVrG/MacdQi9AqeAzGFCzfn+VEqo3kJGaHOU1XPnAIqZ7KAkqUcJ49K82CKV\nEK7JpHPB2m8CJlGGfjhMdk04Jz7+ijOXoqmDc2X33xlYXvYfZyQ6w3+eOZcn\n8xyZqSiJ12fOk6hMqTa2xBkwLqMhBRNQEeP4V9orlDuwAs4NMPNK877n6h+Q\nL7W4Kxdybm5WyRKTgxUEhnBRLilT0owCcA1Fm+cxAODZ5h55qWt/aSTGUx8m\nwnPp+DkjsKN08ejn+SM0CwFJpEaEbIlbpaFGX6QIjcWbV+ATk9DAae5gGPsQ\nOcFiBD9967p1albtw0s1lUs/fMR0VxV4xBARfoqbGQMLKnkE2lwdpS2nfABO\nRrAxBjmXTsKWxSF4SkXDKmkDRHbkJj2CsJ6KA9jYyAk5st4Ix+KOEPqYeqq2\nOyKY\r\n=mEfB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"99dabea67ae9fd0509bcb8f92867d4f67c4824e0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202214173148","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202214173148","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202214173148"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202214173148_1643995957905_0.9827476478642783","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215111823":{"name":"@chakra-ui/system","version":"0.0.0-pr-202215111823","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202215111823","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"561d341c21e7c4948a1ff70779325cc1ef45dc6d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202215111823.tgz","fileCount":34,"integrity":"sha512-w6m24BLIxWcrOXoxzeX3xDdcNxo4/Xc6EMvPDKXeG14NtTlaTkuJJrH+mKpGlrRS65ywoaEZuhHF7ISQ0MO/pg==","signatures":[{"sig":"MEYCIQCbA3hIbFgMn+3tTqtSXyYJRNelt0+OxSomNH07WnNjuwIhAMLbH6OnBGENlb/BiBd6ak2sR60BJDVNqbdMrAIVjItj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l0zCRA9TVsSAnZWagAAk/4P/3uEz9WwjyxU+ZsXyUae\nMr2vPLFoSt2KUUNq+5tAFAVK2SeayTDx/UVqpzC1jmrAMwyzDX1MsXkEbccy\nOVyn/6zAK36z9n9I+DaemiD84BvX/Yfy99zb+bkDet222aM+vJKC1aDvykmf\nb+lx20vWauj4nxOQyJrgRzWgXjDou8l3eTCs4fTPIoSPJ7FSOG+H1fwyp6Xf\nc7/4I9QrN4EznvVfpLG9fShFYlIrNGQX2MLWWR15vjJcr821709MXiLuN8KD\nIRnR5rcGf3qAQDIw5sXntmGI1qrOkkSNY5W/6wpbrC3Fnxux06y0Ko0TdyUu\nt4wbZHw/aAZc9VZ+U94pQn29sKQehyLpU84hBaRMgOm+TnFI+hc6uEeRHowq\nm6ZjjTAnLcjNUjWxEV3zyvGoiOA/j4klfndiB9bCcQjiKJbUECZQ5fyHyW2b\nl+AQpoyncQCOxxCYCYcRROIDIGNIgEEGeo9h3wnez6Ms3SBuxpSfv7loxCRB\nETL3h6cAqzSVwyBgSbvKNDlg5KyntOkCrWMZmPA6gBvizvOWbMdvEW8QYH/X\nim58famUhe2h0CYZSAACxMr4JX+uWCF3StdL1k8laiCy2P6KscyMCuwWH+oM\nCHIT4LUY8urqmzTlSH8EGUqNCl81fyuxIcglc9JcYkD4A4lp/EFP2q7I4abI\n3bXj\r\n=QuSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b6ccf0dd2e3b72a5b50c9e1c00f1e6e3f3b68690","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202215111823","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202215111823","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202215111823"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202215111823_1644059955186_0.5443377636534317","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215111945":{"name":"@chakra-ui/system","version":"0.0.0-dev-202215111945","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202215111945","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"44a189889f52e402245232265496fa4cce72cbaa","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202215111945.tgz","fileCount":34,"integrity":"sha512-fckfJwKH6BiuXGiohlzk/mvY/VHo4H3wei2aaqASdQOu7URnxvyJRt4lrJ9cnFwd9F083XKNHj8yIevKXVRayg==","signatures":[{"sig":"MEUCIAQMBiIvcTQQnjwxuEapjGOtchlGag6KUQyXmWIbETunAiEA9KWnMid1Z7HgJcwEYnfV1OstQK2wE0aT/iS3lV2nPRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l2HCRA9TVsSAnZWagAA61YP/1xH1deHQMVdYmeWuPoQ\nsvlPRV304yURdb5B8M/dbLREhfOXjyhIc6CAC7uzPZX9I9tpQqqLKCawraBX\nEaJscN3G5BxRfUxHhnVc5iJa5mOTP7kzxniWdyr4M6eGX6oKpR5tdZ3/vujU\n54zjbaFbf9TFKLFGMyCXjLyaxD1NdIg//K3nlDIhEkN7ARVio5WelXbxx51n\nStoH/3nPs3utmlh9Twmz0EEctpZ2apGu0V3OLt7yCsUT3NDl5t1XJulKmNSD\no5PrcOrYjdKCcC2uFBzNB+y6LkssfQfiKxs2s10yDWhq25eJbK89AqhCwJS9\nmElItP9cRSb8kC+Fh0BMsJfWPA1q0GS0rQW1ePma/PYg0iqdIhXUjfRBmPsN\nupnKPePobjn7EnTYoMsoQ/RtC0xMkngqVWxuVid2dcs+mtjOf4k5QTNh1+zB\nK5KpTw8KZZ3OWj8efaIiIRM1Sc6iEc+s4GzrjbpB5YXxgGs1z6HYfQHQh7vx\n1HDufNspHD5M5kbEqkU7CxsCODZN25bGEuMoEe1Zn9Bxd0ylgAp7t2FuHZNO\n3gE+UPJ2L54VB/bz4L+UPHofTuNmLInP7bFtozovy3n2y45i0h823U06K9eB\nMhu1J+X5fgtC8fpY1RgPE8RslzNskwmL3SutMFH76RkX8T6pDnM/DIzWuzZS\n4IB2\r\n=f8ol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b6ccf0dd2e3b72a5b50c9e1c00f1e6e3f3b68690","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202215111945","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202215111945","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202215111945"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202215111945_1644060038932_0.38855823516725674","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215112739":{"name":"@chakra-ui/system","version":"0.0.0-dev-202215112739","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202215112739","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d389149e7caae48cbba490024558fe36d563075d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202215112739.tgz","fileCount":34,"integrity":"sha512-1GqmFdGZd7WzwDBBKHBxBYXrTHPIzhKyLirsfkXxS5kvUn+N5n1jAF/Sdj0E5agIKdGPfYDYxT9M83tGxJzeww==","signatures":[{"sig":"MEQCICseVI3mVBqO+fRWHAaz2DxYeWgA+6X26UDCJ0J3KgC4AiAibXALZhxgFuYt2JvJh8xf0PdFEmrz/aP1VsEORdsvvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/l9XCRA9TVsSAnZWagAAGKEQAIfmfAKLAN1sQa6Om7qw\naI6nzhGz+etTrLQTtK0aq9ThGrJ+5Dw8DYSnahuak7/av7sT4v/MfVhZCmUc\ng9OhrbuKJMyzetaLJYjZmUBDpAuMoOxQkrAHyvQXyA8+M3QNWPVHwlYuqaHr\neZ9UAZtoF9HGRpEKXO+NPGRi5JzYpWmHifGyv9mNOAH3gO3j7y/WrN1CLXCx\nPTsyMNoBZorEzC+J1jP8JFB7ooc+QfKXP+MEwimLLJrUif+mdTdLfeZeJcmU\nyHXVizbBHfnggveGvwiRQ2EFP0m9HsP88bE3EOJPIirA8mqQnIgXCCdcUcgC\nwV5Atpqy6MJgO/YEs88N090tMGgOFMcvcTPPFJTL8Die2OTPwFMY85uTV08l\nEM5aMoKSRxvyzVZhuHxfi7N++5EJjbl7isabMs1bJMw4IOilzS5kdHe9B73h\nRw/5tz4JMMrHDqruXhcwMPgSoHVfelcV8yJLQDshKq/SIh1pEH46zfG8OvGC\n6GsctaRSsxkhcohEOtphZ5Ink1mXg+d/+BL55yvDXYsobMDRAJgCYFYoiice\nfKM7votg2QXIovdgTWFT4OXAUhxc22m7g0anwkrP5qinT/Mx9hs9D8Hemtog\nracV7mqrVzRO8y3NcpeDSlhh4c2BHWbO193Nie+rru1QdKPNWIfwXejHDWif\nusHR\r\n=OhaR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d4d18b77576549ceccc8adf91b4f9debea1f388c","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202215112739","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202215112739","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202215112739"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202215112739_1644060503407_0.9366538496408703","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215113521":{"name":"@chakra-ui/system","version":"0.0.0-pr-202215113521","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202215113521","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"93fb87aba18d83df93c068bee40cb620c70678ef","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202215113521.tgz","fileCount":37,"integrity":"sha512-LN2chGweN0xYyRGuRX/2f4YzC6HOKIpf9o2kpIQ1a0nkzl1yzlDl1hHuG0HRM84GrGESAaSd6Guoli2MXXqIZQ==","signatures":[{"sig":"MEUCIGPEyQXTFGxNJe/+3fCFa7KnRWSJeNGpaYruCSxBnl8NAiEAhnYzDz7aWYNC1vGNWMvjLEZ3qLin/jjTaCPbVgR4ZS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mElCRA9TVsSAnZWagAAUPUP/AnB8DPKvbTFwoz5FgEY\nIGUoqQCUG2FeI8c2Rqi3gKTZgyCEXRS6gioCd4DbV71xRgvgub4YsIrv9uDl\nULb0deYe9uueEWCSU6l2pLEETqpfVzwMWin6m7HvhucLzB9xBUHkAdTQ3rHt\nWhPKSKOWkPlqcg5AKWqOYzeUVWHwSnse1MQYLIJmD7kyQjzyL16fO0Ze1mwZ\nazlOURzgn2DQv3tPa7SY/vosrepImYhJVnE+ENPzm64sRJhz9Z+so7cx6jKb\nUsiVOKJz585oFeYTKbEO7DsJJT6PTref9IzfOCblS9JTJTSBsGwMG/KB/kod\n7i+6s5I/UTwWbrfZnl2oCbs4g0V/cmHikfE0q6Y12A0FjHJhXO934mxdg61v\nTGjTSE3wsv/OGrvwlldZffJsLtcPFhHfQ2y2DLmPiXcrRIAiXomX5MjE/sru\nkttWa6+BCkn8dVCZjqLv86KqpU26jTmik1PPEp4eGS3lo92Om/TZ3DcJWvEA\nqDf64eNUAxTZWDRfDjeoGGjHLFQ0/8jZQvopTYwg8YMebbDUbIKczxN8syD+\nH0fj53MZ7iwMUv9L1sfbxv96HmLKvyaXjrmDs0hNxYQG9afuT5DR9dwTwIGv\n43N6Q4dVUBxj3mYvV3akDdCWtHDdtw2gpp9i/SSP6YOdCb4VG1dW0Y2LFdml\nUA68\r\n=aHQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"ee0744efa9df4d216d56af53ceb4ef6a8adb40a1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202215113521","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202215113521","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202215113521"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202215113521_1644060965369_0.17448528222937476","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215113950":{"name":"@chakra-ui/system","version":"0.0.0-pr-202215113950","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202215113950","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2d0b66faf826edb08f525e42dd5e7a98a3c5542f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202215113950.tgz","fileCount":37,"integrity":"sha512-VRi9uEd3GlO57YdENJYp9WcPgPad+lSU9uINWLAdm8MCKPirfv8Il0yjfzgiQicH0cujz4HZipmM1ZbnLaIo+A==","signatures":[{"sig":"MEUCIHzgju0yFCsHsYePX7m2kha/feFyMUg5Xg5N94LFiMoVAiEAqZzPslgbGUSzfeYrRoWPX9eqVr+G8pn7OskAEocVNcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mI6CRA9TVsSAnZWagAAkQMP/1CQ45vLQFOkGKoS2mo2\nZbaEnZmYSBzZ3s588lDCPfWTcQjRXwJx7CEUz3MqPDEuk7wSLpeGXrFuwt5L\nTvIc/T0EwZuz/2XBJ6kgGHTr9N1q/dbw5xaUs+v5thnQBkOuR/UblnSfLYYI\nlD2AoNP8JgmwVcxBRIujPSNhnWMyPKgT/4cx0p/TXc6dFY9Vdw7/WasgxBDn\ngUp1tVaJUpha8ljIphSP60+mWHiw1fNTEM7wmbQUasLN8nPapDAx0oGOC+JJ\npr4HHKHOD3ojZRAdKJfYmFrR9mlCSnMQyyqlxR6KJL4nlTwgKYY1i5ckkEn7\nINk3tmYE2rHvSg1G96XaqGa4tkj9BA/4cx82ZxX1/OyTqJhgIjO2v6/778gE\nyzY3VSdV9JWkytkpZ8X0HNClI/5bjDJK5imYNFy06l7TsgiyBtacKqsrdRvG\ncD5z3tiS3BqS5irmTr1+5qYP/O0cxhCKs9mIvAihk1s7S+1qoKgd8wC67oBq\nHBC63t2G24+TbgFYqtGblICaPUkQMce9OkEguG0fbPIlH7Aj9zhjxemoTvfv\ngeey87jYmgLJWuO+cS3wDW5qjspgIgIqvDGghN3KIcNLE2vAoiJGOjPP5fTw\nCeTlABUSAxjQAT32QG5TN8jeyJ1nRVEH1rKe2GSRXXUWzbuaMp21f+JkFwkW\nzwJn\r\n=byKI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"262bd66825aba680e1cfabe200ee57e8d64abd7b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202215113950","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202215113950","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202215113950"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202215113950_1644061241855_0.30569195000080795","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215114149":{"name":"@chakra-ui/system","version":"0.0.0-dev-202215114149","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202215114149","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2bf499152043014d92f5eb6ebbcdf2fc2c7a4693","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202215114149.tgz","fileCount":34,"integrity":"sha512-Egsw8tMpIBE3LbKYQjSxtilpCTi3Wi2pAtmjXsn60A89ipRG1FlS0ld6DKZw6betcHPyE84d7KD4+92q1UnaLw==","signatures":[{"sig":"MEQCIEtku6gsOKojd+7sYdplUNm+Mv/VhONvDYwGy1PgbiZ5AiBa+YGZgl04wiG1xmxcd3YL7whhCDkYWx9rvzI0x2h60g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mKzCRA9TVsSAnZWagAAsJEQAI735pmPzXUnDwAGZg4l\nSZoeM0JHaTVV3J6/y8eIo7yRP2PqOzuV9OGfyDNzT8MSZ51QJao0UIjzngTg\nL5fzlhKp7gQsaiCm48qL/gRFYtVp77QWd1citB0dL5FwUEDam40mfR6u9FBG\nJYes12PZsk3g/p3fD80oCRCh9f8Rn+aw7hnmI3qMb9GduvUW1NPjML0QI0Zv\naXR9Byfl6Wxk3+fApG1f3JkFPzCyUGCz1V+IXzFaCHx6+oSZPnXvLee7f1+r\nD/BHN3uZtXNeJ6i5Uw6UZOpTczd/JBqS2IkrDw4AD8qUoo6lBAUmQ6ekXTy7\nyNZEyZA4diGCgJz8WOs5SgzLfvpBZFnVwy7MOgAOuzvTnNV0k5zeIH1BfB75\n+YesQ4GtZH0mqRa58bi6aB5X5nv1VxSBS14+RALdL9rdGwcl1mZU3PpcJamp\nG/7P8/5u0Uf6c4nclaOpA/iV0yOjjQPa0oI7Fp/f+DT3hgHkyMZynodbx7uH\n/xCl+6UBOm0gvmxvl9KpOCwhlV5weB5o2IknNAskB0Uyj8QbQY+jof9vXRiE\nBHRXJ8O1rQTP28yMqLJNwtshPruGgSMKxqkmPdFXs/wmmI+3YIonDJpDKnc3\nlEfSvk4ohuQLGxd3jwVsHq6JPoLEZM2VNGiNr7j8qYqlYWvy/UCX5UhjKwAx\nSW9y\r\n=gnTJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e390806b2603abb97fb5e151abd46710291025d9","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202215114149","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202215114149","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202215114149"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202215114149_1644061363805_0.40010919860937966","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215114422":{"name":"@chakra-ui/system","version":"0.0.0-pr-202215114422","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202215114422","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a5572a954c45479ecf9834dc190c44994c7b6200","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202215114422.tgz","fileCount":37,"integrity":"sha512-kaOGM+pC6FwruHvYsqnuKnWEosxehhjxEC1kqEl5hrCcW3ZrhoNYkCyMwWBCb52xH0cpf75Vl2s3HFvuoUlU8w==","signatures":[{"sig":"MEUCIQCFKGxr2QDiGgiShsHH6fg8DxoMOzMyOvnrvgKwoJJZ/QIgc5VwEsubS5dBxtKNVhZ//m0ma0FcEcK17W3UZFeX+gQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mNECRA9TVsSAnZWagAA+a0P/1QFNPKr8HeN7JHPyAt8\nk38CgNOihr0ER5my4XdiZZp3kl6Ks+IuY5ZuJY45S9EpkaNUPEKv6o97p8Ch\nq6wkAiD/pNEx5VZvf3zlamk2EM5utmYDmQOCH0RWqDqH1ZN40xMVBmxr6NF/\n8ZaOdR3UzZg2dWsiMs8CTpqhpsqN7Lwrp63rH7ILfu9tCETGmi5gzuJylPVU\nWmgTvbKHVJiKzF5ZHVShLeJsXoEWPqrOgkodtNhEiB7Dtwa6seJ/nH9RZdDm\n+srGz8oxozv3yEKxRFb8JmOA6iCvqkFFekGLwiXtBJMXo+VMu8erJsmrvPzu\n51hBXGDBzmAfgxkcgy2sAIYScN0TprX/vbUGF4mqyGJt0VFj2mDsYIrfpd7z\nOHlv0JTH3/BjQGD+V7JmAkFXUiSx3X4wcP26vUC9IIqD3YWBDrUpRWy9xoJ8\nGuVPdctgy7evwPemeOuL9L1Wv1bowCJSH2p1Nkdwd2ROv8eXsRYIZZhMw9GX\ngJoPbqZ9PkAbgTGd3WhXA6I8N4TCgB5gnDU8cJbbe4NZwQP6nj0T47APh8Fp\nlOrJLCFzMi5W4pqgPvKpHzVs/BlYVil3rUPrgUcfMb68MXT4V/wAhLTB6H8N\nk5mKeyJg3gueS8m6FsE0LXF7YwyJvuB4UbtkC4zE9BbxYzjwmbwTiaXwzSaJ\n7K2P\r\n=sdlG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e9f7f49d87feb32a355d3083a61447ed5d6e23da","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202215114422","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202215114422","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202215114422"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202215114422_1644061508280_0.6439207693879436","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215114442":{"name":"@chakra-ui/system","version":"0.0.0-dev-202215114442","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202215114442","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"71d954b6a7d07119447f3d3f55274bfcbd83393e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202215114442.tgz","fileCount":34,"integrity":"sha512-Lscf8HFs03KHUtXflfWAZl4b82bMitBEId6A78O8dIkzFjQdafIRBM1mJqtTQGaHEICa8Ib8GwV1Gh7ZLVGcbw==","signatures":[{"sig":"MEQCIAmvdPpNxort64X1J0UZ32TsRV7y9KFk5bhFtnmpAq8KAiA4Gvx/6xb1+GcSRf/WYdlo7OKKO6t5CWz9nRiCHAEMCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mNeCRA9TVsSAnZWagAAUu4P/2yOabNd5DEmv75UXMKl\nLwuZXdrLJ2YVmncv1e/1auPFLqzROqBj5iSMciHEJ9AUusIj/IOe8wioZdpq\nS9wIb4LVmh8OD73a4hdeD4SiFK2JjALogyTKLtBl/O2U4famxFzbs8c5g0Hf\n5m1K2YAwvOdxAV1WE5QpAnCyGlSABhdoJlxlzu2FhOVeqRgiYpPmsOCupiMX\nR16DdEmhZqXHa+pxvwmM8aQBMpAYO8cmyi+s2UsZUkTlqsp1NCtEQnQyLvjt\nVim+3VwJyT4WYb3KgMVWJjGGQCYi+Kp2v06WbXGWroQ/K/oFBWvbU5DlNaq8\nGVu9nMIXX/CAweqke/ME2EtwIK0gERfTXF5JFwVeWRBZROPrcT+2LekwjUy/\nd4gIBDQB95b7hK8wgKLzwHEa28fT9b0S56MCcE/kF65usiDuxyL3YyrEvNDA\n2gGBn7BrxwUUXjePd4msp8473SKJk8yIAMKFl/RlXdbb5BNExxAsSdNJUqUg\nKmNibOvawtnPREiuf1SpnyZ/LS+fJkEZTWZUReqIwUiBZ68asizVldbalo2L\noSx+yEsLUNa4kB697vSsVupeqMK5bQrRqiBNCAv6sPY6Q4Q804zZ7rO3MJYf\nVHSD/OjXp6jMJa7Iv735J7FBMkptd4BMmDv7wyIbsg7Bkkz5On2IejUR1Jw7\nMTKQ\r\n=WrRt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"9d81c6de9ba2ba6b02681d5bedd8f7f5105a3e71","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202215114442","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202215114442","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202215114442"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202215114442_1644061534586_0.016907944347951842","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215114917":{"name":"@chakra-ui/system","version":"0.0.0-pr-202215114917","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202215114917","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3bb16590f9c003ddd26a22b5054b40283a1f7822","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202215114917.tgz","fileCount":37,"integrity":"sha512-LfxsMUQXY/pGof3ru7VnJqs+9VIeKSAgPMjv5WI32plDDaFeCs3MMeFeWZmMnQexjGRFRh8KEHtGXI6AkNfA0A==","signatures":[{"sig":"MEUCIQCZeTqqkLr09VgTJrlEW4VwREv4S25fdzUvRAHMQxgwZQIgIPLztleubg3g6MyANF1AEG/VEao5xzoHjWCnFaTlu9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mR1CRA9TVsSAnZWagAAtBwP/1ctRbmyNNHRMgklrN+k\nmAR39gqPbmUBCnvdTn8iln71EwF6pKNM304/C8eKol3UbezUxxhCRihysv6J\ne+/5DbFgX8c1cd4ZtWhdanVw0s+gMPGOFhysSrpErAfWmt1kw647YL9MDnlJ\n3dBdPcORw68DCLLlR079bA0JN8lKmMla9N6LYlEXJMEOnGMJO7BZsLmljjgW\nkAWW/Th7twKZudjh5u56bGmzbZsV6bMIt63zPA+8HXGD3Z3JdOQC/9hUi5Q3\n041TO03LQI/pKs23el8IngPlwPSYUdq8uqjfiwkMWI5khWcZ4jQ0Gx9JC/0d\ndKMDLcRoc7BAPgRvjiGqkdwSS4ijAcqNli3JwFeP2WxKL+nQ4kNfkAWnhBNb\nYoeEJ/ojHjtmYYAMxHET2255kLOAHJPF2j9KeXBwGvmb+NYgIIGjdBO0HX+P\n2b38B4+OHrilUeDj5rylJ78ibtfY8+JyIFj+R1CZB78xxp0w69xVGSQEqMQ4\nC4TYJ3LqCl/k0kQ7m1gdNaPCumBPVZsONiADmhdDK+nWjI+XTx04v1KcpigU\nAz5XOeiv+v9LqUEKNcYh9Kuc0qow+Qw22TehSbI1j3r7kS+bbbFeGFTPVkH1\nVbqU6dc/B63rySvRTnmYcyQ6pLi6L3MGlz7Pe+PziogDFTbQHkGwVQUD4AQH\nxOBY\r\n=r3wx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fdfed43beaec88a99ad8963588cb988d8ce03d58","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202215114917","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202215114917","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202215114917"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202215114917_1644061813431_0.04594836829886639","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512346":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221512346","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221512346","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e2296308ca2508f622e36dd8532a885758cdb348","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221512346.tgz","fileCount":34,"integrity":"sha512-SjzVp8sUVwSmpCgsIUWoxFDXDL6pyvCubMZ1fbsYSFR0t8dusaRrx5HsTatWp0ikiEBs5ij9YWPv5UhIVlg5kg==","signatures":[{"sig":"MEUCIQCsHMEuPT27N3155Yq5sbldt2Oe9yyDJlytdqXmCFx31gIgfM/jTT2673UYPtIdWqJC/PCojD3972o59J4XGMiZ0Dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mfTCRA9TVsSAnZWagAAsjMP+QCXGDtaQiOzbACwJErD\nffv8c3auRAOBS6Etq9RKXn+TRIsD0t5xAcT4silnlTi2AfLEpohS9FTwFRs7\nsCOW15LbOF/DsJeIFD+du7eZM7zyVS7BXiKsyA6MXl7YPwfi6Y656SKlox0F\nY6IM4kC8YGIJJQGwU8fw4Lqex1IYVnj0970yokMhTWstPPXbSa1Cq1FordRm\nvAaed82vHMzOf+sP3/ib1/ISM58GU6w5+MuoVgnW7IIZ54i+2q8AshgAXCYh\nw+KsdYV1j2CHagNBckKAsvrqxt0rOyLH+/G/6OuVYvqjMkMdedjeLxyvlePu\nBKAFnxEF5aHiNGJj5/ZYaUR8q9bdZxL25P7K43P81nyh8hz97Cz+qsUDFiLN\nmlk7YjnNz0zvx4m5gRi5c5K7/3WF2WQBopJTBSCM7FBiIQhocjH1iqBRyBxC\nS6KePI6n72kaIZjKvvLrj/Il0Iu7a2mKo/d+8LLEwIZ2DubgBWkzRd3Jnh4n\nvb0JBEyaMyh5dR5N4NKzDg23YAzPaOftcqJn7G7KxU39CmE3xCy8NctGRerc\nMZcECA0YTijPA+ufXtwRQrjvTEGEmZYiygp3D/i3syGCwNOi6ewaLe38dO1w\nAqOf8fiJZE+edWcN7G6Hf34La5JaeKPx7HV7EO2Mm/Jh2UeV4Fob2cYwu0zY\n5cLj\r\n=CCyR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8638cc8ee0b9a375eaca24a354e8f290f8f2263b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221512346","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221512346","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221512346"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221512346_1644062675815_0.9973427519041482","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512130":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221512130","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221512130","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"282f31347fb34b24fd95b9400e91c1e632941ace","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221512130.tgz","fileCount":34,"integrity":"sha512-0e8njOiKMnv5Dijk3+7ARHSzdtHdn/+nUA8JtZTCmW0Vc4przfGt+qggbbdCvJWGx33717iYKRWXBVKOPDJuEg==","signatures":[{"sig":"MEQCIB12Km33nefb28mGZXtTMUU9Fv1B5kbH7wwN4y1AbKhWAiB+EIqtD9cbRcO5lypu2phRsiPKooQ2doRALb244iXxbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mn7CRA9TVsSAnZWagAAE34P/20d/dyEWlHVqrUZcNnq\nqYtg0yyNk9d6+nYlmN6bqcewCNwAhZDCmjI9aTbIb9qbhbfsicbAK7AAZuEY\nhJ912KEUyw9V8mOSCYYq/VCTbZsF1ZINjTpdZ6fJU9TZdSX5FMKx/ioNP4QO\no1o2ppYJsN3oG58Q17zqJ3X5144ceKBFdGBcrwIadXPMXEzUSyZ9uZ4x9YMo\nhrt/KryIp3edXqkTAFZ2J7yHrvaXXHuKvi1yKARFftGztxvpSMciFABfQAMK\naFkOAHlV6GNkYLy201jQIGV3z2NFExCwSKXrXiZPN8Qfxrj/L1G1KFOR49iu\nRL0qeKcaGLtRgpoz1bQAhXDBtsIFXn0bvYNkjFRKiVXzXPtCunURqdo1Jd6z\nTZaTPCPqCpy8a8CqUg+5FaMsdYLy37xULhgmaT5xgPnqvg+26LtW4tSsZR+O\nxt4+wEDCxVu6P7NXTBP/wWEjw0/D0/B1LEl6OlISeglcJXciq/3AhlUKG+Im\n/MNe7NVrl2919C49QPfcrrsf4G+H4rwW/isy0wx8vQqWDVxSl4gCHXDKMf83\nMaLfDtE45n5FkHOGXAvPtJcOW+SXgUYR//fDUt06Jer5rgTCYhzYjgbUrbC3\niijUFjm+yHJ9zp8cv3o6wE+yYJgO51KT1YmJds+Tb5UrIZehyViZkfMj/WxZ\nbGR0\r\n=BB8a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8638cc8ee0b9a375eaca24a354e8f290f8f2263b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221512130","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221512130","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221512130"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221512130_1644063227262_0.9303991432882521","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215121320":{"name":"@chakra-ui/system","version":"0.0.0-pr-202215121320","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202215121320","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"11c1f0f6ffba7053366e31f76696aaade64fd93c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202215121320.tgz","fileCount":34,"integrity":"sha512-krI8d90bs4I6H8+L+XsYEu6iVU7Z5/wDco8vanSLt5PWDkOuGkhhYFTMOUQvjagFh6k2xvLgOElsRPy5ZtWdig==","signatures":[{"sig":"MEUCICAkpx9b0l5kLMGkpxbQmBejCjAXAfGxyXZxI1Xn2dypAiEA1vDJGu8EFihvFt76+7mvODmS1F707V3Yiw0KKciHN8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/moOCRA9TVsSAnZWagAAv0oP/25QhI8OdKLKvy5gV7BM\ntDzyHoFGwgYFP7yF1GWUu/TjG3r+BOuvIYRRNfsXNDcPcTIlyuR4Nq78FybW\nKzCuP0GL4F4nD+WSq53NQ9ht+8qsT8jMYD2aPHNwopCSn+/FZpkydCG9UBgx\nuzirx/1/PvG6V1tLsmBeB6t0d+rtEZQKr9bUimQE6wN/i1EjGeh1pwU0u+yS\nDKjps5a/CVNizCty5CXgLW4bS/gf/oyI99CFLHOcEbVKjLOO9jPUDTYDUj2V\ntHSuJtGkRNqzPlqQ7uQa0KDJnjO/8bMyFOTjTmyQdTA3JLO91Hq0irA+plfM\nqfHpG+SCe4qAHNTVq4Xis98eFdmjOQyQJQzTxg3t39Y/eBbspr/gm/j/D4N8\nTflcn8Yra9PDuFxgGsM2JLVOB+ROMNp5P4Ky6siMgRgemogIfscLFX9rrx6b\nGpZK93sOB95ipf0RLc2UB4TlJm5V7J/L1HgXJnxgrzZJ9RguD2nxq1/cLD0p\nMhXK6pSIh9Ugw5pBYn+MrZdWpLMmtqq5VEQrj6yeAQga+HUTVGNOn6STKeNl\n1EwK+1SnWCYJENczk+JeofYfQLN+yv3JG/nOG5auTBnqgnBamOnef/F3AgEF\nYWQhPyyKUK9E6Chm147dXOpemJUdOMN/u1Bq4GaqTRXzzlI4Q1qs8HhZmUzN\ny9uR\r\n=X0Xc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8638cc8ee0b9a375eaca24a354e8f290f8f2263b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202215121320","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202215121320","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-202215121320"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202215121320_1644063246509_0.19962355975308377","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215121353":{"name":"@chakra-ui/system","version":"0.0.0-dev-202215121353","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202215121353","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2bd4d0719cbddc0f5c38db0087f26d2c660d0568","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202215121353.tgz","fileCount":34,"integrity":"sha512-FmjTFx3lJLGIbEa6nCnKqTSlzn7rnjjRKbwiNtsIGIKgriP/3T1CemkZfEmL0YBdkmZMmnhHSE4vIx198xtbYw==","signatures":[{"sig":"MEQCICiIiuXocluARzob8kM2iLuu8guUWfM6ocdbYwPDx922AiA2Y8Aa4Z/IiMR0q3DYIUI6hGuvdwQSuZrVq+L9cMWOLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/morCRA9TVsSAnZWagAAhgYP/A2b0tLOJpWWOWBYWJY3\nAsIXVHHk3RdVK8zLwVjDe0xOPVSXb+IVqAogu/Kyd8ruZpcJAfmw9B0MfyD/\nyzTBNMI3MTaGHgv1k4W6b3IRQ8qpzBISzKzk1F5AHrJ01yvgIkFDUVO5R3tp\nKVXanXyXMxucPhk2/IX/uDlZy0VGAZUqhAZAn5jsyjUCWlRbiGBvd+iPqc4h\nPYoaJ8UlIGrS8wv+q3k8RziB6nfwK2h6AhVSOj10WPSOy/BwOs45soKhszDz\nEpCHISS0cR9yyRPwKpQLkuCxSju+EJySLqxzob1Hl6N5K+U7eSFr2eUufvUO\nEIpnvYJgp9vcTSXzycS3zrT+0L0kHUaWBKw74N3wOMten7ERLsAuK+O90yJG\nZVYLpeUr2GNoXd0hkpAa3KGbahmPnrH01LEbqPzN0Sf2GKdGSbvwAkvIf2E1\nIkDuUr5mnxthEnvmCl/W+L7q3N7FgA748zARjyaHYm2CKEqTL5d4Xi9OoPaZ\nFE2EaUkEYvYfc8ulAmFsrtXSX863CfbCLPoY/DHFrkZ68LR0LeaF2ovCTlpD\nNfv6tnwNg7IOxm4MHcAL6KaISUjDuqCHuSGyRsjzmCv0c/jmJ9t9aISgBxP0\n5CiZu16OP3WwAQYX92z8kvJvxLLH3VfTNLezkf35Xwmwj/EAcS8vRaMXKzK+\naFmI\r\n=avzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"85aec4f7abbd7a289e7ad82c3dcfc465d84184ed","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202215121353","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202215121353","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202215121353"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202215121353_1644063275738_0.016344993060736668","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215121428":{"name":"@chakra-ui/system","version":"0.0.0-dev-202215121428","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202215121428","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f5b9a103bdd3a4200a6e9605c30a55c5363de814","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202215121428.tgz","fileCount":34,"integrity":"sha512-t1iHI2q+x3oDNHc2vX9waZ/stJP3MwsHSYjGsOxK3CwGieDCkjbo3vyDAeFjcGMxV0ifM82BjfugnFMDs6pa0g==","signatures":[{"sig":"MEYCIQCdQr4tk1U5aHnQisj5H+wR4CBwfE7m/E7ugWdkcdGRUwIhAOuFNjWUxV5I/y8J2tCt8NNER0MPSKFIDo6mLzqRRgnO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mpMCRA9TVsSAnZWagAAWTgP/i+mQVpbgad4JTAMe6oU\nZ4ya7oExhOH7P3s3z0DuiKWMCXRDDlV513uQH3ASZa522PhX0n4MwiT0vdKQ\no0WreZewvDjy/8BddW8lBKYkbqS9shBMyV+vCaw+FOtIrEnccUgTur9+fFDd\nAHNft3OiRgIMPdf8QqQlDvzJkTaFvPdAUU7vS/JGW+zgLB3H68sg6Si/sZZJ\n/bkxle7XAfi5Cq3FuPlDv7XSIGeJmBrZq3UUJrIG9ysQCYakMCPINBebU+5U\nBpAMHILVS8aiYNViD6rW5THBmnm7UNr2o3a0UORURDch3Zx15JnHYkmg9WdF\npPCRoQ4H25XRNXmgRX53UOnxSQz2D4SEDfUxbmMPAuBeNADjW5IOFash50SJ\nGZkvBANwLSOvFTz8H6XMXho2SMNWDF6ZYnXYzDKncaToZy5TPNBNyUMbpzPs\nCsM2yxnzBrh0S+KB0gVexrUGcEyqKFc0/5OiWF8aqctXq9hwl+cvCU7kIA7d\nzInD+FElCx4LyB3L78+o5al6Lwz+p+5E7pJU8ds5bq42KEj9Wc6OVgC58rvy\nF/wnr/2QlhUW4waZf6OqSuaywNxWych2MrJeTljHV3oqwHDH2yVg9K/u7xHx\n4x/MDOwrONNQLoakSk045MtpL74iLbcYlrWwbY1JdFkOhHy2jYHmY5h9hXuj\nJvlT\r\n=466O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5df03dae0203f8d26ef7213b66e0fb26fb6a69ff","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202215121428","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202215121428","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202215121428"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202215121428_1644063308405_0.9145177907571449","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221512173":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221512173","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221512173","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a1b570df589cd2ca2d095fd2dae9d900bdb4dd40","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221512173.tgz","fileCount":34,"integrity":"sha512-M5oWDAcG9JjIA+tkW6Yy83xYrQmu1NTWnP/p/i6X2VydHo8yzzG3T95DXkFp1wRGs9OTKAUvaPZXRfaAcJLiig==","signatures":[{"sig":"MEUCIF1+ta3OLmj7FC5aUlfP8t3vwJwZNhfL44eO2oDmesPwAiEAtfB8MaCdVcDkJ5+YluB4Op1pgbE8BO4DaDEkUWHg9hM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/mrqCRA9TVsSAnZWagAANu8QAKNmNaAPom9IECV/3SCZ\ntEnTxMXlEQzpPOb9QN4lo1Bc8gtnCJtxAsBt5LKFNoXWM6qPq3R+Hafn+Iyt\n1U7y+1rehvhNpm1m44WOPaB4fkiVJFAZnzZdB45i++8aigNDDUcN4p7VxkQT\n7NK6lCAC4YgSmWU+sj7bH+ESojT2roLnmPwxecj3mDPqBTXAvT+KmQqRbs31\nnEElMKDzYzjB7wF/UGEb5mS1DjUKR/JQ1Ih+TYa2hLuYSj3Oxnoltc2S+wGg\nyBWq8llwefpONWF+OLEP1dZjCXLOQwQFgDA04pO7bm3bWFN30h8MGlSeZZyP\nJGR45XaYOdvX3jXLAvhVIsX+zhNxTh2gacG+Y2+MF6dcFJfPxJzsymNkLYIY\nDM8uvp9PI9VizSZ5uK7D3E1C26GcOEoDFtEooQ8tfcS1RkTJOVAoDdioHEbU\nwnr3ztOoByjrCUCODBSnh/K9KmJtAVXwR4GCGQyZwYGgNLZA2pXSwRqgzBeh\nbY9Z3ZFsSbAs0aRcF3J4A8L5pqUUPOENiYi02JgIeU5UsyItg9O9HLKLFGWr\nMjUTQ+gculcmsXpEamtedKDlp/x5trveOmJ0LtemUPPwnw2zxTUAnheyIIAq\np4wmbgM15DueHm0eSWegHnV4QvjxrCwu5FrRqOhj0QylI8erdNsJwCh3ixlq\nDRXh\r\n=7cxb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f6578a1b76546c9432d9bcf06acead17d68c62b1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221512173","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221512173","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-20221512173"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221512173_1644063465945_0.7486479260254348","host":"s3://npm-registry-packages"}},"0.0.0-dev-202215122415":{"name":"@chakra-ui/system","version":"0.0.0-dev-202215122415","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202215122415","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7534511ea9fd9e94fe8042d4992d0dfe58b35dde","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202215122415.tgz","fileCount":34,"integrity":"sha512-ynHT5flj2V+aSIDSm7/k47aE0PhnpHhiHL1oN3v76zo1u/WVtjFixVzPG7ZTKPVQW36ubOSEEdShJ7EV3VJDjg==","signatures":[{"sig":"MEUCIEklHUFucQVU6ULft8OUjJ3l/M5JXm4aZkFu5pbIuR/VAiEAo5J28RByrsSpGXbpvGA5GWiM6C+se9D0tZF6cGuFaUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/myhCRA9TVsSAnZWagAAgzoQAKOymP3jNVBHVsoPyI1l\nQeI7UaFBGPBCeRBaQ2qYuGueMUZUsU5xPNGeBUQ6QOm8F5nLaywR1NWkdCE0\n7e/YJn7QeCPb+gVTt7b4p4jnOCfnU3Qp6o8xC+cEWlpUjfmbUgJfEs9VaPGk\nrNGEBmnOfaY8yh0k/MK3rzCgTmbom5NWya9RKKblPcZAXCexNNxHY2nKWYZG\npSBmA1nx1bYAnufdh5sDpPnW+GoF6W2GI4xUO3dhSLSm9Vc5lulQI2aEuYHp\nKh2gq2lYiKXWcGzwAbyiCN88GULxs8OJESDGVKpu/FE1nuiVn8pj9kpp4aiB\na64mLeH91QTEBeaEIdJ1UKQafYS3+cnb++KJYBZv55n9FQ6ksfBSN9KITMeS\n3XTSo6COWM6I9WfoBemDQh/l9qblktmu1CPnlhKOp4dZq1paLTKURom2m4UY\nftcHlPJNCTJT1GaNAsz0VNelb/tuTCYOJbWAb1B/doa4FaJM9Z190/BocRDX\nFRigprZTj8Lu7GOAexsJ/nG0b1YlRM8GtFV2rXe7jCrf1D4IUIVKkjzYH51E\nLQnLqMUeXK5gGV1WHR9J5K1f6CtxY/d/A/WkXqST8g7V3eCgUREh0Z8q4FXT\nmoyqMia3gnL2cKLnusZvBGIXf/WTtA/QTi6EswqTNO4bdOaKPQyBJz5/qr2p\nlgP+\r\n=sLB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"01a939464a28d20ab27b38864dbc5a44078d7314","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202215122415","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202215122415","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-dev-202215122415"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202215122415_1644063905305_0.15223848221059577","host":"s3://npm-registry-packages"}},"0.0.0-pr-20221512359":{"name":"@chakra-ui/system","version":"0.0.0-pr-20221512359","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-20221512359","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d9c192ac47e2f3865e5a944869a8cf3948908d85","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-20221512359.tgz","fileCount":34,"integrity":"sha512-kTLyzLSaoVSD6kD6aYfP9Q1+AIU9qLV3mqjDiC1LjWlXuyiTvU7OsF5dxTMlrpA0PeGCwO53bJzHxkQVnO0wgQ==","signatures":[{"sig":"MEUCIEIiUKqUBHYYgaAoofMO5nwQXtqvCWj32NVYbrH40Z5mAiEAt5RS+Z05mk/WZ1sa7Vv8u4ZrRx2T0azOZwwRW7jorJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/m8rCRA9TVsSAnZWagAADFMP/3+fbqlVhXyUXnlTuRyO\nOY6MJy0UelmWJtCFNwVIh4WfoJeUSsMNWn6Nu4YHdP4m48v3NnwYCayYK4LR\nqR4pc7hMSTNOIeHLhvZPhJE07ELPo8sXzUEsu0bbNOsI0Lo82CCerGmounG9\n6urV/atTFKwNrx0sSJl64yt+19PM1GiS2bMU8epD6uZtTEqrW/ldCw2Fh++2\nHkKw5tD2lKnFgxwrD+I5qt++29n2XkTTfOt7Rl9dpOvQTghPnznfXPms5CR6\nFsr5H60Q8xYjbQVm3uSMakY9XM2tXoS1hiKfVjnhvsHuqM3CnHCzrSeesKaB\nYrzLLBzQn00YEK3kXWSG5qQUTJQdOL3er46mWIEgePoVimK+JKzbZSGXMy5k\nZSZcY/lexEg1kg8EYKTVy6VsnEnaq7gx+SyHsb1KGw2yJQVu/ukioNCWWtfq\nt2ECZqk0RjS5IWcJbhhhc7pBQ+qbYal5zYjDi3cbjOBXo81GIYhpr0GDgAPe\n+lYoEHJjSuJC/EeEKmKc2KJpv5i5FwrP6RaEyYexVTnsPEQG57BqkRYjbhDY\nqa7qaJ9fZ4BcvFRlKj8kul30/IGIAer7Ki0fxj12kkACBPw8boADQQKU6mEH\nrRE0BinbL5qPc6QHdtnNnALInVW+hiy9uWg05UDhnRCynVnhqCitctGEJ/8v\n/4ql\r\n=uLqV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"df779e921c2c95e0cdb5dedbd4283ce7f149b0ce","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-20221512359","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-20221512359","@chakra-ui/react-utils":"1.2.1","@chakra-ui/styled-system":"0.0.0-pr-20221512359"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-20221512359_1644064555558_0.6439816289069753","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215125733":{"name":"@chakra-ui/system","version":"0.0.0-pr-202215125733","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202215125733","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4bcb3ee24fd5340c69150a278be8ad841738e33a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202215125733.tgz","fileCount":34,"integrity":"sha512-TrDveYCT2iRRsNW73jgR8SpM7LOC/wT64qMM9iY3nlHCKB37tKXvS1xZiOzaThmx5L91myGuspZWqQ39UodCng==","signatures":[{"sig":"MEUCIALRwwqbaUBcR84HL1sQDpzbwUWIaSr+N4Wmw8qaN2VnAiEAypuBqxdT3J6/BoSLKbilLaK9dTF0DIupqW/kZ2R3MGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/nRuCRA9TVsSAnZWagAAMfEP/33U/xONsKLYwXwQp5pJ\nDQrJeIG4xTaUR/rlODrYt/hoEHvBu4chHQ9Dl/2CRUBcG0hPeN1A0EemrCjy\nPUq72UduzC2jCAMG/5WYe/uV3zA9RIo0ytoV7m2wKoGu4aKA6zE8vw7flFUW\nUqJWkc1VZ1ZNNwRlvbuiYY6xbgWcqDWQ432wTbGUW9AG46ayxFdy1LsN88U4\n2MPdJyO6A5oof37yAAdDtIP+GDy+9RaPJAKyVulJNWWRmlFv59tMPa0CAYOz\nxMjjL9EiMbRu/1u2HYXkJ4onJ0PXVK3XTRMlUOVIqraNZ3UgL69SjrEBWgjn\nTA2rf36RLbkynVMiuhqoNbmK1GL6Q7k2UgJJ2KtJWIdeVBgPQjhoClmNti6L\nXV/zSN/lNB62rFZIVfD6AMT2uQ2nXrDUOgex/YJqxzM5gGPSOOKACxsp85Py\nLXKoHGa2udF8cVC6D890nOio5E9bXJjrNayNS1VgMzxaDVrkGXkLW30Jqwg/\nxwdPHl6z9zwbbKTYl/G0tZXfFunOYRCzLBJ7oyZsKzMuAC+EuQTKA5dFIfbB\noqa/L85n5oAvDlSA6S9L1u/kYfHVbxbNdEeE2uvOwjy5z5m2C1LSePEuVVq1\n1pg3OhIuM3uZvnqkXo7xeyIJ2Db157U0cHIwQuvCkGTBDOLLI/dg6kRYQXJC\n4Ysx\r\n=44Om\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5ec7ab0c37978861b0a67e7f31aaa4157f05cc4d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202215125733","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202215125733","@chakra-ui/react-utils":"0.0.0-pr-202215125733","@chakra-ui/styled-system":"0.0.0-pr-202215125733"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202215125733_1644065902588_0.3811557315677363","host":"s3://npm-registry-packages"}},"0.0.0-pr-202215132532":{"name":"@chakra-ui/system","version":"0.0.0-pr-202215132532","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202215132532","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"558bc60af667484285d32d96b624d97e3dab3e66","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202215132532.tgz","fileCount":34,"integrity":"sha512-2+lvNkVn5aDWMBNpWeE6WIl8xYUy/jBi+d86qOZx7JebV8X7rrxb8ixjffpRrrG4AMOMHPYiBH5Ns/0eUvCtjQ==","signatures":[{"sig":"MEQCIBLPkjVydG062mwVHqyplTcuegkSIoHL4ZDa8HLNHJoEAiBQAspHDOgGcrxVROHPASTNONy4ctaVuotkx2Jpiiia6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/nr6CRA9TVsSAnZWagAAsA0P/1C/VTwIPIHifXeXqZrL\nwe3abM1R3IblgjcAFWf80Pdw2iV9M2nzg5Bv/IoAxxjh1Wn3qGEKJT1xMUjd\neEcutBTt+VLi0dNvfqCDoThZ/brFtk+uJcUxBri63JMalsafjRJLHUKyCjD6\n6mrRLx5OZbBeWxlyv0Qf2ah3626aZiSUbnzCta27GcwZVfDZzb7dwgS6ytRp\nRIR5dUgWK+am6U99TKEuCzo8h6Ri71tPGldJl1Kkvml39Sz3iawm41/J/clM\nVaqxd78fHFvMF5lgBjLqL+YWCLFTF3DcVmj2zJAfa2uny77cFKJ3CT+oc1Pk\nv8ys95iqYcJm0ZDaqTfvjA+5+IV1tALwth8h20RSjQbkGIn0PgncFWqGY81H\nj7EGeQqEm2dMtYAK9DP3DEgUYkEl5NFd9MmZKmT8xEpW9R9caIVlcRQPHet1\nbbY7JFkmUNwtdwrVTgo1HTOe6X++Z3IY6m4HQD/CJzED+Z1arowqJpRkSqe4\nw9BSZClyxBOjHSVdHNwRKhgnmULbmijRioWTXEdljy6FnIpqljW0QTFXCMSo\n6ebpoqzoMv+LaWZa6teZ/NJqYm9coroe9CNw3Ffp5Cr2PVlvcB2Or7e+XiaE\ndFunFT8XoYUqozhZalQPiakKvy+ZeViqKUXlW8y3gep7rvv59RrZUXStz6Fm\nHNbA\r\n=CDwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a503acabefcaea86cb7f40a6305830f09d2d6083","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202215132532","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202215132532","@chakra-ui/react-utils":"0.0.0-pr-202215132532","@chakra-ui/styled-system":"0.0.0-pr-202215132532"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202215132532_1644067578358_0.508152829743383","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221513279":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221513279","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221513279","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ccecb48bbd10ddc2df6b2a282aa68bb5f643fde9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221513279.tgz","fileCount":34,"integrity":"sha512-+yxlsdpon2pFVOJ9p7Jsianw5pgHby7rCH1jl75g271RaleP88vbpFL92gEocZLt42/VMWwq0J2M0n7aokpsWQ==","signatures":[{"sig":"MEUCIGMHIjSNBg/GaySo856kW0SorUutx8kol0vh9cKJQBjeAiEAksagm32ZiyanYJOyo+zldnf8jmAp8+lPEuQ+ZwNlH5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/ntjCRA9TVsSAnZWagAA8NwP/jvse54rEGAsBu6CI3bK\nlOwmDc7CsBfi45DvfmuMTwZ3HZEBM49qmb6hy8WBTxdmFyb8E5jROFM+HQLQ\n3PMrscfvd8hMmRf1VieOyg5nmM7j0aeQemHnrKd1YqXuX8s+MLAI9qewmpbi\ncy0Az6nt76DkcCRw0O5hR957y7TEt8X8kn7gYb/6YSqQHvmpKRz1L78arqxF\n8kpUCum/FR+91PGN5NfPQXD2G/NTE5eLAm+YTeYqi4f2t2JBdvgbnWftgoDY\nAb+18vWbdbZIyXgof2uxRXuzQH9fUtjYRsYVqlA45BHg7EM9tyGUZX+fVLY+\nX1pTc+uqz/rVc4FGOVdXuzlxfTZCcvTvUMKrk0TwHEX08vPUHo9PbJltbDcl\nkBLwzpDs0tUCr/u3qHOFVhfdj1eWGZHa4inPFfGFwI0B78qcZs8RyPzIDBUY\n5YprwNbHeIDpisff3h8PFQvu3NgVWxF8La+dETPzra8g07j25sz4E4YhrDBC\nvvf7hVHa82+etQJRXhKSgyXjL++ToyELNmSV7r1gf+0NLN1AoxqwLbzVf+fv\n7ZvZ4J/P7wMz2IbxtI7fgXQOgIrlNOEIx6bqk9yeBKyNiF7axfxZ2Tpz/rNt\nU0D14rpH5oNdr94dVBEs5jFOogKiD68jrvYc1VMzOQxYZ0RGl0sQZc+zQN8d\n5U/E\r\n=si5u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a503acabefcaea86cb7f40a6305830f09d2d6083","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221513279","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221513279","@chakra-ui/react-utils":"0.0.0-dev-20221513279","@chakra-ui/styled-system":"0.0.0-dev-20221513279"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221513279_1644067683792_0.7260697524897874","host":"s3://npm-registry-packages"}},"1.10.3":{"name":"@chakra-ui/system","version":"1.10.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.10.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b45948060bdcc3a2823ae6a2da91fa219dd4afbc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.3.tgz","fileCount":34,"integrity":"sha512-am/0EvK+F+kiZ99ulhUfaYYADlP1wI4Zw8IWrsaliSfqSB3qgKahNC/U2A0nWG9T7wwLHVGO/ehCNfAKP1aK2g==","signatures":[{"sig":"MEQCIBj4k6fn/uvCaFOXnRuU8bd04yrchDmwoZOHoRQ1Cr19AiBjR8+mEeCKSIUYwKRNNlxmnN9ukqH2KiYrOO0bTEkfTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/n1jCRA9TVsSAnZWagAAyyYQAJev4LVNDFtryRH6qX03\nWNU2fcroaWu9QF1YCPhibIzg7N7OEyjgy0wa0Lk70TqLrHJ65so4X9kmbW9W\nJYSMVkbwugtnMutZQM0Qt18oyhrvPu19RNbsXObOaHtf28U4wBiAL7ydebzi\nrlnEIxbJlRVmpDwa/0Gzo6P90wOYfVARvJriRpg8T1cIM46tmJ0Vhwco6eyX\n/h2flejNPdppdLa6fqtzCPtghDu0lQOwQ3wCnFlSBunqd4W3XQxHgiyFikpK\nhTHyGFPS19azT8OJybLnOqnk8Exb5Pfqpa4YZAH4x3tr5CTOoopv9noa5mCJ\nNCy+Kb8O5z5lUyuzexHasCCcOEG7dFLpR8djr47Yd8ZXOxHCPgEQi2k2L9Lj\nFuF3un+7ZXVepp4BfGzFRrI3sAjICmZE18T7WH/RXqFNGfpkfq3TtN0E3Z7a\n8nYeAhMj+h843ph2O8869v52digxfmyqI422h42S6+CLmHFh7l10354whRDt\nLbGj2cDuaCzZ6W9TiQuzP8JfTXR3n42RqvncLVLItuZhjMDNYE5o1hrOdsBT\nRN17d6wkg2Q99ikZHFJTK2uK+6N5iYlwlLHAr0qa5q/kHhsvqwlYQ/PUaJRH\n5TTqr83Cg598Jt93mIkVrjIgn0Us4eBY/PLO9AmfcVAzUPITuVHsZRsPFJDQ\nG2oC\r\n=Kikz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"5a6537a05fd2d5600b7ec51cce47e0a46d1cd069","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"1.10.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.3","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"1.17.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.10.3_1644068195354_0.6359299300245886","host":"s3://npm-registry-packages"}},"0.0.0-pr-2022114224724":{"name":"@chakra-ui/system","version":"0.0.0-pr-2022114224724","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-2022114224724","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f29a39d3b9774f2ede6ed8de518807db067d31af","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-2022114224724.tgz","fileCount":34,"integrity":"sha512-24CMklmJxM/UWkh2DcXz3Ur2P+KHrllO/RTr6s7s8dkN0LI+yB3RwBATnDXnRIWpxe7IdwqZU5bvevuvKGEPyA==","signatures":[{"sig":"MEUCIBmhypuBSUbYmm1lNYMwEtcooMNFyr78MiXLlF4QgwmPAiEA+p7RvuNjvzjKlk3/K2+3fmcMXTeZq8ij9eTqyXxSgpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCtw1CRA9TVsSAnZWagAA9uoQAKFiR8NQfAw173kROKp7\nqztrwhguYZ0QAQL9Gy3N6D2ZWYbfp/TLt/C6kJr7wwpz0XssI5F3JxYHmCJB\nJmht7SVr1SX75hsw9UM+piKZkNmpSvKvF1GNUVV8LNtON4BAF3Ov5AejMyLg\n7rh3OvIQETe+sVOE56tyTaTfDJJbsAkU8heXnZa24draXLCkVhjGOXYkZfH3\n6QG9KJdemps9WU23PlIQ2LBP9Qz/lMiud7rUgpz7runa6kFOX5mkAFaxiBZK\nILrvu6RbbKuo41aEcfF+ThNvVxKzGQP+Qfd71ZZ5rXve0yiqWbEV5aEpbr0G\nYqTU1rK5bVEyXTeOD6WaDKypAiSbkz3O4J7N7z7134ohJYcUP7gkUrZIOLwL\n56Dnjs/ryOTrJ7T6Q+3i17Gd9Pxys8OG4z0KBUJnmC0yprtLB5KOFBQUeR/b\n24/SenchYHJeifmpL1EQg0GFV3l6sDMcdyKKyLhGOxp/nk7HanGmB0gPnYnm\nmNhKE1IR/2A0SDD2D5djus9iAeorwpb2g+ySjOZFFKNXRRaqU49aMRx+d8g8\nzoWaAs/qhgNJfkGyKhfDYnh4CgkML0k7kvcnUVIFObAnpuaRrRXhvYwEpDBu\nqGX8rA+QOjmIbJ4mmD6Rr94ba6U+1a6ghNByNbGCyDKWfDEQGPM1rw9YuRtS\nMA5E\r\n=FFeE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"66e3fc3a07c77e7c46e5caab030e238f1771224f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-2022114224724","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-2022114224724","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"0.0.0-pr-2022114224724"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-2022114224724_1644878901161_0.029033338642616036","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211594731":{"name":"@chakra-ui/system","version":"0.0.0-pr-202211594731","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202211594731","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8ba6242e5badaa565f2321b654dcb62cc56fd436","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202211594731.tgz","fileCount":34,"integrity":"sha512-J+nrtwhwu0QFr/Exq5mKnXK8fP+9umyFhyYvdLg5qDllEbcN181K/KAK6CtDDxW2KTlkJkLGpTfGT+vcNl5oUA==","signatures":[{"sig":"MEUCIFDObzdNpUidAgZPzGX7YqaCnfDAuhzrz2suK/xG7I72AiEAjUHLZOSCR6M5Fhe6f20x+4aNtv5vTBXr988FUmmZa9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3bgCRA9TVsSAnZWagAAZuQQAIgNNlZ441mt3+7pBFcY\nhEGT58h+P86/iPrWksWV8zwqJOOxNuhftQ8SiUlApBg2gKEqDz++btE+BMcN\n51VOs6jIdhiHKeL9mtd3rzXPn7jAWVqPxW//NYUq8bSrf+uLBzEMtzhEQl5/\neB4nghu/DVEV0rTjFt/rv0DNeiPhhg9zc3y7UYll7cR6PD1LeK8GL64ya1Fy\nZALCw3gYMRsBT0OrDfK6q3+ZifhJbzufI1XBgTCUFaCZDDd/Ndb/srYD0fBA\nfE3aUm0U1TaGH2x8ygQ1l82m3Icczcxo68TncETR9EU5wvfYhiXynmVN+NtW\nxQs/AXcdVNUf4M0DZMnpPWpkcMy8R4ylRRHepwpm9c33vHiO/xx1mlsZwnAB\nLCrfLlIWonxiFjozkicC7jz7oKqrGtS7HqKxL/9Egv8D0xgiy/U4eLvjU4Um\nwbcdJzRwv2u8Si1zXw3wsAGb4b9Ame5/Ss823v3YbHKchg8/KCCUNpuVHMsY\nsbFW+oJ6OREXLW7ISqdPSFWQBEV9d0TbATs/EDQ7o92WHdhR3On3T0o/3xjo\nxOkUPT0GlXE+E2GA0T4Mhh3TI3yLE/fE7MamLf1YKcQ+mx/sS3/tWiD0Ghti\nLu8PezQHXNe5kDA6GhkjdfbEvhLA0BebvwBiZ+P6qwaTTsunIACG9JeXW2TY\nwkkL\r\n=s7qY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"66e3fc3a07c77e7c46e5caab030e238f1771224f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.1.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.13.2","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202211594731","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202211594731","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"0.0.0-pr-202211594731"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202211594731_1644918495978_0.3388644994065455","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117131714":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022117131714","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022117131714","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"993cfd31000617c18c12d0d2fed58a03e91e08ef","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022117131714.tgz","fileCount":34,"integrity":"sha512-KDM5M+L52W0IwGUZvyd+yi33ZPUxc5H9AgX5ILe9lPMUxkARpOs8ccR+3BK8SQFxqTWMGxfaxfnNxTeG+Vd7ew==","signatures":[{"sig":"MEUCIHSJZ4ZtVlmHvTQmVxI/S4MxL9n9qgLpDR/wf0tlvpKsAiEA5ZEG+7hoinuoDAxzyZ2LmA7WMJpMOrdBKr78U88OszU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDkr+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Tw//cP438HFJdooClloAlRtNizUajuBnudsNc46MrRIQ5a9ZsX6L\r\ndHF7MoJU/ZjCeRHVD28DSASDQBTZ2Z/Uh7qyUqFi+5AbN/LW22j9q3zaRog3\r\nvvrJtpPmqr85j472HzdLfucfBrlL5gd+tO7RfZ7jAviyN2FO03M9D2n/3MR3\r\nVL/SErHXJVB8d6RhTqQAVe2m5ZDcL4vo9qvs5ApgtKOJdrQI0PaJldiH0c9W\r\nE7jCPWoJr4Y5EzzK1j4z1YO8FGpXFfHz156wsikoD2znYv+jeG1kwIidfx3y\r\nFnaao91eLHYnysycLhDY6v90KFagR5/lG8aHBqefok/1uLG4ZTDfdzTN8sgC\r\n3RQZAzk+iKr7NtbNqwJJTt2NoC3vmnE1dMkHmjforJfFd/9dvC3nIZZcyutC\r\n3k8XiP/VHGswu5FPwOZUGGCm26RXfxM1CBmG9ggJwHWerNmf/zsEg/eYbLHH\r\no5bU7IzpbxlaEWzsFlU9Y494OKK/cnlWqEC1cVX/aSM+5xTuyCyAqFSgr9ln\r\nFhCZFl0sFU1GdLgi4aC23hncJtAo/ihVJTF/RkOqrT7pskqWKtCJemjHVEYr\r\nDzYTTPmxz2Vz3jbB+TYpJjkSJpIlezkai9KQ9GIqq3UkCdaWesKWoQR4q2zz\r\n/zVBTI+B0v3bgi/JtZQfyLTqSBR554Tj+Nk=\r\n=r0xl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a870e6b94367b7c6448d5c5c5aa8577e33e15e3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022117131714","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022117131714","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"0.0.0-dev-2022117131714"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022117131714_1645103870712_0.822036595662516","host":"s3://npm-registry-packages"}},"0.0.0-pr-202211713187":{"name":"@chakra-ui/system","version":"0.0.0-pr-202211713187","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202211713187","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cc741f7fd046e912a3b4366a3bb5a6f39e18987b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202211713187.tgz","fileCount":34,"integrity":"sha512-37OtufWo6JNH9JTIKiLj21T+evk+rOgTeVpOY5sbufyiVpWh/zJZ7Ey8d5F4fwQ96SMlHQzRMWR7VVrWTAGIjA==","signatures":[{"sig":"MEUCIC6ke+ndUyXJZsHdQ16q4TdK4Fj22wsvpU0t1KbnakstAiEAubC2I7qradJZsPRHgbo5J97IBswxoiYT4gcWkwrElT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDks7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrcww//a6HkdXxnR0mNh5y47auhfVRZ9reKzOiuL5/U4Tp++ZnMPO46\r\nFOD5vFqUvPlnIGeeOt1c2gkueaiC1UxDPuMcvhO1n+B1IEGOq0gp4MwSRUyR\r\nslGd/X4iY/3QIyI11MTAsI+WapWzcQoY1P1yukt82KioINm2JBKX/b/DqzT2\r\nTkrAkCuf/Z8DZJhpZ55pcEL29wa2zkID8LO04TDZxOqtq6K4TkplHntTr5PP\r\no+4zB7MXujrAbkvCimQad4JoU0lUmQnF7/x5mGtGaGl5v2AumZdfCq9k/8Q9\r\ngOYY9sRZX2qc4ZPTDFcZIIbsL4tN9Oz4pZu0g8fEBPWiQrDHfEf0DOMdhWJN\r\nFXVaw+TNCPbpRfM74aHc9e9GXbgZxjMtudAk8VNXVrF6e7mOcXu3axFAlbP+\r\nRKAhcujm12OqZWZwjDzJS3jObZQ7hq0g6RjQCG4rwxDxlH4L6YhVBvGwD+mb\r\ncqUFj34WE/f7rPh9JhqloOiiSNS0jlw3bGsR4zAcR5lNghSXJYcoE8JY67uB\r\n4z9P2CLpl8GHxqwwY1wBuG/+phSCRWqa02fKmry2Z0llMNtUcS9HDPAUCWUe\r\n4w/oidYPiw+s15AP66IPeoKz4CYx9g6E2g3OtdTrXSk/1lxxStsQUcrjnL/a\r\nJWyMaD1J3F/vKWz86ihdjeHDyW6sdq7Siyc=\r\n=pYQ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a870e6b94367b7c6448d5c5c5aa8577e33e15e3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202211713187","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202211713187","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"0.0.0-pr-202211713187"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202211713187_1645103930972_0.2837806196691064","host":"s3://npm-registry-packages"}},"1.10.4":{"name":"@chakra-ui/system","version":"1.10.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.10.4","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"96cdb8a11b8ad4fe06ae42b927bd1e064679dffb","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.4.tgz","fileCount":34,"integrity":"sha512-2n5ZKbiJ8BNBDDLrhf5Zrqno1pTbdditdm/8m/TN3E88TQzH9re9ItEOat7z7pSXv3mDcum0NqfZ/y0m/6IQUA==","signatures":[{"sig":"MEUCIAHFdy0n12D8hsl6MK7gk38sQgT4yZn9nvqs3qrMyqZtAiEAim1FFldfoEM5GmjOiE1g2op9kNPUQsETfQPhpli2YvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDkwCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Aw/9Gpa/Ii/Sgphc2fYUolgQg8xBeq//NfiCEDLoYK9GuMCP9VqB\r\n9Cwy+cF2PjRSQqtIklarf2XYNyV626NRkxtqVsgU6ZW5nAGoNkoQ1TOD1nwo\r\nuLqTDLGjlPEHcdTdpQbg10xAIgaQZhpMXbKcajb2hfAJgyNAji/5zdftqbr5\r\n48ObMuohc4KuNlYiBSOLl4xM4tVfojTUHQXdlM9nxW9GBrVV2/5xIE+eMAxL\r\nzX1MHX8HvvLmHYUmCLyAPzdgWNM6oAW8lRoFSzYvNwGK9jVMI8kPFIRyCrkd\r\nttSjFzWmCr6KmXxs20tyGwUxTktSTafd3vn95ZnETnEO1DdjguKct7Ao7+cB\r\nBR4QKFatgr55nbWb3ZpBtfFQvvutXACeZBzn+oSA89C/8K5XUDeUVk90LXIA\r\n4NvT0Hywmcw2Ui9CTnZSs5YOA0jWhXl0uftFrZFojL8EAMNgAGehI6kkuZ1+\r\n5CZJvdLk7iEeNpjHYPxdV/FwIegCbIcQY7BwOtT8EmSqJ5Lawkv7sD3jdOjp\r\nZa/GjouWkIPjMoTPSHFMAPGmk120Xw3bc2RUUAO7pB2TJE+osYIq6OUVszpG\r\nfF98sff5a7eQTGpsCzLnj7XYx6bhsSgTIxpkz/bkhteVmnN5ca6Fvb1NfaW6\r\n4k40vOq8ktZkH8BPvlZG1MQO83pdTpiVVCI=\r\n=D2TA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"0fda9bfdd90678f88a39c3dd70f856a7f010a585","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.3","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.4","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"1.17.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.10.4_1645104130564_0.4139575890498577","host":"s3://npm-registry-packages"}},"0.0.0-dev-202211720414":{"name":"@chakra-ui/system","version":"0.0.0-dev-202211720414","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202211720414","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3f3784685cd2739da0385ff7b52261773def649d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202211720414.tgz","fileCount":34,"integrity":"sha512-8Br1Vv1CwWR5dCjPzoBf2qXkVJ3LqC7WiREdQs01wp2kPlT1+UHFXy+fvTCWj2bwwMRwO6R32awsbXmB7K6TsQ==","signatures":[{"sig":"MEUCIEOQqMzg3jDwwBvMeM5FyZuL0A4zY4pQQ+H04H0XzzApAiEAiuTGbetpmyOxrefX4EQb8LMvtix2lzneLEF/fNmLLVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDqpkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpweA//Z8cMdqWfIw7CramOksLyH2OQva6MHF7PMd1jFLDJY3ho9AGT\r\nRg+PMAq7+kINheffJKGY4VSkcOLQcqfxwxVvragYctMyAWc845NcDkiE8nLj\r\nWOOKn4ihayRFfLKicHUI1UcY2PKAZ9C/4TEJZX/WCqSNQmk4dSJbQF48LecQ\r\nZXbZiCG1oaBajtyuf7hOoHUbRzhuDqbYJp7/j/zuxdMcyFeFF5xqqeEtAwh1\r\nRTSQvMZyAqd4ndC1vI+DVUSMLhJhnyJP/vYuFPWXmzbRgtB0stZpTlASoRTf\r\nZXnA75AZ4N5mHKwUhT+4Cr0CYydfblkKA/PWAevz41PazQQSLZ7ALDCgo0q2\r\nafrxrTuy66HCmueE3zqGF/yiz/u9e5eR37qmBCS8vRxxpPNFjPQNz+LEQGXy\r\nX12fr92Zr6w5VNOZEG86O9a01EN4DhuWQxkl6C2+d5B7nlmKXXoi84CQFrow\r\nKI3R/UmeQozbNrf3K1D7d/yZMOXIC5NG7wJtO4va9onBjjzruK7ULPvkKZR2\r\npwkmXHLX0a0T7wbWB1QMA8VgcduBwo74TRN+S/8/ew0ZDFYkt/qs0z9/XzqX\r\nmbxMspujAro2cQMk26BDpvgS2iCUmzPNqbu7TrW+niysEphjZbNqavLIH61w\r\nJebkbObeYpX6FQlJxu9YdGvWh1HNbmQED8M=\r\n=Yu1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"20b7a19ac5608ea52e63c0ecc7e680591d7f4366","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202211720414","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202211720414","@chakra-ui/react-utils":"0.0.0-dev-202211720414","@chakra-ui/styled-system":"0.0.0-dev-202211720414"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202211720414_1645128292146_0.7524545808750871","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117201925":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022117201925","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022117201925","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1de24478adc6da30a19b956029836479126a2675","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022117201925.tgz","fileCount":37,"integrity":"sha512-9a5VuA2L6w8Lk3Z4UUuFhoPPPSlR314CtmiZQSVFNgfK7HgnZb1/AXeeq247UcZgbkUyLMc9QrshL9/O889Q1w==","signatures":[{"sig":"MEUCICQVT9+2ocodDXGZbRpDogqLc4p1tdpdoLKMx1J1PYO6AiEAw+LwARTIlgCWvw4Q0QD0NRgoXP0h2+DR4J46ZZS2txU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDq3+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeHw//ch56lW4u/AmijhXr3QIbMhFaJ9O28mFqihbFhPKs1uExqF3E\r\nbGMh3rj6SaZL2cwPJv+C0+Mz1nDi+Bnp1VRLRn+WhG7885O9H+X8xwNi2qUC\r\nucgDwcIfIC2ghOzxv5UqcSv8t+f9BiwiRKDb1b3Lhb4dX8q8IJkoXElAJ+jw\r\nSakQxxIn0N5hcZnuqQsbYv19o/enw0w4YsA4b6w76mqabXF72x3b+Fcyv85F\r\nH/NvyAhxjkA5R+WvJYRyf+ixMf6EYy9KIVJ1Y5m5MbZ2HiT84nKPuhh7lLbt\r\nTjob3uOeor8mDsXT/MlI+iEyQBSSXezO+wHsvV50cy5JkTd92ZtB8a9zREXi\r\n4D/dllZh53nus3lBKjawh8fau0C0ykZfXwiTvoQHNdI2uzugf18Br3OSU1nc\r\nNkVxW+31j4KM52zlCIER4RLmG7Wsqm58sLfzwuIhXp9E6RUCeshai7YSKeqq\r\ndl5kvqia2X2XfV5XXFRaGXAd66TZNOf0Ke4tN/jGgxGpHRqauClMlfFO1M3o\r\n0RLs8ejOfleeug9M01CnTZtHkxYtlwZMU+qglJwYkVnr9hMSDuJR6aHo2b9e\r\nFMmhLDwsgnvWT69rcK3xC9tinbdEF4bP0BsTkqYiUPQ2RqIUtivyfwJzQjA5\r\nj3I0GUch9sxj/qHzoooRmWtCBxlwsHxG5To=\r\n=tC4x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e5e0f255c95f5e41c3b17adbda28fd09f7251642","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022117201925","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022117201925","@chakra-ui/react-utils":"0.0.0-dev-2022117201925","@chakra-ui/styled-system":"0.0.0-dev-2022117201925"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022117201925_1645129213854_0.9576763578439893","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022117203714":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022117203714","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022117203714","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1bcd5872e153d113fb6e170fab1d3b6a5e6672c6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022117203714.tgz","fileCount":37,"integrity":"sha512-zkCW4GMJ0SHiWNmb4eQUqdF8ND94yNBR+FLDqJlmaIhIJFdSb3K2ycDp7K6pxGnA7wFnW+GvScvxxbd/uXmEeg==","signatures":[{"sig":"MEUCIQCfHtCC1BM3LE74xX2pLE9xnbWIBwoDaU2E4DYQ3qXEjAIgUW4t9FWdXqBlGb7O+lNHTudRKvUGdd17IFqgpIvW+w8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDrImACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnVA/9FNcVl/FwPk51kyxkAJ5REjOOeDzGG66VbYymFIG2Y+8Fcnq8\r\nVxTGiDchXEtwtF0TtO3/PgdPVi5D5CQkS40ZOczVuBC9n6YtcdCTheCb60Oo\r\nziIQyrpzfSCVsBl/OpZn00+zzCZv5RpC436183fEL5WkC4qHl7YpzMElWBJu\r\nnKBgJwR4yIHkrJwfyReKV4mbzBY85j0vz1AbmyF/YRhuYT4AZw6YvuyopimB\r\njGoVNeFrIN1kMcCCEu22qGXZBps3EGLR8tBGAvq9CrD/7YeYhE0AncsSYkKE\r\n4I/tusONWx+TSESzMe2XtSC6KbtvZMCSpoM/fPDnqF65qx2dll/eI6r6Idce\r\nNletE5MO60qzHz82x+NXrWQ2pRmFedWjPaJG+YNBUp0H6cTKRrnNODS25vjm\r\nDLaL1KSUBXyDXGdK4ESEdqG23ROPeszgkImjxQ59Paw4nr4FJRfPMs8VVPY3\r\nOym3nZSwFifM3Tazwiy7JCIj8B0p/8tQ9GmTG6zPrLI1XsCCvnFApaviyR3D\r\nCzETEF23GgcALS6FTjyep1wKV/ruOXUK8e0Ja2PxaqZUEPVj30LB8Bc1wodd\r\nZvnvj88sElkEmYhRBra6pp/3qDcBHoJe7H1bnxE+di9Gd2mrV5nAMKXzQ9x1\r\ntDzlVvKtMxmyaah+1I6XYmDAYpUEyaydftY=\r\n=9obN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"0542b8a53425093f18fd86d2b55220d3fa20253a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022117203714","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022117203714","@chakra-ui/react-utils":"0.0.0-dev-2022117203714","@chakra-ui/styled-system":"0.0.0-dev-2022117203714"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022117203714_1645130278779_0.01263680060335326","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212083710":{"name":"@chakra-ui/system","version":"0.0.0-dev-202212083710","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202212083710","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e86a744f83193068e5297ffb729da06435b3b9c9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202212083710.tgz","fileCount":37,"integrity":"sha512-OVrpVxp/U4iBSuvKHYldKi6VZzEEgqKRL2jxXGQZtuCz08Nbe0fZ/nfa1uqmEnF6gooj8iqN3/hK+Y/wppVjgA==","signatures":[{"sig":"MEUCIAim3JLkSeKUNwTZlreaKfuWTfPA7TAllDxz3SZWuycKAiEA1mKz+SgSM/NftvLcNJrn96NlGBmkukGArmoWpmxS+ZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEf3yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA2A/+NblSnHxe/wLgGcGP2aOtw5p6jKZwp+kP98YoNDG+ktIAJk8g\r\nz14XulTpf1kD/K+OX1RqgjlViluBcKbJ8W7TGlavqd4jrNzcJXnwKIcJ65z2\r\nbxGStU1VMWL1G5jrP7IQF71U7IlM9YK/FFp0wrt9in++JrSUZTHRfiAefBtx\r\nMF0nRQ0RVOhrz6+gUkiS0jNNiI7oarW2ymcwwwAzq97WqSERP9EB6+9HWz9n\r\n+L8OgJmXSTjrckt7jYBleqDlVfM8GHUwDzrgO6oJ4aR0dg8kDHcW6zGWdNZq\r\nNGqmdvuiOPxitWM7IQNCVzYIe+np0Mte/SpUfBAtE8mcwotyxEpECxKjiElC\r\nWer4fO9j7R1phFQZnDUyEosHVrmZsYto+X99flL0w+BB9jwNaVe2vastzNuU\r\nPLAfoO5u3XcD4Gy9d4TahoZv55AZSgGBGt5ZKDe5HndMFbkRnXZoNr8SUKg/\r\nGo1HUviRluzAVvVxAEuRR5o3hboZOLzalrlF0+x4WTS2wnWUJJD9jE7hN9gm\r\n5mPckdKi3+OnfqpE2AT2Cr9nClGtoZuJY2Ms6HTW3RKFKQRYx2aaiu68KmTu\r\n8Ue78o/VoiLw+kWs2eTiD3xRFtgGQSMcb79N/WtBCzPNujCGju1CGJ5HDkFm\r\ngF2yOVDdDhxs997DEwwZJRw1B4iwJdV5KtY=\r\n=6j3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"085bbccc59f9c00b57caab647fabb43939d97247","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202212083710","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202212083710","@chakra-ui/react-utils":"0.0.0-dev-202212083710","@chakra-ui/styled-system":"0.0.0-dev-202212083710"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202212083710_1645346290742_0.059953866082798735","host":"s3://npm-registry-packages"}},"0.0.0-pr-202212011232":{"name":"@chakra-ui/system","version":"0.0.0-pr-202212011232","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-pr-202212011232","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e52965eb2c8833bbf4868bf42ae247a9f3e809c2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-pr-202212011232.tgz","fileCount":34,"integrity":"sha512-LJ/vB3C+IRYWipC8RXQ/KLzuiQzGj0ddNcVN9HyIHAasxoUEOup5//MXmoh7T2cVD/7+8o8cmdHzWvDh1bCWfQ==","signatures":[{"sig":"MEQCIEBy9GjjrQRH4Vr/qGZkl4IHztUF05dnVF6UP7of0FCNAiBe5YkqvFPyrWVVwcCsIAoo/aR21dPK580HCijIV27/7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEh/5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNfg/+IE7Gp+Crl+Yl96G0X7lpcrogLB/6COYX7WJDQBw1TZ3HSE80\r\nYG3YtrtHmW8lTrlUfoYG14jITZpv+adrWtyoq+GfSnla0vbhepCR3M0gfZzn\r\nxYxTTw5SMHdKAMwgD5TrOKxTQKVhEVA6BaxvDj6TZ91GdfouTmEDJHZCnZxK\r\nC198XrQ9EMousMtKq6YsfJSRQD+LWtXg2LSxoZh2DQzNC2lCQot6FHTzgHMo\r\noG8GYpv1RcfKnfYiw5ZrsopOOqhq/1sUXYNBhVMmEfm75XLRxWhFsEi5PqPR\r\n9Sp4s8j5XjwX5iBfXmZeTj65j/LVvHfrcFnLp/i1IMgQ0CK80trsCAX8y561\r\nqoZnsZxJp7m2QcfpnyjEcf88YYql9nQDD1chijon1U2kjIogbwcuvumt+ySu\r\nYHiBeq8dSK2F5jR6kNXg8cWa1Bw2nBqjZZrKOd/NI6QnKVkB/IE4pM8QrhAQ\r\n8GPEp7NTuQe3f3x9fdQPBs0Xjtt/iq18KyDRned2CcA3j3Xws7ZwQ6zCSu71\r\nOAM7Tkqt24jyUKE/GrbefbNsIcgbt+DdC9Mmjb5vUcSrepvUfNEmzc94IQT2\r\n/6Zgl1NNs3PZN77k9kE1BkFpbaxoSUUFjLFSzX6fPWcW5DZjckfSRZowX0Zz\r\nj38rS0ym7SBE7c1r73O07K4M9DhgT0EzX2I=\r\n=ACrs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a870e6b94367b7c6448d5c5c5aa8577e33e15e3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-pr-202212011232","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-pr-202212011232","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"0.0.0-pr-202212011232"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-pr-202212011232_1645355001595_0.1444818025780077","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120113958":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022120113958","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022120113958","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"279aedab3be93c4c732ab7b765ff9d36c712119c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022120113958.tgz","fileCount":37,"integrity":"sha512-zCiWCZBOYQilnI4vKIzI51bRYtRC8PIkJ39BVVZEyC8yiI+EkG9TOFbb30KdVUVsm8tHIjGMQcH+MFKWzGp33A==","signatures":[{"sig":"MEYCIQDdyGQcKrSPzwNhPqeLh3aSrq65DnwbSz7pHZyGPGPtxwIhAO3FemdzCisKvlxEoGGLr6z1dXex5PAmymf3JO2b8AkM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEii4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopJA//dS65oedQXm1yEthnday8IEoMSDo1ufToXmynzjt0Z02I+hsc\r\nZiLTCDBIWr5DbKoV45DW2WmTS2HIgqYC9rxtLVWDyX5AspCr8zbdvgcvMcpi\r\ns8ycSMM4ySotuhyqocn1+dxVTaD8VSLxQZarEXKOp98KYeWz+xuseFjpxMo4\r\nftUqcmHloDgrJN2lHYRy9o3WDWWb8SzZgwuDVukITRMnLN3GaU3Y6aazHJ+0\r\nqb648qdIsaZDDNYjbku7keKaLWDTw+Jm4BE5qHzNMsTl3lGmP7ZSdJiX+8Da\r\nKchJ+BOCUEM42r2wt4gUbgJYCnBQwqd0OflNuwHAWua7wOos60vCPj/Vigw0\r\naYiDagGXe7MDTLxMUBmlqzyDr7QHArugAVnKY1uYh3zuBvtekB47DMBDjQ56\r\nrAaZtC8ygIuBoqTDF/PHjfXDNB/J8HegXua/El9TTpBsy5GU1n11ZctUktZw\r\nnYGlrDjB3Hr5gd4wY3gcVTGNW4nxrXOvfnRpEP+bfNv6ATraHifdcunNKp8o\r\nBLOYXi61maU4BLmfhrrOrb66vGZaUWxrsg18+j4Rn7nW2Z6zhScX9dMJU7AQ\r\nXJYJAGGyjAMSzeVeDYpj0pQqvOvEFQP/z1Y7xBswnFRLbvI9F3uY6ORpWbQR\r\nP3Hc2oGhXLW8xcr9WbDPYCd4ffCY3i+zYi0=\r\n=CxW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"99c92df9331e6a0c5667b77e5a605343efccc6b3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022120113958","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022120113958","@chakra-ui/react-utils":"0.0.0-dev-2022120113958","@chakra-ui/styled-system":"0.0.0-dev-2022120113958"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022120113958_1645357240368_0.6154826854734519","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120114012":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022120114012","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022120114012","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1e56bf13c5c0861c66060aec636eb3001f94b97d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022120114012.tgz","fileCount":37,"integrity":"sha512-F71zUo/b94HeTCbZaFXm12QZWNA590ailkZprhVNPYZx+m39Kzcvn05DR1x2OXXW2FpA6KbuGqniTJNY9KbsyA==","signatures":[{"sig":"MEUCIQCbIkEyn0JtgQIUjrNLG3XJzLUcourxJGhISShaOSv17AIgQ629knMwJBZQUy9MxjWvTQ6fMUd7PZoCHhTPrYup7vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEijAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWJw/+MeIqku87QXU+lcpyUQKMzhhR1quYWJvCn6/fTCilSPpiltWD\r\nIgIqbtDyEZc3IeziIsL/UWSCPWzOTWqhdE5gF2RLWIwLA4r01vcO8RoE5BHB\r\n6KQ2sx+8NIrW3a2nW8sPCWKOQvhr3+EJnuk5qCveGMBofUauAOvSmHiQrscL\r\nZ3cZYElAR2MMV9sQAzRw0wo55XuQwLtFuuOyTjA4GsHPtfbHR0VOd6axKmRy\r\nsn9nX49uNhzzwCJrwWoI2D3XVU3uQyWg68DjSk1waDxSRKwmgoxc9qYRxPv3\r\nnXh3B2NWC+sGET6C9KCYJ8GNxcg/bxPHqbRKKK2mJMcek6FHWxl1idnEJAJd\r\n/VZqM1QM6Esbqg37mKEUNH0vBIbvCHM/1tcki3n1Cu4Yvw3kKWZaop/1D8FE\r\ng8GLQtzi3pdSJvuQLX961O8uwxi1zGWSaY2kG3H4QqvD1EK61P3BVzc+/wMy\r\nmlCe8sBOetr0mfZPqUleF8eHvOzChDy+dpQ+Bc6dSJ/ouKBKCG/CRqfu761T\r\nIQvqdCp91JWm/TIDukggvblIP10Vl13X18bCrl2zv/090OTdK8i0nloi7jNC\r\ni+n0oJ2Yw/poLaBFaq+j0U1M0tkw70ztVDS5LkpLNmdumkmwRxIzE0c4VOqu\r\nlCyPh1MMZbj/VcfqbzhFt52fI1AFrLxps9U=\r\n=VaRA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5aa79f81c71b1ac28d1ee18b4cc28c908b68cbfb","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022120114012","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022120114012","@chakra-ui/react-utils":"0.0.0-dev-2022120114012","@chakra-ui/styled-system":"0.0.0-dev-2022120114012"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022120114012_1645357248754_0.5964261089790492","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120114225":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022120114225","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022120114225","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3df7e3b0120a3733c0942e03741d5d99653b453c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022120114225.tgz","fileCount":37,"integrity":"sha512-Lt5So07Zypcug3nnnHbdwAV+CptaG6sN93H8o/4y6hgb54EAwiVzYUmUallRTdZ+ws/X4whXh/tTja4MeV2r2w==","signatures":[{"sig":"MEUCIHr2NJPq7WcL9PDFMsiXYwcg+LlP5pSwU2+jOaWFHH0oAiEA2ViWnsN+AFGYhMxNI7dyfQvPlcl564JEQB6F9YVkzA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEilOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFEA/8DwvXNfm4N9rTyDc0S43f2NxfFHVhvaQ4DullK16WIRuepv3G\r\n/hcdwuUD6zoTWMhL9TNAoUqIxN0XiQfW1Zf0FRcVv4cq9Kzz+DI7nxdbiXrk\r\nWTaoP7C9mzIzbnSovCT2mbaOdY3RCbuTaHWVfM8YM8SaQIaeVj3OFX4tyMg6\r\nXcU5snOzCY1ddgc2m5Sjk/qNEOQSoRzmjcMibE18885ql+/mSF7sod40nN8l\r\n3ARJs5K+VlmCChBao6vN+/ixPjaZZYoY72sjG7rtEDwaBFQLgb6RRDooDYVN\r\nl5HUVWxxUkkE61yq0mPSIl3QlnObIm/jPp38p2P7sPdicv3gNUs+LKIiOwpu\r\ncVF9k+NpmH2tdsgh3KoSxP6vC54qvUZ+4XN7bbW+e9UkZbyGo+KNIF2GSXuW\r\nvICcfWiI7npxphvsgtH2rgTrR+nnIhY6Re2wDgzxrs7DBayDUWuirt8frbIk\r\ngARzu3Rd0mmbx7zfEvildBe8Hsdcedv7xOdTNHYou/XrplDafzjm/PlRfLqS\r\nS+g74GZhJF1PtE33DvuoLZgMr0mBZQL6YkqNIGeZoeBvedW5q5evz1swPVup\r\nuYIttfEWoxpQg42f7aKnLWZg+siF46r+di1O9HnzWyf91v1cGDzAhUlx5VLY\r\ncP0cgAeoFTFy5xIUVCuGBrW08zg3FqR0aG4=\r\n=MjL5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b0da6e6665234c1584403f7f7251390c3a9433c8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022120114225","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022120114225","@chakra-ui/react-utils":"0.0.0-dev-2022120114225","@chakra-ui/styled-system":"0.0.0-dev-2022120114225"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022120114225_1645357390799_0.1653578050707012","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212012129":{"name":"@chakra-ui/system","version":"0.0.0-dev-202212012129","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202212012129","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2f202126ee77be2ee18b540ae51b855d4c16a3c5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202212012129.tgz","fileCount":37,"integrity":"sha512-LxJ1slXijcAyHunrh+pUEZnJ3J32a7IodGB6WZImeqPIAiliyyMQ51uHEnXyHd24UJfZaJqawJ1qlNjNdpEISw==","signatures":[{"sig":"MEQCIHTHflu6578SzWxIvRn2ogMYKHzSahFuljfyKcLOASrkAiBFdwWziSoHyn/Q7+YzsJtpVsCNTmyLsPoE3w8ROzkTGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjBEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJAQ/8C0Jz8+9mMBnPLmzLD7vJaUuvEMTJZaizk5Nfyw9FMa5bYtAQ\r\nkvXDLFBK2kqFr6G2bP2WMlzz3yGg9gN55Y6gUpkQaP9EKuM+gMHXlQYPxjbL\r\nQMNdsAVbsTwE3AgZ4O35B8nI8AscSSN4R1BEEqDcucHg/jOBkOqPXZJwxCrN\r\nOkV4M2ESYzWuNnLr2oUxA5VjTCJWXB038D7Yu88SDn/Y8uETxZMbqWuJTxdc\r\nTGaOgxg5Wur5yscifYt/S8KjBGfy6CeindNRZ07cd9xFA4aAvrLPFfcMvRLK\r\n96eY6Popp56G94cxaA6CYoAhRQQDQkZae9Nz1JOElB/g9IPCTjT03h1Xye+E\r\nJnkB0XA6eLAeyKNaOoHMrbG9habWA3F9oaijxX0dzrNLwAutA60CeCmDHxn8\r\n6BKdlAShwpLIQjeITYu4dtqe9UOM2EbvIy1b8qSw+yA666uSAABhcDwQRQZT\r\nAL4AbMEcxew3ZRvCjKbZSmuwz2PAPS/unChH5zNE39Q7z2mzOFfBYPWYldOs\r\nNoDAS5I27WS62XM1Zv4vqyLAxZAJxuPJ/TkzAJnH52h6UxbwW4Sr+O6sLvMX\r\npWR3L4Jdlqlcd8r6p2uK6DrEeH8sOSBavN1ovTLxQKJg1FeqRSn5f4pP8/3O\r\nNv3VVsFCk2NozMuW7wftxlOPWR2igsr4A80=\r\n=omXm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"651bec5b1999ec3edbcbbee297fc5b6ecef53f34","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202212012129","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202212012129","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"0.0.0-dev-202212012129"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202212012129_1645359171976_0.5537680908526046","host":"s3://npm-registry-packages"}},"1.11.0":{"name":"@chakra-ui/system","version":"1.11.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.11.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"08bb859c6cdf6ec36835ffdc43ce8ca2e377628b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.11.0.tgz","fileCount":37,"integrity":"sha512-FKCqsN0VMwOgBbyf33AH4t2tjwtxa9Rw+Khg4u2T9k6MVcj21utxCB6N1h3EEO3VYBeqk62G0eLslG4nTJcydg==","signatures":[{"sig":"MEQCIF2/hlcJq9Tjaa0P3E8a64+wZgDOSwLT1G3tBp0ii6X6AiAYuvQILw+SAwcV8YJ0URrr19MbTILsPjpmQIafqCUwbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjJxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6bg//V1sCR9wWMNehehUPVtXTooigE120rI5IWBtATamowZOVwmXr\r\nzjnPoZO7Q97KO/DT/967Vq09qVa9dgbTlMLmzEkFFuMIcVMNU3X8CjG3iKXO\r\nh3A7KQc5IDDx75vizTI27hINF2LSVwXmNzWaz60QFOXxJGfbolZpXiWS/jFa\r\nNUr71TLOj2+nu1wyrZROcSrpj8vF4EbopT70gD/9Xi1z38B/v+gsK0XacyWG\r\n7re/ZMyNWICsfP9QWrI/ZBEHf9rQtfmdpisZ8eCSh81/AJgv7GpoJ73TDdw2\r\nedPpMgSy4tzoz7p/eGB/Tt/Yy45oTpcUrQ+0e84tZFEGFYyFgrc0TVfBD6eF\r\nh3d8FG1NK086mZYyS0gg6UAYz3GxcoN1ISaikpbcvpoQFpKZLLk4Lg0ZWfY7\r\nOIx/UN8rGOqbw6yviRybNboTETC1W7zOCKft4qkAY+g8QQ9DIpRFgYUL8rCS\r\nM3kBX6aAhhNAS7tAYtuGfBMDuu6J30c4Bmit/+BkpDYHNrgQ5EuFCtQS/Pf4\r\ndWeP6Hb3qomQRpL8/yNbOfAHTR4cPe+FWBgFyS1B22zSfV/Tw3r1RDeV3rHR\r\nxQsudV5x5A803+r+zScKe5x++3o4+7fMnRcZHG3aOuraxMirGoPvxHdDfIVg\r\nE+vYW/3Zf89YjALuZ8Mlg5PTIlgBHM9/7H8=\r\n=UeF2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"30227245b691a54ead6f6d8278bd0a386b6337c1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.3","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.4","@chakra-ui/react-utils":"1.2.2","@chakra-ui/styled-system":"1.18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.11.0_1645359729123_0.8518426892308002","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022120123118":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022120123118","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022120123118","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c3b37882cc40c6e068d72cf820c2c0a2797d1fe2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022120123118.tgz","fileCount":37,"integrity":"sha512-gEj6FKUBrGhOgerH5tQuu4Bim4k7OwoAdtCTYxsGrFGaJZUJEvAaZ/gSUoMQCnny89j6ctVww+WHrUUw4uW2tw==","signatures":[{"sig":"MEYCIQCiNx9MpVmBrg4PUoFxnfONrf8d6KNh1dCOs3dmD08tPAIhAKQpmDOlpnPy0LIND/mPjXceXPJOrG5UgtQfLOQCRfRx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjTNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfqQ/6A1U4H6wKy9pWVxMOYgMDflqXdrCgRBwNboKzQG1FPan2lcr/\r\nTXWJ9v17uheTYqqOgiBoWeu8M2hfpyLhFIVgTVhbV4YMbcKoIATlk8+XLpC7\r\nEQF0JgliE2ovsM4mH3cEu/YysB+DpNEnbjbDrCgqBKp9L6fCOWUlLbL/9qLr\r\nsOFnAhvLqlCMzPuULvlcSpyXtv8M0E1TbSlFQ6FddkAApqfMS7cs+9IhlUOk\r\nzslpFB67R2Q/T9nUAI1te77kZ8fzcgRa9uNrt1PxZmKe9qwFJd9nSOQlwZcR\r\nDZKhFJ54kWThOCu0lp/Utw9XLK+ca+V6YsAQ6z3fgyA1NOgxduialq2cMYp7\r\nXwpyL6dmMCQuV7QdpDbeD/0vfxL4e/Aqkx/Vs+KKRdKHRTF68GublmGTCJLd\r\ne7i8NMbEgHGElHDoreKgJ361/vF9xng3OsTmZ3hDNYCArKnVB5YTg7vxraKl\r\nOppqp0iCJBlpvGROINpBzw9ExdKmDxF+KGi7e5cp4vLVUUGH29YCQ3BjcY9S\r\nMfSGgJZq934xCkoRxXJOl4JIYlfRe56MJKWDU+P8vCUI07PcOAqFSCkGGowr\r\n7d647D7RLjKSJ3DukV4NW72JwZtwxMHATXail3tmcEZSChCT96Po9IcAqiT9\r\nJ6M+qaqYT6Qn+Gr4fsM0lZUfdr1++kcE2FI=\r\n=OgwM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e1fe48cbe37324744cfe6184d785c093cda1125e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022120123118","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022120123118","@chakra-ui/react-utils":"0.0.0-dev-2022120123118","@chakra-ui/styled-system":"0.0.0-dev-2022120123118"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022120123118_1645360333397_0.46217187246312785","host":"s3://npm-registry-packages"}},"1.11.1":{"name":"@chakra-ui/system","version":"1.11.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.11.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"699ceaaa1bee01730594e691691bdedec015fb5f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.11.1.tgz","fileCount":37,"integrity":"sha512-PK9gBSE1nkzIC2ewzPqge5KKPpLJYExIFgUyTbIBe8AjIMjVCGg7cntMY2gwrJ347zTUM4W2EY3nPKREYAKLZw==","signatures":[{"sig":"MEQCIBO9S6gZX/X5HPdKlhUFfzKDm+tq3oq9NzloDUJyGN4zAiBec3P/4ldCJlDeb1ht74XVaUvDTKtA/O+JAXRZtwHgxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEjbpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQ3Q/8CKVSDD1orHCL33/I+mj6bkNZP0LGN6Y0ks0YlS3pX0nyHlnU\r\ncIpnn6j4Y0oKLDxjVjgvZ3eFjdhnoqUftdyvSPqM2uCm9G0JWy+eqT1U5Xq4\r\nR8EiG7+upi7YypYFIL7d5yE73QpdO3uIzfwgaagma9/gnjnnklOTZCXP4SDW\r\nElAaA9/96dvtMMEnHKqJKQnrG9x+WhBS5UDhr4W4IUHqi32gOWYKCJ/qJHk3\r\nQwZdLFzC+LhbG+pGRCFFwyn/2IZYACEJegU4okcSv0ezOyEHesFLuT/IodFa\r\nTGSMA/uKKb+plRnFDWMBJcpsFY/MoXjzdWKhSuEAhZvnKLeRbOsyGUfA9Z67\r\nwlcT89y7oaKocuJd7GqnjKHg3l+346OVk27ewWRbiMKd1v7AUUpsZW24/MjR\r\nFd6qgyWP4ybDLkJzs0t2yxI8nJaqtvyyUfrBx9s0iDlfwNvOXPgsmQVDCEa3\r\nvU/b0YbrsLG9De3sPRfaRp1MLYYs2aUUi68vrKSzmkLZOxPqGY2t9adglTdm\r\nyEkUsoUEUYSJihAZt+DL0f9uAX1Nt8GqCG1lT0uu9oFN6u48TRpKCNN5vhWP\r\nE5LpyGBiRjG6AHZmWjAyIOMUK0nhSHHOdYREQLoOLnyJUovSJz+jF2whBFCS\r\nI3Ua3cKcu7U8eLfix2YP9rNhFkaXgr+affg=\r\n=zXlz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"ba2fe6c4b856ba3833226dc7b6a15dc91173719b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.5","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.18.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.11.1_1645360872893_0.5046496580277626","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128214753":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022128214753","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022128214753","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5dfdf7aeb5c2f03829e224e9bd5077f16c02b1c6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022128214753.tgz","fileCount":37,"integrity":"sha512-hfl37pxq/9VDa/G+Az2CM5pj66oGBv/p1cBRtRbzuLAeZAML2JBnCk/3Cog83eaAsavan791Jq/F4H/iEv8ZUA==","signatures":[{"sig":"MEUCIQDFhQh9rJq/7G/d+5QU8H1RjGsCC4luBjnclG5Qd4Sx/wIgVih9GWlHbMeyDY+GFpS3oTdGMeRNX6c0VrY/X+jwWTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUMvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGog//UoJ6kqkh8cUFP0ugpKmXhcLgonOcf2m4TXq9H8DUNrQVbVv+\r\nU35kYNp/TzEaYDq1bpb1aOCvd2ku/LEMw94huaQd9mU8OXqESLBw8uooY8hV\r\nSqtbIYSGXwq441mtFL42M+Pi+F+ocoiqO9JtwgSVTpzAKNkNIUL9o+ATsDaC\r\nGJrU4osC513vqBepX7IQx+sZ+i6GCbeUC5ANBy6DSlDUPwEumw9/gLpRcfS4\r\n1FMXP73QL7uQkbW4h256c9DcW+l6mgfZ/MvvDxVR1J1qOjWJ1FutLTDTWRNl\r\nsP9H8n9o61DzqoShlp4RcBi11Q3Ce+2PFa1TmY7IqxOhLa+uicVG+NpKZxv/\r\nuTXrLpZExjsav1AJ+3XvkTgLVZLeeNHdWa2TfxD/171AoZcdk53Bn+QQPJHz\r\ndqJ0iwuGuke25wzFElL5nygpc+72QUBr4FO4hrAXYyprvW5pYn31GSthfFb8\r\n4rc2mXoYNnCykg9IE1/K41lDiUowmewS2HBDVHiKpJC5Xr2naX0JLTf333Pq\r\nCwarGXE5ljZnXejZiFsOXn91WmIlU9fktLN3zcShEro51Q4nwBc9GSWB8ZaE\r\n7WJqPwXlGMohSLxOc1mjKXFxKQxfHgLilUdbPf6s1bt+De9naUqn/cixLNFy\r\nwjzBiuJC1wLsoyNNvloT6q++pRNpIUEOJOo=\r\n=alCI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5cd5cff35e4837539d83a2157a07585d461b0aac","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022128214753","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.18.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022128214753_1646084911186_0.28841694802159634","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128215052":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022128215052","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022128215052","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"51620c38469a09e4d624fc859eeeab47601461a8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022128215052.tgz","fileCount":37,"integrity":"sha512-E6MWP0DueIwnlPjnIuhCJyv9N9urTFN9KX4pSFHYDFGWMUof25aS1gCI/qz2GmfZFag6HwhlUmR7/cYba9ttXA==","signatures":[{"sig":"MEUCIQCT/E6HVEg90g2GwMv4D8CX65SmdUZCA61ABpugL4yTwAIgdlCg03qr5a3rv2uY/Ha2wzOUj6uWRuApc6iiBmxlFSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUPdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDhQ/+ImFWPZc8vN33PBfaQIOlSJAvbgR01VoLBNj1B6nqRQVseCPC\r\nm5kbAJ8kO+aFsH2pL4J5C0aIlviLeOF/TY0g8jDP4SFEtLFuSHEgIaDOb33h\r\nsIiuzvhghCEyRGuSFMXmijEyzgZGzHV++CLjyYWlhB8mMDGcoSxJgML8b86i\r\nCm6azRT1XFZd2jLSHF4lCZ7Eu7owK5UiEdmb3/EKuJrHmSVXPd4XmYdT50/+\r\nBTQM49TTvDs0tg/w1kl0EVB3jxG8vzNkwTJ8mGC2qub1KIMpq25ux9hDei6i\r\nGB/6r23D6Y7FldqzbbqolpgjK8QWTQqsBbBDOKBuS4BQDl4PO0sXUqeAOvZW\r\nfXWWUQebAhO9nign/fhRu5VvL21AFaLGy2RKzR7MTmavkLPB241H11I/5+5h\r\nlwNTFrgt7IcPdps5jTAd4xtfFUv1S7uj/kh/fxoo0hk7hFdLdfybbeTNtyvv\r\n7AOwjT0lNQaY/9tWWcb5ZkaMe0hO1oZrgATeGl2QZZcFT2y3ZGxOM6LwOGIi\r\njxip9rapXc1WN8POiGYsTJwySe+tDVzFMCvMdvyLl+Ll2fzZZAjQVXg1vCK3\r\nlRo8wuuErBI+qxgHcOMiWmOOjAYTji4uBMvylZXBLU2uPN61iNggADixVKMc\r\nIXw4q17ls9Qh82TWM8pTVBAG0As4mgEXdIM=\r\n=Jc2j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"001751162dd1922d8ab53820f405665f0785f196","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022128215052","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.18.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022128215052_1646085085067_0.8785998198464868","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212821520":{"name":"@chakra-ui/system","version":"0.0.0-dev-202212821520","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202212821520","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"56dae11d32900e4d219118f3fe544e21c6702582","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202212821520.tgz","fileCount":37,"integrity":"sha512-EPUYFcRluajJ3LDL2J/Qa1Np/IkDFpV+8WTo/U8utPC1yIDI7Q7kFvOABJOjfT0wOiSY4PTDDYnND61JlWWAFA==","signatures":[{"sig":"MEQCIBoPb076d1UpYg6gYWGAafObTkztB1nsobvfx7wxUJHXAiAelf3GoSZL/IEsYGS+HUN0xG5pdmtjP1OnsxTJZFE+ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHUQhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Cw/+MwRE5hxiBmUCk4okaOx1PbrRcEr2Ny7sBXMeCGrH7jtNFXk3\r\nf7zcynQ3Z0LCu57JGy26Ib1dQ6mt8qo83i/ArB6tD2FHQLnixv5/pNdWcyWX\r\nnPpZzodS2GlV1iqcLGz2dubTp/yQR5Ox7xKZOCwKn69nA3lnE/iifOi+B/mH\r\nmHyapIHNpnNm5fmU0dAvrwR0+dPaXMHA8SE6eLVNWg09baUUTtQGBaR/PUZb\r\n9rDZWvzSb+Ym/F7sbNkmrRo/ufltDsg5km6gaRbH4P7/kelhCAmqMmnyCgoh\r\nwFk2qgMSzfXoSPtmJ8Kj8SnqTXvCfVI+pwh7kpr6zbPzKzFgeTi1BVXYP4CR\r\n1kogIuSFTWfWgDwjTm+c0YA1a1oj3kXjCX+MMCqLLUg3KMmETiGEcFZK4eXa\r\nLkKvfO4QgYv5Wpsmy+XeDfyyVC0DvKSQoXdHRyAYGafrCWtUMIG3HmdwYQjr\r\nIx+Rc1z27XekgTJc3ZEui5mPyR1cObrbGU2fRLmLG7JUie6sh0vyVKoVdBEb\r\nqnQAxishx6YzYPuH63P5gKZqCyWpXch3909Q8u8Hw8vfU0Nc8ZkxL3b79ETM\r\nNUcz/BflitBa90+uFHNmRDFJe0ks3Q2rut4RM/ttgoheQpQXuLb34Ey5EJYM\r\nXI8sR6Czch9aO71wfp6fTe+8qavjsUqzIgU=\r\n=aoB1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e4da6359d0a007a4b23959b0b8feed6231a947b6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202212821520","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.18.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202212821520_1646085153620_0.5405786976827087","host":"s3://npm-registry-packages"}},"0.0.0-dev-202212822477":{"name":"@chakra-ui/system","version":"0.0.0-dev-202212822477","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202212822477","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0fe364a1770303475ac54985caa3e69fa598787c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202212822477.tgz","fileCount":37,"integrity":"sha512-3CwBZl2EvHUOBGCkjVm3F6jeUuGOnjJ+Mlt/D6KAFTs1IpGEr8mBNsuw1CwTqsmBlZX9TGGpyPshFfps2FVfYg==","signatures":[{"sig":"MEYCIQDnxGPnmSVaXKWRNC6FcSbdpCKXO69BB4uS6D5mYFoAHAIhAMqBMixzJBd6T0onm0sBrDDp56woKFt1t9oaGhyBssgi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVEPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9QRAAo8GEMnUKWc8sc4eD9zssNbFM3kTsNItqy0Ll5lkeeWGXWzCX\r\nklaCyyQn1JVuqp0Emjok7SBQqGi9BHjTojKqUBA7NM4ahr9OliWOn3FdqhfN\r\nCSTZmh/v+BibVO7WCtSWVodyMg90x6bFzLAGgbBImtUk33pIn9GPR2hAiI1n\r\n2+FetGnv4nQo42JysRNzFxfNPzU1tS6FABdA2ih2knYylt3UvVzj5KmNj6mV\r\ncJ9mcjfeX8Dx06cMGJJIu780xIRxKFUfsq7h1wf7L/CT7MASRG9DpYbxLLeq\r\n7/skWmgLNs1Uk/PXzZ6C2RXsofdfdXbmwqRgrfo77g4LodGy/P4a4GB4rMId\r\nQA/5cWyUgm//T+ArOtOY6jRngnvvH++lTLk/l/jFMJGYzcnvr7uyZ7c/re7P\r\nh++KD8fgyrYIa0wvcmlrf8EKODGY1Ft3CXaxcs2eiyY0Hrunl9afqWz7LBFQ\r\nA20sHmSm0lK9PVOF2hPriig+b2hn9E5x9y7nA7Wr++wHyB/I4y+l+A1SRjjE\r\nXbW+OJI9Q8IW5eeiuJa45o2PQ96ShGDoUqHUEg3CnRKJhMNqRpwgw5H5TErH\r\nNAjNcdVyOB86TRSvSS64wybyY3bzSn9cuJPbyDUXGFJEHltKZSz8hioS8eXU\r\nhfF7CGr6BhiuLJgQ4hOu6pCWreBs7Ay1Syw=\r\n=6bPH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fbe94622357e22acaf8bab0eae33ceae663d7a5b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202212822477","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.18.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202212822477_1646088463063_0.665298388696685","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022128224832":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022128224832","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022128224832","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9f27adf16e07a7ed38a2919c73cb965f2bde6934","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022128224832.tgz","fileCount":37,"integrity":"sha512-UDH0jTsDmoHGA7zBB+dwnaRAdAogV9nZWmb97rRzSvat7QXDu4HTJJDtcbz9EHwYPreJbvuCEO4RXUKmhxeXOg==","signatures":[{"sig":"MEQCIH3IDZCbWeFm6DRCIdIxHK96+3qg3eMMP/OhwT5TtXLcAiBqCCHoUBuXfdopXikzBOMQW3D8WzCAWDQ8YebMTJOTHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVFjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS7Q/8CLhQVv+KI8gCGH8GhiLCRDgrk1HSyVxBodg0wyTx71YHxl1D\r\nJOJouzjbCK9HRWKDtduR53d9rR2csDJcLOR6CjCDvHhGXZE6DKZvDxNf6O8s\r\nepJ1IjLG4ZMxo9b+1jZubCYoX+g3boLuiNphJlq+qMI4meVsCqxo57Fnn2/W\r\n7dKw2fi/Wbn4pOt+2uFF5+PMjYDr5uIM5GN9LMOMUdGsjRXYGpReS5ajCvxU\r\nr9DY6Gmz12AEn/XXv6n8gCcpFDAV5GFMfkioRr1b5oumsbN/ukVpck2V7n12\r\nuF6ZkHS0JRNpJsqQOaO5JOMtQk1NDWePbi2BixOXSElhx7UqAl4PxgYpqrp4\r\nqhrpCvV/RQYb0vPStnbwjXmmwIcCtgl8moM3Wg5PKLRLp7fdGj7zsB22iTwY\r\n0TdEmGH6EFmzL/0gtZabOAvRneGiYOCHGkDkxzLe39/rsotzTUHNeT+wUPtm\r\nlk2zJZu98hGy0tm103zuzlKlNUmJfP5k7Po5KU+pdt7Lk1KNqnLQEypEH6E9\r\nOOpPYObV31FXW2UG9pa7h/0HxGL3nKykhBM8A0amYQ1t2CXf8qGWFLRMFiM1\r\nxSeFtRqvDGqQJ/iAAXosI2rzZyRYpJ/AQVqtAxL25ytxv4e9e8ZotMxAahhL\r\nkkeMUSjrlw6RvQYu5k7Q0GjJRd1Yj2rWcvM=\r\n=AmIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a1e4d7951090c9622003e9176005ad3c038fdccc","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022128224832","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.18.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022128224832_1646088547753_0.5279416085461803","host":"s3://npm-registry-packages"}},"1.11.2":{"name":"@chakra-ui/system","version":"1.11.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.11.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7c8aae2758260d3a238e8c0410c17af1fe1cd5af","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.11.2.tgz","fileCount":37,"integrity":"sha512-s4HGYVo86XuSav5PLfuVT26Y+l3ca/nQVF6QxS6YCNiUxdBlahlzsZz3yMz3MKp11voljnY8vj4z4dvOd2sjUQ==","signatures":[{"sig":"MEUCIF2KFylqJlO8UfhR1qR+d+HGoBFfq13rxD+X0H81IVjZAiEA5o2Bgf+enWrNixzgZ7GaoKNwCNuSNGv9ed7iucefs3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHVWnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphLA//bmZUr+2Wd2Zy16AuFLzFnM2AmqL4iZ9Sj1HIAWO2dxUZFgAB\r\n8lclEGbTRIt1U35qPa3pc73drN4PW+BiTyeDN5GFMaK8Ud5KifjUmSUf5LTu\r\nzAIdL4XYs0Eyqxch3+tmilVAWjrJeBdlXtz6Hczj1IjiFocWOMzhI9JtTkMJ\r\nGekkwO7GvrC52wdrWYqUPCgt14NOKsnjRWvSTFhgOtLU7rCnC7IbNjJ1EnlP\r\nwNjnAM7CH4mcbP0AKvidmGzaIFN5oQl5UIakkZkoDuJri0MhQS7ExazdEjpJ\r\n/VRkPCuFSlWgn3eDQgyqg9bzW76KOcSKq65e2AT5AujSAe2a6nnwuwL0Ef6Y\r\nTfc0dVM34vu/L7+bMHaE/hqNNqKcFysCqAbqqRKfgR9KGOLjfSdC24AhkOnn\r\nIKKrQK0nXlRfPuhibiWnefu1mP3BkAqbFELLRPXMHO4rTUL8u9mn32ZUrTNc\r\nlM8nY7l/Y1TLXddwBHpo0Qa1SpoigWwhO8aNzKmbLF0lXt8A+PutFLhrn82A\r\ngAugw2FNuuZw0qOFefxVDtzXJsPldjs71FIbIufKItcL3nD0mGhxO8AjvBDH\r\nXg1VBn9rrBIHZSNfna7OP9JkMIz0MdLaPNiRnr4F1gWvkeXWxDVcfjIXLPMn\r\nHOgdqgh/TRXvFlTUPm2JMQQqGkZK6OYtM7E=\r\n=u2m+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"092b20f3e93064c1db312062b76b420a7ed1703b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.6","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.18.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.11.2_1646089638558_0.6564361537489152","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221417325":{"name":"@chakra-ui/system","version":"0.0.0-dev-202221417325","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202221417325","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2049b57ac8050d149d853453edd193231e346348","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202221417325.tgz","fileCount":37,"integrity":"sha512-jdTBFgX28E4pvXGbgIYWw7jQXygzBrdD9e4PfEZMfMYUcbQQDqLIOWrvkIjWzuZZ4BzL+hNZOyafbzGrZrlkxA==","signatures":[{"sig":"MEUCIQCsuytwaM51LYa/xZ7VWIIKa9Puqb2FdjbDNd9zuAusOwIgEF7tofR1jWkRGz72yyKgdH2fECsCuZWh/qTVt8yQGrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3WTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOPA/+MK/lE6nD1Vz602pyAcdKegFj3KM5jMPDSFYRPMLKjMBJMOAQ\r\ntlYAZzxIRH0ptpan+R9Tvp1YG39U+shEKHjpwwTcHhmnErVfEulBPP2fCWc/\r\n1PQc2fVBaStxxfrN4Cjivs0f9owsiilesi53C/ckasr/+oi3Poh9ANBtqBtt\r\npuTMZRZaNP30I7jpqpAjhHmowT3OsrcKAxgoYkr+G9wQooemlqy9uV+GHc1o\r\n/ejekcArz3h2iGS2oBVyRYOSet8XYczyR1nAYMyktWBgLZJKYn4OygAd2Heq\r\ndaq8ec6Mi8Y8iWnhKr9p643hgylXHbAc2mSAM2u/ckW34TNRJXy4P6WUbkk2\r\nrwp5JKXpQpddP9sQBO1QcxIXloXqSmJg7nNSmaBOV0EHYUcYTad1pL+gPFhW\r\n1vLfVOKhm/imljHRV4TJOh5Ux/+nDeezUU+F0MHKDflUVTrppHPJ89juXFir\r\nga8kNhXpEUyeWgrG5+/frXcXLN4XlXHilL6OX2H1tzNn5WNHpjYcyX+WrXuP\r\nNGRqqygXA9mv4rPVgz0/NXNSD+7RL2hzIgUCTqw80kKtMBmw6IyaTJrDA5TP\r\nv/A8FXBHOwbMJufo6KRB0AM6oYDqQHlph1ZSjTuegc7TZZ5M3Cx/+CtBU/ox\r\nFkxN0RAda57/vIP4iT+0L42phGd9m/On8pU=\r\n=/LJ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"4d93d5f9e46738c84958017bf70ceb6524f1ab92","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.6","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-202221417325"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202221417325_1647277458842_0.6146714115272691","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221417436":{"name":"@chakra-ui/system","version":"0.0.0-dev-202221417436","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202221417436","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bfdfeb8457ec8d3cb580555b804ce04a6de30bc5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202221417436.tgz","fileCount":37,"integrity":"sha512-z/spUvLGlOa4hPvYMhV/3JmFlGcUlmR6z0+0UoMKRHWkn/cA+WUIOINIqlpYbBnXlwRAUVgW8DpGfTyUlvLz4w==","signatures":[{"sig":"MEUCIBmodI1z3Z3sv+xozfF2SLOUgDa8G0lacP/wuZoXc+07AiEAianxqnEwGqkk7vDCcN43ymjaKGja6DU+ewcuBTZFOFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3XKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Bg/8ClOvDhDg5IRA/qkKiuJ0m3dhT/x6Er0Q7aS704MCLoeglm2+\r\nVa15B//7AxGFYspuz9NP9WWUegYSFbq7eIbXMUWaNEkaDA4xb03T6mTpum6D\r\n9pPLoRHRZfL8wpLddoWJduoUZSzfrgcfpJDpTfvP3bQaLqDmwCoxhxha9OMl\r\nyMmzh/uCMu/NPsfl84JVJmw83lUh1TRPC7IN0i90jfNiLq/d7VWY19I9M+tQ\r\nZKgq7oGuxVP8kvGuxwHm1SicwHkfwYk7vT+ZSQp+s85ai1hCqDysbxnhNHVt\r\nmPlRt0jzzKUX1KEmVLuD84ALOUE1gNsgv4r0DndNdC5GVWHzzaH9di+MncYw\r\nFZ668kX4N/9/pehgN3ipU7pTw2a3vfhinb6F/AH+weTZu7LUMx1ampqWK9J4\r\nkznekyu8fAa2IrN7gDsPCr4ADPa3LVvvcmIUGBTuIxEK4idlFnNhY8bA8852\r\nBoKM7GLucUClFkOYdK3WFIvmrzr0Kzv7xw05qbeSH5e+F2CGrA1UE6YF1Ee4\r\nvHa51heR8ev4M+/DOBhKBoNYvqcheTBab4I9gee0Fd3s0nkL4yDipl71J369\r\n+bLGuw5CEz4p1a9S5Esjl++P1MjM7onDPVtO1DYKGxn+bZ1QOytMC74U0X4/\r\nYlVB3FidupYrx/d6a8ClhQGowmFQ216Zhyo=\r\n=esHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7d76107a2543c38e9a3c3ab516f581bc92174e4b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.6","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-202221417436"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202221417436_1647277513936_0.12593615673507563","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214171014":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022214171014","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022214171014","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"14aed0786268e9dbb0a9836db4e0047272385224","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022214171014.tgz","fileCount":37,"integrity":"sha512-36L7Zt+aMmd8xHHwWjbZO+eT1yRTtBdE0OycKsxVZNKeojtax27gW5f4rngIMiP/WqggwJS7rFnbo28dgEa+cw==","signatures":[{"sig":"MEYCIQCPChI8N7csuJnvGfrbSEUqcWDsPTO8NMhOjoLqizGmiwIhAPJandq8BFZJN8gyY8KuSDP8F+MhPSjz3tyPx6UeFkvB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL3dIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdgQ/8Ce7WdsvafRWbb5bf3yYJsvw1S2vPNu/JBikdhxTGfk20Xo+1\r\nJV5ORGp6y4vf7P3OrWBYyd97oKRT328m7WbHh/IxdjAvVGB1MhCSnTZUSngz\r\nI02dRQgKc2YTsqoAxCLususBphqovIdcwV0r7W0cqgqJyryIvdIwZqqWAg2q\r\nmki8Huczhdvbb+Yqn7GJdmf/OJGgttHAbNEQAcGujHxuHEBc+7WwZFA74xMM\r\nQ62xOoMncO/BW2UktV7sr7poK/eLAfldR0uqVynJdSzrEWlw8HWxKJ6r2n06\r\nP1I00k7dsO3er7tPbIZXfLjKHLbbNlQ7Aml3X7vKfYwOqOYqo+sXPvY1BeYm\r\nSMrJVQgHe1a4OPQ8YVeOLOnV2fhBYbkxEZG4tUAHC6FjIE4AkGd5nBXEDqNq\r\nfPwHvBQNFWM3ql1NDKzm6gXtxSrZSCQcZ5uIFUEfTX/7yY5PRpbYb3mkAejS\r\nC2QHehEm2VYPoNv8k25igF3akOB9azISiiNuP2nECnn9v6ceYSoC56AjX3eR\r\nPF45uR+n68kEp2T77jaUMbPVW1PGM6TUoQJhNAm27HUTITahu7WNi3Vt08Jk\r\n91ZaBz04S2FqITocqCgGg8eDd7pD49CIx/gG/V9eJ1H8BTGl9ZCyyJ7l8Xl/\r\nwjdeABZLz3fLZcBHeBIWo/05CxvxHNJVwp4=\r\n=HMHo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"08e1db569f44dfa9f95dd149c5923594b49d0fdd","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.6","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-2022214171014"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022214171014_1647277896012_0.2581955289325826","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214195434":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022214195434","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022214195434","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c65c8a1338a2bec5b4f2f3938b750969147535c0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022214195434.tgz","fileCount":37,"integrity":"sha512-lpvqtt3/6vGaOeX5QEeNYsME7vd0cuArBJlTV/zU8SGRDoEP1Zf4O0+5MiQd0jW3tVM/cS2syxGjFt8ATha84g==","signatures":[{"sig":"MEUCIFCZXNJ/dsmO7DipBGPYRKbcuSUhyCKghhoHR0BZ3IZ2AiEAuL48DjE1N4x35bDVAgfHe7ZYFTEFLLcn4K+W8EZgbDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL52fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9/g/+OJ3AkeYNNjs7FEwx7YCpeVfAj/LMzkKejpSRftbHLPbuCHjT\r\nIp/Jr9lUL99sHn0QSbp+a6Cdm78eFPAEYt+oKLnk2Vt8GN+Rgn0c7XBbTgAn\r\nFLjFs2wLD3fENWE0PPLHg+e+LGukM4Nng2XTMhTV5+D4nwvHigjfItMx+z4f\r\n9gvCa049t50YFSNUiC4hzIUSNR2UGqEyo3cw9adZ7x+ZCRDfmnBpdjQmJlGK\r\n1UnxXol8eCI0y5L/v0kF3ys3b3ISVjwp5OMl/Cev9woD/EY97ukW2OUkiyXR\r\n1bLeZqq57uXarrysm8Y579SXaER7LogHhVxvVRJVozAFBUPBb4i/AziVvQYP\r\nlKI4RutnpFFf02n/Axgo4f/i7yaxd1JyrJvMXedrnCJHssPW0adf+V2p3HBI\r\nrebpX4kvwnAMkTtwHeqhdahdKrCd4iq1qShZkGBFV1gnBwrek8nin/SN3+oN\r\nQa/odZSJNMlCdIqWJzQUR05tID9f3mX76qYHnApMMgRvGLJ0v6z6dcFhcWkJ\r\nRm7gE0+a4kVOZbMzcR3Cv7r37SuIQ2TF55eDUaa7M5ssdsvnK13+FwNTfdvq\r\nkTG3n0OyAFSN0xMKqrEi5FIyFIKw3CmkfYB/XEDwTsD0hOZtOvdeSz+RZMsV\r\ny75UTLXai+M8y+tU15X/ET+i0/Xxsu+kJ8w=\r\n=b6Vx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1976d6516539f9b15b4c9a4a1cc0dbfdaa3a3f5e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.6","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-2022214195434"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022214195434_1647287711140_0.4662291361111679","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022214195653":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022214195653","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022214195653","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6f15c594e298f9acf002e8c71adeb297c2847c52","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022214195653.tgz","fileCount":37,"integrity":"sha512-uDma2D075SNRRRtsKCO6m+ORmqWLSOkYYIiZHKya8Hjj9R0hgGmr5If60rZnHckbHa5NOFrNoM9gLbVbzQaK+w==","signatures":[{"sig":"MEUCIBKg3S3cz8BjzHD17v1YY1Cbos+DGhlWiY4/863qw3zeAiEApSMNMqEagjv2GY5WlSuvFgt08NxhhoAZQc0Fep8tq5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL54lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNaBAAjHE/WFNGOwtzrp6KyabK7qkrNvTclZFDu1cdzxWfdfF8os1J\r\nu/oKeNgU01l+hwJZ47Yl/hoI/D3lZNPBfJJPZkpH+7cI6ruu/x6oZlImGJmP\r\nS+WDfK/tpbszmX0yEYBaFbMrQ5toAjajprg5QbOR5/DY6om0hnrCGHNFTUv3\r\n6W1BTBPxK4wACIog6k5ZIlWlW2Qv2BYJpQVoepGZdrigIB518qCPrC4UkhSm\r\nReblTMdwUOGfttBWoiaCvgj/ZkmgG/ZpDOGYVGnnw2EoLKOe9zFAoRO0zjM0\r\nIBQkerw3865K5AQGIxF0Pn5vn1qlJkbDPc8kVFbxBRvdl37Q4PVQI0HpgZrJ\r\nIfcp3yxqO8tlbzDKzLSW/WxRcxWFFb9wmnvZNNo/Vx85nKz4LTX7iPsmky+X\r\ngYAFuDLUsZHvCtp8ssBrj4OqaOr2BX8rL1l/zvZ/SW3bFeeSdbCirDR59dU4\r\noev6sDiuV+ftwv5AYAVza2CveMgNlAWa5k/hHllUkBc4iE+sr/VA38FoHL8C\r\nGybIFT2pCOhjXS1svjmvIEYBASYK0bDe6LwWdElWy4uAx/EVtZzOOzd5Th9/\r\nw9C/ZV4w0jNL4BBGpQzoqezLIhXoLPCtEpFJrR4rr2belacLlyFAHugBu9sO\r\nPd9w8DYguXT+xCkP7aap8ZZUA8WmWBcGBgU=\r\n=cUXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8c72cbe512448f11f63208a155bc665acbc79d5b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.6","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-2022214195653"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022214195653_1647287845314_0.8307301311890236","host":"s3://npm-registry-packages"}},"0.0.0-dev-202221419595":{"name":"@chakra-ui/system","version":"0.0.0-dev-202221419595","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202221419595","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"42c9de5a4b0fd96650f80f3f68bf67ec01c3927d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202221419595.tgz","fileCount":37,"integrity":"sha512-GmR9EeBVYi1de/ZdpAaDIZgmWq2WDs828pIkaIHo834GqTlDD/vqbyd1DJ+wzzH6MqmgdAirRLzfw15Xhq1BuQ==","signatures":[{"sig":"MEUCIDC66I2tKbMX5pOSsXs/UcTtXWQpi9IV8cFuazWo26PzAiEAxksSW2MSrVs0t/2HTWKee+zsMrUC1DRRFLtW3FT/jfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL56zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCjxAAlTNOGe6T4R0AFL7wBUMpjIp2WQfpkZcEGdKRBpuOApEa472H\r\nG8nkRV5XC5SEDCtutJgIAKMLBPtumBClRDAKTyl5zuM8J3Ud54MiBQghKly+\r\nwgx51CSrfET7X3Cib9whv/ZlTqFBZ2FRwEZyZWeOrLp4NRXPjKTok+m4aUT4\r\nvbKpy/gi+Ye1XF9aZc26N3bFSSuErvKxWWhqPWok1Y9uuKofAYjux6zJLmYW\r\n1fbwB+uigWZ2UcJed4XaRee6g0DeZyN05+nb7sFCgSjVbwvf8e9kxvtWYhHa\r\nni/+98xxdWIXsvZONeefrshx6jI5Y5+ZaJuNOE3DAD8i1VX2IqK4odZrX11g\r\nMqQFYywWHMesgcTW+jnDJQBZOliX0YLkpF9SwS75OY6xwgqFJ/GsJz5F9miT\r\nUl3q9D6xCQThn6qt6sBXDqHHbTz4kOhtPHWh09wQGzIxXQ47nW3sP2vqzAAd\r\nVLH2sBDdFdRFsxq2ikHwq1+lvnow6mzmavpnAhwmvCFYBkuTAW59b93ghD1N\r\nOncBFoaRFqU8cxbA4SJ/mi3H2Qf9PhZTVJYaDfll2QqbaXPcTOiom5bx/HUG\r\nuH2IgIcHXsCJkAPojB05cI+eJQ/42UmGBYPYBB8b1OqXfvQdP77rvk19OO/v\r\nQIND7WI/fJTUeztq3lZ+hJILVOXHWq4zR1s=\r\n=M+2E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"613baceb40ce59080488abc50f7e6e1a8df9de0e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.6","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-202221419595"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202221419595_1647287987238_0.6218516595700738","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215181125":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022215181125","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022215181125","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d599d608ea383aa05aab55d29f0b94aa2466a4c8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022215181125.tgz","fileCount":37,"integrity":"sha512-2HiQfxXRkloQzXEjXp3sybIAovdPZ04JhXfFTPTP1NfYDj92jP3mBBr+YS5E5s1Z5YyfCP/3QJ5sbtHbcrB3ug==","signatures":[{"sig":"MEYCIQC1tb+Os2CLE/z62pIpCTPmjoyXOdt1LJgvvjUk5LZ5JAIhAJOw3fuxxWnEGUCu/tQcb7Yz+HR8bcN2m5VCsMrkZbJB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNbxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfDxAApCHjHreG72lXdhNYpJyEJ/XZMHQwBr9PV6JQsWw/owKH75pq\r\nk/A6j+TZTnzPHZOS6enTUeZoyK/+zJV6q8XgTg7IvxLss2/UI0D8FeQ+h7yv\r\nnSCnZL0+bkp6l6xGElo5ZhV99NuWdHjQdEe3IqevyTMZUhD0b/F4NTtTzwRX\r\npLH1gFADKBtDlXh57PNaicB35wj3kiS1dk7WKS2npKkTw4dUdA9JWL32dMWx\r\nUltjygI6G3FsvGgkrKk/OEAz/pIscHgCDFJmmhpWM/BSdi/inlOApRflTNRd\r\n6oI9uzyErSyJuw5A6e78miNSy0VjqpEC6nHHDsk0QwwwOHSKkwa8I0ASomHY\r\nOz/EP41YbdyZR9wnSF2NElVkW4jovpmypBlTKtZtH5CETZaHNqB59Bw+lpWz\r\nHcPU78fmVSB7hg7wiM0RWRgJ6McvyMhBM2rxrKrs5/sHZn16vX3Kdo9ryFPA\r\numM2EuBCxKglCUcad5jZ8RUzxtPq/9kIizgeg9EYEmF9P7SnjHIekWEFgszG\r\nUl5TJsVY/j6V99fV+81G7meukRF9SVVZD+tSN11Tn8dIWnXrvThvJiNYPfkz\r\nSm7fdI8dRF1ntghysOMdOHHRM+nwLOd4hQrxy0MYOm+YvMzaKbkXQwgcO6zx\r\nHldetXKw0a1XhRnmH3QhOiANBi7gPnO7Nu4=\r\n=psAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"73a06ae8ce1bee644e10f245edcf2f9f2b773964","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022215181125","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-2022215181125"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022215181125_1647367921547_0.06561903328729568","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215182043":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022215182043","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022215182043","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2a6e643066755850b2fc850c72fb69a06bd0e9cb","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022215182043.tgz","fileCount":37,"integrity":"sha512-gg3YW+2KEl6BhCsvHgccX5g6ti4jJu0iBSFF94+swIA5Kn6738eBolTX9mwtbIoZCBbKK8TNKl9cKRL14DDzSw==","signatures":[{"sig":"MEUCICeF3q52PiVeICzwPtrAZLicnndjzfaRB4vP+735L8JIAiEAjt/JSEbX5J+JZs14JH6lfWlO/nDrpJ3JeESrycdEg4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNkqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQXA/7Ba1VZPhRDb6bF4s3GAUgUUAsl8k3Totn9MH0+MW9Y+z1YhbS\r\nTcFaNvgVp7NDqhfvvRZW0h5foVMWKwA/3NLfbjNMzA6+x8px1RIbc5wq6o5L\r\niTCMdTOFxV2/uKAlges4S7Jiku7hDPMW08zHcKpkOruEdFp+mVcMw/jt5xJf\r\nE6UMv+PiJ6kmCcvfjHYzXulofmhybDJs/za+3NyjaVWYBIu69qMSpC4495Td\r\n9w6vLpy0QlwNn64J6Ty1AKE3jC2cY9aqs9kF+tTF3HVwrNpcZjglSWuBJ2D3\r\nazsZEiwZYIVjtSzncFrL0ncnL8BJI2XETx7ujQO1TCzoFekHRBJmJCXjHKjx\r\nLvqlmN3n1N+1JqHBSfoSFCPgPyr/mMZkt0uaq2eKR9gjYeEPqdirmmY2/aHU\r\nL+SxlPtY9fUJ/ePFVbqQ8ekqH0QP0SQ/tswLYAUS7ulJ1e1owGCa1rTNM8Wy\r\naqf9+ShKVIXDY6tWv3aGR6Mq4p/Od2Tbz0FjWQzCdeQP+ft/Lns3lAoK3VB0\r\n7lQusDkLPi/iVqf7F2VJjxM2vdMbIbHLCM2UrW5J665dHAMH0zf2LY4Pl+IP\r\nDid3GOGKKfc+OfkZtIDWZGf7DZIgtoiwk3EOLt+kSlFHvbSPN2B5bm8VgvOG\r\nOuvPIDyRKkNprH4J+pL2R4Tme7PX22RmC8c=\r\n=uace\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"232853068ab9ec95cd123ccf378b044ad7861ba1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022215182043","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-2022215182043"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022215182043_1647368490665_0.836480856424278","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215183938":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022215183938","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022215183938","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"498266e44e727a832f29335525813e1cb69a256c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022215183938.tgz","fileCount":37,"integrity":"sha512-e4K2hxs+D3VJe9M6zhTlYUhAT8EvRTqKeeKwGL3EBNNHXNJUiuzsCsmVMImPY3M0Q/jtk1EMAt80qEiNcPJTfQ==","signatures":[{"sig":"MEQCIDOOQ53Iq2f36E52cVdsA2k3UT63h8jQk/bM3RFIEQgpAiB6wM/xyaRFgcMcAP2vvPneweh4lJWtHo3dMTlA0Ib9Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMN2kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiJRAAoVyySf450c2mHv4PFUTNy41oCdVfA6IgAcwOODqwT9WCT3gF\r\nD6QGTpfhFbKyCoEPWQsjpNqnP4wxZ1lKx+bDPkBkJEUBb2QGJsamtkvu664J\r\n7XA09iFmBDyhLJnZqZ4WKdhoOH3KVp6fMlPQVSl3N5EIK5pN+2YaDo3ot3Od\r\nQv/vjt8ZEWyyENF6wiOYDwUgUJ4kH9tap6DUUM+A7Uv9aQexL+k/XcKYE3Pz\r\n07btf6xVLl4GMZUdYoQxp/hBS2WgUIrE8GzoffplwkY8bjkcZRkYw6yRfY2f\r\nHj0fIvSOASw51Guh8aUf6zAFpDdabf1fiF0OkFKvCZiWaaGTYnzXtwkN3j2X\r\nEWoiOOKgQ3p+T9L5jCB1eWdx9oQSAWmLtScia75z7TS7U+WlPqHP8ZRMcsIr\r\nim2JCpMisRqHHWsGIFWrDrjsUiwajRd0LUTXAt8ShDyRN7QD6Vbz7I25iRLG\r\n/xhXVjgZxwWmzJ/NCN15oFPUle91SKuq2CvNZjyHsqPDN/7MpyYYSFsR5Fra\r\nA3QR9D5PYkwWaX7F4LgVn1UtRkUfjgd/Z2+VeGB78r2viUhrHff8SOIize67\r\nsfJ8syVe587VLaHd09NAN1WExjSxREu6K8LucN9/I/ACsZ+7JaRqBHAaKyKz\r\nbEbuSM9rAT/nSJS9eUnA0URBAahSLCG/wcs=\r\n=mk+H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6ec09741acd40eb1835cbf6d02bfae642413b6ef","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022215183938","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-2022215183938"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022215183938_1647369636281_0.5015130511740231","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022215184036":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022215184036","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022215184036","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"90cdba552c6f3bbb1a715c1f23edaf80365c5c96","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022215184036.tgz","fileCount":37,"integrity":"sha512-gAO/DVyYftq9g8tFxioZrIdlfeIczGQutxTq5sLUlDM5uOY1WgXda0RMxtX5p7ygIx0fu0hkifvk0oGIREaCqg==","signatures":[{"sig":"MEYCIQDwbFCUe+UQC/F0ko24aKBT3IEnFeDNqEh3u1upxXrbqAIhAMwEeANsCwgiftiPx0Z1S4wncIidU699oF1Qfor0rny0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMN3KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmocsw/+PJh3/UvRF7AM7JH5YoS5Fms/iSQ/dA9Aocqnwigw2DyGdjKy\r\n12IFFypmTE9f5fDbW7yV3fM1YchIFBuGqRD/sZLAZFTBEWjjVT5mmJt6xBwO\r\n8xoFttFsqmIlilQvxELp0N0UGOK34vqeI+9OOWdv0vzouNamSQVhvihuq9kU\r\nQcE9Z5zqJtJqtleAx9ocNnGi+k5DL3+7RmdJ1eRqq2IILNnHFW3smX5U5nEf\r\nv9ZATeCSblBz/UnhfTl/VeP/R44enxX6kKVoVjowuxBvD3U1NHROKxpITbNO\r\n8CwT2kN8lIfnBXTyo5TqNGogvlyf72QrucBkuodG+jL+8aBHeC0Gf5GuEtVs\r\nSQau47Zfov3OiGgxITZUf36FovjEPadGMyFcAO2A9Xgchcigco48Vr2w4u90\r\nmNI29jo0/75MkBujLrsuEk3bhEZwmcTzrZOnOk6H7DlYzc9L1xvI0ob02tf9\r\nfw0T+kn5pG9KEiKkeF3CwqOXp4Hy5nqpAMsnEWWJfffcANH4SnkAmGbbeGq2\r\ndjSybZDAp8hzpjUpKi6yuHSfCr5qBZERqN4cPO9+d04HHB9ZEIh3KVROxzB8\r\nNu1/Dfxjb2tMZbXbYx7DQfOOTJMcn8RoKL3gpOxaFmp5yqDbclZOR7Ne2d5z\r\nogvp+6Lm1U7gIeQAIpq37wNdpI6gBRLvkm0=\r\n=fSPA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8e201b9f84a914e58cdc9ee90b3e03269fabf4d7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022215184036","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-2022215184036"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022215184036_1647369673928_0.04565497734344759","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022225182931":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022225182931","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022225182931","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b78df98449b7857537f148043723c17e2c94993c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022225182931.tgz","fileCount":37,"integrity":"sha512-NEQsvfIHgifqjrPvbU9Mu7JRJQ01BQqmiQCnvC1zheBuXKFcKMOFszD8VDkeC68aIH749Yjmcuq9+EOxPgg+9w==","signatures":[{"sig":"MEYCIQDKvQNPGgZudUJkxoHKcK6JscbPRrm+vqpR+u9JLyBwiAIhAIA5kyqHoUGS0b5lTzRXfb+xryk9fIwFWTEQ7MvVUjYH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPgotACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozaA//dtY23kQKx4vUriag5JiF46F99KEXEMpaM+nAI2AVhjoTNXJP\r\nOLPPe0yrzX37WU5kNgxN0ICxX9PVLWPM4Qcci63XBGJxbcBrkHch5nEUm0Ag\r\n7I83Hqw/6V8t1DHkuf8Y7aIDA51Rv/aS4dxYrEF3rCAWMA9Ogkg1IW4/wuTv\r\nlFgPPiO3gC9q6H49TkcHa4OgDS8AdIiY2QVD5x4FxYkZmIm50xT+AHZW3fyz\r\n5CoAy4CQSGzJWjXL+SwijGrKktZXifGuzWDDsEXI/SVP3dASrlY8HibtAnic\r\nFqMo6FEOpuC53YGSu3JIUqWNA6lZr1PiFvb284qLlUA8QFAh7+E69V4A6+wt\r\nRAvfWDUPL/j8n71hWy8MUKaE0TgUYLyHZcsUXoZlvWcOpjM0Y9b2kOxtOroO\r\nTvuFsPUWprHgOg5jerbiVPEYn+lHqeLz+ZPAOWKNZqo4Qyy/7903DRI2CyT5\r\nI4hv2o+tV24ttOQAHINoZSAPtawbjiVN62qds029GAWfpDauTGMj/mkPbr6y\r\nPudtYg7C9+/WZ4WbiLTv36a6HzhZPkWy2hELcRWlt15Jb6YLL9tgmlX5Gy6v\r\n0eGHWodj9JMiB4tV7F9+afHpkRcnzDO5GdVP+/V7TOBJu4G/S73g/venFgQ6\r\n4gmmNHw2196yoyCzgA5cn2DNE3EpRkmce0g=\r\n=5wGW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e6fcf17304e1f6959407053b3037c9f2168c6ca4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022225182931","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"0.0.0-dev-2022225182931"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022225182931_1648233005492_0.8832433946808795","host":"s3://npm-registry-packages"}},"1.12.0":{"name":"@chakra-ui/system","version":"1.12.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.12.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"360edda3d477f134f4342497241ad1e88db37c2b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.12.0.tgz","fileCount":37,"integrity":"sha512-yKX7T0KGo39YXAVMIdJB3PKzkStIblPAPLy7BIho1dK8ja8LpcB/HmQMioJocvQgD/0bV3sBls/v5So9Jb9PYQ==","signatures":[{"sig":"MEQCIDSEclrm/amBxleHeYac0xotO51uf9CQGn8WATwNOH6RAiBuWJP+A4LcyUyfXJN5Q8pTKCgB4RymcZyV7eQUC7KO/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQEv9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrurRAAl8Ps2i4DxHod6eoJmRoCoepi9wIald6bjc9nOGCbu8dFUw7P\r\nRKEhDPYENzp/yRlgRVG8PB4mCmuI+DhPO1EWdw+76BQ33QGS1TbDbQ72bU3Q\r\nT4G0seR30ibBXqDFblfUnHOH902/aJHj7jVGde8oqIQqSRz5Fn5SBHu2+XYz\r\n8HKUpW36JwMO2yMBCTMcTmc57WNKFR6pKtlbYre4zMPuzs+xTDhOqEfnVVdC\r\nIvsAe2SrmZvMmhr5c7pEhkgRFJF8hbo4TBQpPxbVhLEW+hUAa0z8TfQyKqq9\r\nY2zjIJ/qPQtwtZ6G9nPyI0MBLkFZ6FO8CGF95IiSqdUySgEs/dELsQ1QH/4W\r\n8jNTLFVDXTJtUwxII9ZHEPImN+NuU5NDDpo3RCr60+x52H0AAAvNPwDj33as\r\naykdoF0xEcKWmg1IdaXFRrrS+wYkMingxF2y2SDFH5HO0RA3r4eZlkjx03g+\r\nUn/yIPFBIBGp8U3KSRULtW0acTE+/he21EBkReHaUEHeYXGp+BbtKg/EuxpB\r\nLEwCb2Vcg95FyZdYQjWVbFvclaZOYt4EEQi3C22wztyQbvY27LGf+Z7rimVi\r\n4S5lkqNyY6K13NJx+dtp2B1WD6IMNym4eprUCN5D9sAWFS8WGrjDUBWk/w4h\r\n8Dtfa2ytJSRsSJczolkFSMM6NLJPIpwZDKI=\r\n=AtIY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"bab4f2f2cddc5d4ff073b71ef72537fb754d3643","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.7","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.12.0_1648380925693_0.37394056331904957","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022228155140":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022228155140","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022228155140","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a8728c59b867829b0ee6ac55090f5dbce17a7a45","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022228155140.tgz","fileCount":37,"integrity":"sha512-WEoCbkP7WujgRZbcl/sXNfCSMYNa+L1ML5nybv3kuyhWJkwdQ9LgYfuGcTnWIlpiwzyr43GL9zT0WT2yYKVTVA==","signatures":[{"sig":"MEUCIDCG7KCs9v8gIbNgfWc1sQMF6jnVAdQrq3ijfvrjQMUrAiEA2bsqP0aFs5TSr8CPJ9lvDrLkg6heEFvNguMV4aXZEPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQdm5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoavA/9H4Xt7LT5Vj/nl11U2tD9cB//5rwiw9DMyAjPSVdB0DAz2XNC\r\n6lohTLIYsNyv/ZVyBp7Cd0NlRxCmaaZEXdxST827LDxnMSenvmbP6N6prahQ\r\nmmNrlICzchd5rtpLOPb5LzM2iNqYeDX3gzkz8iV7GjygxbLNvXnRrRmI+S9W\r\nPAEb7R03WAsn8hGgjYWhxLShMgt2mw8WLmGFLi/w2NXITZ81qH59J9Hfdxox\r\nsjHzJDvdDnIWAmHchyo+31PHpWjqhpTagIRlLGwpmITwcCSwD8DnoEsE6fhF\r\niqVYIYIgYLf2nwGoFOX2TRTHSbxgUC+KPHD7046/Z3ISyJxz1ZByFCt+G7ss\r\nox5bZlrE9Ro0ie3yvO0RWvRRk7o1pbNxuaIWtCkz8fhO/tnq0655U1RJbuUW\r\nBbK1BQyfaLgMRaNGMrOMbJEvEYLq3EbfO3rf6uJvS6M/xhHY8JTIIreerINV\r\nVA71a0w/4+Z+GpmHpK4eYvKnQgrUAsFcZpR7MOVS61GF45PFIy0ghSh9C+ym\r\naldqvDpoZz0DfFHVg5eqRnJXr5SjL6jKfJckn2u5n4TnHw3QulJdtnAjQY+9\r\n3loaWlbIqh65G8uPcki3c7NbqWV+uC1YqLHpoWRm+jsmYCE+lDNIAGgyudtC\r\n5ESxQ6/Sd0F8cdBQA7ky3yLQzvxNT45wqys=\r\n=qaz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7fc8742394fcd2de80d5b17e8325b148b1ed37b7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022228155140","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022228155140_1648482745707_0.558727750391127","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223215463":{"name":"@chakra-ui/system","version":"0.0.0-dev-20223215463","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20223215463","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"16f2b39337343b167f240af22fb15eabb322573f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20223215463.tgz","fileCount":37,"integrity":"sha512-oggkNOQfR8N98DqU+4tvWQi42en5r0O9x/Tn11YuX17XN77IYR7FTra3LyrxCAGyWp9weaqGq72uILntcOsOUQ==","signatures":[{"sig":"MEUCIQDVtI/dIELlvJsOORbpIYwulieSFbZay70YA3yk+LCNJAIgD5zJwPHj1FbG/cT8iSl15vfevpXahMcFQeAxhc/ulKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSG/eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdMhAAo/UjP4sOgtI5M+se8GYeEF+eyNCy45RvqIxnwo9rg24/cx2Q\r\nfyBhf52meLeAKgU1qw3TEzy8/CWJ5ZvQwsZWGo/NiNxevCT9Y3XaAWf3ctjS\r\nCYAO1VMH7yX9+MZ4Uiw/p3jJQsbkzag/horcow8Cb4a2wqLACs6Zq9Yoxo+V\r\n0EBZ9Hejl1o6XGwxwZgmgUtJifL70VeIan7odVTH/tuR6SYJf8x900uEutdh\r\nYADCQvsDgb+piw+SWxYXr2ZFPI8h5cDfeOW1M1ohO/4em/wTDaqEygvYZbjp\r\n/oGvS3xjSN1ns0ay4gp83o1WZnl5B8KMlVvX9Wx7xUztFSKYGcASUY4GpKEe\r\niV3sbo/INkLwNm61+2VWZ2efJ7TwAYPuAAtdEsiWV+ndJLI6zhEJDoNyizJO\r\nlXbvb+WJQhvZ+gAtg07lEfOaZxnQrQg471lsVn+hsUPXV7l0gRdG3vWbLsbX\r\nVoO3IColfzCJd17gJ3E8xGlx6Nz3RsdivTFBbnxzQdxHWyJt6WXxv2vJOHZ8\r\nWr0MBdKmg7+jIRII9bHCm9pDb14r9CJ8SsCHoFIVgEtE7opXB33ndPKMRpdt\r\noHtRS6nRPXizdxi1ezYCreDr5LWyPqRh4+dd9/b/WbvQp+y6KkvJduK2Vbn3\r\nYX/Kvo9JHcwwdaJAEHi95HZWmKS0RCOmrOI=\r\n=d0cE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"82a98db6e9dde5cdfb1abbcc6e7f4c5a09ef4f9d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.3.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.0","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20223215463","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20223215463_1648914398112_0.6571243355028507","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349032":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022349032","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022349032","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6fc4f906a5e9fb031887ab6734afb02ecc01169e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022349032.tgz","fileCount":37,"integrity":"sha512-3McSO71q2AqZMOaUwqy/257uffYP1atsRb5dQrV0oRomVxpL7rZ2ezddyPmw66NuL7xalj3mFPwSn7znBp1zCQ==","signatures":[{"sig":"MEUCIQDcFJCoabEAZ72kyf8sPI72k+tw0+Y1+JBYRppRTHXavwIgcMwyFFBcShoMWKr3SG8j1Bu1L4F3VUGOI2MollJ3xu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrPcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo36A//Sut40XkmY+cCQRmw6TFA67OL7chwQxa7bq9ut/UMHe9bB4mo\r\nKSDmf1GvWUE8A4iqFt2+sw3GOmmFARzMw2Ts58eqQSlYALHeZ+3Fbw/o6qAS\r\nja3dg5TWQPVCKNIHso6vq38+fRjboHlpETENQ+elfyE4eLgMo+zOZdT1Cshl\r\nkeYtIQhrWfQ1gKiqj/6NnlqD6PK11GdKk7ONPfQ4Pp5X/MaV06ouGLhccQV6\r\nXSZi4OATjXfd5oVYVXFxLomxBtKim6qNfg650tUTpsBPFSUuzrP/aEc1ovwC\r\neCbUphr7I1jY6mouxFKFc09HcI1hvPyjKzfGUzqVeo6znKpbABS0ejYag9BE\r\nVq0yViGOf7qSuxGizfWFuzAIZxCthvdsVfp43YNXoqy7LwdNvUTFmROyHPTF\r\na0j9rLGYJLAao35HoYr3kBJ3Ws2DiQhvDEHgiO924XQw/eDwWqrbEYAD2N48\r\nSuEeYEKd0SxvLv4m7fUUMjGKcOMV4asFg55WkDpVxpobV76HHlddUFxcJJof\r\nQiwGPfGyaYxoovJXDn8St0HViDtTQ+FKUMpDJBy64Fjlm0HaNdQqxUcSoDNw\r\nEG32u1cyx1N3fuEJP1iKXKVwyUSj/xtn/FxBQ9451n/KlpQPKXnxDE8+o7ym\r\nyWsKmGY1k8OrJmUhr43wn+Oa26cjpQ6JzaI=\r\n=h3nn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"59e5b1b6f0b3e7f412c890485615af9a57765cba","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022349032","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022349032_1649062876133_0.6626458155634156","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349233":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022349233","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022349233","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"45f76b8ff6ffcfefe264a8af359ec6237154574b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022349233.tgz","fileCount":37,"integrity":"sha512-fdqwqHpV2oEZTpdK/wiOioz9ZBaWACQV07cE+5U5O9b1mLVX2gU/v508wFwmcKEncy/2Z8HykfJWsAF138i+TQ==","signatures":[{"sig":"MEUCIEznZhsW3Pl5SdSaXdhpLiezge8/DD4L3sFgp56wiL6UAiEAtg0uq2Jph+nyHTXGedznp/SLoxP3orzXoRUpDzb1WPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrRXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1rQ//eZrReDAf193cGAKk4pxKJyO5RQ1QZ2UgJoDZWX4Eb5pLjHwn\r\nROY/hrYbPb8hVqXdWuZnMIE2WQqAacHhtMHoActd714Kvyzy0y8ZR7pTLTFk\r\nMSkufg1yQyKjBPgWOTrcR2P1l8dDI54Qf87nrZiuEQ1f7M9Uhhkr7EFBD+Wu\r\nk32SYvlaRqAVir1+wRM361sElRIxOYnWyoD2amcVzY9aZGJDbgznEYAC7ZpI\r\nm+jhj9w1tqlhayJ2+8bsY3MQ9UuSgHD8trQIiYWhf5H7CbdYgRKMxkTj9jCx\r\n8ZDFo4YYu/ODl0uVgkGngunlo8sBvODH9bo9VVFTmGKQ/gfz6VUPov6ClmcS\r\nrfjE6HQHkyd3xt6dY/wyzMfvvMhc7qXZES1PX03JQh1ouLckrLFLq0KnoLe6\r\nmZzWaKkDDq/Nd9EsfApsjbRHDIeaj0ZsGjSi2wN31dYo56hcCTGAIb3IpEFX\r\nxaI6tCLt4AlTE1wqQq4vKFiNFb0NVg/Uc3YNDwciRpuuBIzCuVFRhW4VzB2K\r\noO600ruanBtxiw9b7SsaZ+O06qEmC3jU0sjnpfBz9C2vAwT2sg+Tw2DarLoC\r\ncgLkn9xQz+zwUeSRqecg/40NAS8ZRlZntMpvkU1LPyFkkmWsm7i97qm4lI5J\r\nQk2q9q2d0AyyDno/Gb3ULp6JT+PIgOj1NFo=\r\n=XRRK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"bb5de826e868abd7602b761d42d9d4842072ebc8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022349233","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022349233_1649062999130_0.6506133427351908","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022349957":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022349957","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022349957","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"05acdaf738121879718847497636a77dbb062736","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022349957.tgz","fileCount":37,"integrity":"sha512-z+AQXDlflFbiNj45HI8vTXdGyyLK0aNL83KmgOdgx5yaRnXFWjtyo9wlxxrdob4WILVlJAzmZBjLx9eysxGXKQ==","signatures":[{"sig":"MEUCIFKib3tI5ejKzIF67YryGCzvM+ZltCCc+xklrbRHHCQbAiEAvsE1NMZeK6Ncf6xr/h7jUFCDqAArvW3/QVplAazH6rc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrYFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDPQ/9FJ2KX2Yx68hy4solJq7z/xaLB16m8ag8YdWtyZ444CFR7yJx\r\nOvktq4V5XH6cnXfhEQzNRj1gOWDz7sjRFFhYLOkka0S/GVkPB6NJUktalOhh\r\np/oFMZVJuFH5Q/FtykT19vCwhe+xsji0JMOlH2XdrI8NXL4S6gA9kkfqM7Ra\r\nWDWALmGkDiGGE6hXof2GRVK7RPVO/q0VWaqVamFi5ihfN7Zwd3dNDv1mJUWM\r\nuhylJUmYSk0gvMaJ6acIm/he9LoQjxuQX8RxRUSOSxtTkz3t1R+C2aGWbIHC\r\nCi/6xH9j6KkVqRxEiTHFRRkPcjV7BQykOP+sUCicctf2wJRQEPGwycrrNFbB\r\n4VftDqZL/cBG7W7pFAQKcZMtxJtzVpVy4KOn+M/3tkbUr+L02HvgiO3vnPBC\r\nhyStROrAnBQ6vRICFjkmkooF/nZAtVVBi106iAXJ+qKIf2kJa/58hAlCkA9a\r\n/GXREhlANdCmJMxuzK1cQqw7Ug/RAyFvkTcuQ0sKtSHp9PzvN8iNY4NJPSur\r\nsMLXV8E/JhGY2zO1wEVK2GGie/zV73/AElbpeHYBJNtrxcfi5+aBwFJpJ+Vz\r\niEgppX1pX3q+QIpKU6yRqvgc5ONuaUvNQc2p9Oh0EyFi4uEUGP76ZLdMFxW0\r\nc1ZIvuQqrsvegXD8ymCE3JVYZ3hc9f7VGgw=\r\n=be4T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b675d1794da212e0b7b9c98cd275436c299fea56","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022349957","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022349957_1649063429150_0.2965553306501816","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223491859":{"name":"@chakra-ui/system","version":"0.0.0-dev-20223491859","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20223491859","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6ef7c4d54f35463ae1521df1decb595b175b1341","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20223491859.tgz","fileCount":37,"integrity":"sha512-dN3Ixh/4UCewHEsTDRY2chNoe2BujSrmxvPlYqEENKv323Xz2+sTIRbOISGemHaKxlUkkIBPNUiWgDSpuwRV7A==","signatures":[{"sig":"MEYCIQDnjoMS/Tc/Go6meiQMw48MTYCUUktWSt3tRbd7sW+RHQIhAJa4AeDkAwf0W0SpbdExCa5RSs9pJg0f9N4sz+JCst9M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSrgyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6PQ//Uuc72DcyWaxFUhdNzLMdlejZAojekI6DfwzxoBsUyv/rAGia\r\nUMHENOF83+X0KcnwQ97J2pWBpadC01Y5embKoILUkzMuWwrnpkicXUOaRbLx\r\nI4APRb5fkEENMA7px5H6aYfQ6deMAc6ih2R5BQa68V1SgE61CUUm5jnuGTVq\r\nEDjseRypDAijuksh36rFJTCBA+ep3Fh+kgKtofiaI49ff65JgI0OxOWjWpPX\r\nX37h3VF+cDhgi84OMrIF5vv1lstgbdl/GCNQZsMDmEKVmrkc/b7/KxEUelJT\r\ninbDTJxz2iPX4JC5oROPA9oYCtOzrVeuSPoWb305PqGDpmJR6mV/QOFZYVOQ\r\n2LYLOgvebUysmsLK48q5ERtg0pxsxFNeAt0W/UHFr36AeE9D3MozV+pprZDM\r\ncpY19mfk2SZHLVE7eMP5nEwvSY55xvA9hvzVTpDHRveFQ250JgTu7mfr3nUC\r\nIniEt1+IIcJbAA6wEm042qTpqLtUxjmWxBXPRSt7AHpW7Vz4ghm3YU13XDYb\r\nGLZ2OC3czRnHAikX9RgLfMdsmEp2fBEcbCWr+OTEXsFqZ6lHeciT+FPRUSUF\r\nnT+Cko+eJgFPXOXQcJ7OaAL6pxSuFCOMUup+Nsh+/oR1PyhYWnRHHHYyLGic\r\n0O/icUNP5G9IKryCuSExiVtXjUnP8Ty2by4=\r\n=CIWu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themable components in chakra. We believe most re-usable, atomic\ncomponents have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"3c59f6d762384c91681999ad247ec202255afdaa","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20223491859","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20223491859_1649063986471_0.5442870163920124","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223655213":{"name":"@chakra-ui/system","version":"0.0.0-dev-20223655213","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20223655213","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"add79d0a3f0dfa2eaa20264795b505c88aaf7023","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20223655213.tgz","fileCount":37,"integrity":"sha512-nVdLn9tbklVtLQF9v6qFUPaOZ3Ox4ee2wNrOeZU+Nx3N21NR98Ng+Qd6xaklCydioLGU1IlzOdq6YCs89YU6ZA==","signatures":[{"sig":"MEYCIQCafHr944E1H4vHNlyWKb0cqHO4gwaVI37TN+QBQ/AvjQIhALlI9aUZIESpV8RlitqreAQQH00O8au1ySSQsPLC2cgZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTSqwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQsw//aAr897yFPIGwCHo0UkJwC/xo2B9shtD4VF6GZmGqXmYwCNWM\r\nBH/UaOW91JtylBBMA5LsbsGI+saZA2dAGT9S2OA8/t2MyeAqVuTNUKkMMCih\r\ntQaY7UBb5pMyWE+OiWUlAkUX7Cj5/bnPwFhDd/HRtqcR1WVC0acmUF7W7DOD\r\nB6ZoywfabHQZCiPHAgOugPOb7Qhp02za0Kb/ZS9GLjbb3h9N4ZZaNg3ycpXw\r\n7Kd0nMuPrJIP7Sf1RSdt2JXb4Eh68NdtazXa2UkcChslcBdMLB6PirrDoWbj\r\n0xTvxHIiFJvAXIu4omlGqt81w/fZj234W8yCwNbO6ONE0o30dateOEuV+Cl+\r\nqh7+J6CvYYxjYiLWhvSj+8wYwcumELFH1pvxi7jpCv+6DNZKqAJJ12iFO8cn\r\n/bz/HctCuJNr/Q5WoOlLxYK3JczviHxNWvE8IwqEqvlyKFfhB8NOJJB0rhwv\r\nIjkArw4yr8uLppHPS5DNbAIxMUloRHTvk1vPzm39V3Se3TOyuvgR41NpZuH0\r\nDPqYYNdhnoeFXvgbh90CuYpSvwjqWfrqZJpb+43VLI22kPfdkRAZOShXllHn\r\nXzXxOMsaXgDNY25WAuqdaTqdJmtgld4F+ld2gbt3NmQbeOkyBHcVd5sVUbrP\r\nsPw8DjUkemCwq42yuQB4DxQB/olTBWjRYoE=\r\n=Q+0N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fda65880e6bc8182622e73048e9ab5b3722aad11","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20223655213","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20223655213_1649224368477_0.9520034634898398","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236131344":{"name":"@chakra-ui/system","version":"0.0.0-dev-202236131344","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202236131344","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9e02aebfaa5e167330eada6fc53f8027c12292d9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202236131344.tgz","fileCount":37,"integrity":"sha512-KUMErs7DXuxOvFxO17W3u3qiw913JLzH04hU8lMd+onSLceFQDi2bwnu/gGVeOlZUIuBzno9h4ROZySpVuosnA==","signatures":[{"sig":"MEUCIG203ER5n2gdt4z6Ae/ewOFmFd+Mkznm3pfa/zU8b2ruAiEA49HW4Br0RT6End9L2vMIvPavp6Y5WEWwC00XJWnmW/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZIzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8sw//Sp/2xnkmErQ2tOqf3A4T6EhgRY587Cxms/1PjZnAqX8W/yvR\r\nJLmUwZWi5JfQrJRw4BRnIfRahxN5WmiaAPq4bJTfY2F4wzrR35pnhO6Vwb6j\r\nerX0yy0xwVf8bE+kpnPMGC2U5Wmr/qNQHAfaIdZbnn/X+RQc7QYFKa/BN1mi\r\n1CJUj1fUyku6d0OCcs8GFxrMvmGzZhXTmYebYe4zFc8vHKQ3D8/i4pxwvDmb\r\nlNgni04B4WGBnQmAjHfKhF0P2V5gGKvSKqNyWV4yUSZ2+zMtKEjBQvv6AB60\r\nHkuXi9mBLm22hhRv0vC6VPcpWF3vTPdUe1LumCGC7HjaudO6oPKcPkTgD12b\r\nF1gUT9tXzGr6Pjy7bTwYD+EFNsRPbFLbAkNeQvk2lxl4AXJeL4Pt/JBTXqTh\r\nULz0XJnKyZyjRtzJN+Bicgro9USlxAudb2NlfAJs1Ho3w4gaaGT5A+xSCfN7\r\nZ4kLSR6G4talaz3o9QURtG2JJC8lDgAsZQMizOYr0WQtI1DuiXfciS2Kcyth\r\nCAwEfx4UarPm8JJw8ku/d09GH6U5DJr/VqG2/LBMvkTbLG27h+oAoWq6dZ/i\r\nb76tIenhy0DWzhypMLvuA6hiDmbGU2M34BziDNhUcbtFX4udBgiS5SU6gtwI\r\nPNcIXzkyled6WGKwlmN5fLukMUOhN7Ud+6c=\r\n=HcTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"5c3f6cc51ee18b653832d0401687f4bf6d180d3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202236131344","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202236131344_1649250866917_0.5039864327425878","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236132312":{"name":"@chakra-ui/system","version":"0.0.0-dev-202236132312","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202236132312","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"25b762fee342b2d2d80b0c7204d95fff7e2e3e0e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202236132312.tgz","fileCount":37,"integrity":"sha512-UfBMry1Bif5VzED9M5NyejBZoRbDMpAz348jRvgF8AAHsnDgJkZWXyhAbvzUiuRs3UKZPG1zR2pZV9YCMgopwg==","signatures":[{"sig":"MEUCIQD6pyg2abQEajLHukUtdaFd6pHE2V7FRKs+NYv8/+xK1AIgLIGLLzgAdr0Ss6s0BnE6cHy7X2Sf2DoqOmAeArcXqo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJZQ/+Pm4g/5BS9Nt5ECLewyi5WGpiOn5W1GkpE1oWZSulBCn1R/Em\r\nemAjYs7zZp8+RWcUfkeWjriApSW7VQWYNYbkIMNVtVCGmHeY4FG01V8JI/WC\r\n0SUdZJHcK1b1/MSg12MWxC8eIMRHuAC53qsjXMVKan4sclG08FbkniBsmhZK\r\nAxMpmoh/kJdtczcXx9bYEDkCGlm/38i6BVKUbL2WUfmlrNaUQJE1DPC0fGN5\r\nXh4TnR4Qe8Z6Zj9vupxo2ushjG7PmE5FIT+ClKlldiY+t3yMXQlc/7P2zv/P\r\noZhKV7q3BJMSR1bz/axL6JqtclkN9SJh7yJA1qogPefATF5v8yQm4thmqXfT\r\nDYgN57GVGQyzP4vY/8kVikMBiM4Wm29+JbwiqJsF/L4wzk2hpvOCKR+4j8TF\r\n2z1M6SRxU5eMk86xiGjefnDWMZk5pL9A/WHsxpj5KjD7xbJFFZ3DOCiAsyCw\r\n2lKFqAh7zciyUiGoJWXbMDLrYSzd3c/SqIrBQMgUGIqnZgrEtdfg+Zd+L6eU\r\nUvKQz+HwGRzQlubNMtTHp1GbK5Wf2JU2LZjBGlCzbSW8L3vPunwLjCYBTXPK\r\nNhxDf7s+Gj+2n8Jhuzb76UlTUT3CvnJ70il9ejpUzE7XG2/YYNxIPpxB4NFu\r\nE/u0SkrGG2m4bBR/meB4dp1pnPpgZB8j/AY=\r\n=WqMx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"2d169b1afa4a5d0be13f975518ee5e286b485d1b","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202236132312","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202236132312_1649251427833_0.18948153933992362","host":"s3://npm-registry-packages"}},"0.0.0-dev-20223614103":{"name":"@chakra-ui/system","version":"0.0.0-dev-20223614103","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20223614103","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b1b7b5d2ce13e2e44ab12afd96c5502f28745cb3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20223614103.tgz","fileCount":37,"integrity":"sha512-w5aX3BnCrYvke5WdYRmqhFojjgNNaKJ6Gx9NH1Pupeeg7jlTOP7LVF0f2mdIwFfLZb74Zhe0oQ4gtuWfAalsjw==","signatures":[{"sig":"MEYCIQDe10X0hcnR+TectMqPArdMEgkUGnby5hwsikGN9J7thwIhAM3iBureoC0Vj5qhTz5GyuRPmIQJlv/vgiyA47ux4VEM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZ9hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr52Q//R/xPBV51vDuCFCdEpzkmWr01w8vsNdukW/pDJDgmx2QEsHwt\r\nqtVYhFqAyiSJw8khyC0rziWuE+9IyXGbGke9ESRoMe9HunjLuhaCSKZab6un\r\neNAjd4eLMluPtdVOSV1MMW9KZiZGXGCA4vgM3yO7W8Kr/FwvCmbVEv6SAaDg\r\nv0AAOWxzuUrFWb01YVANGO/IrbzNVezQof3X9XgeeervHUlnboQqaJYT7IDp\r\nFa5vMeTr3nDzslfprGHpykSjdRU4uLajN7JNhD15Sumx7KVzVISXhHsAeA8h\r\ncMLzKOXss9gfEIzVu3VskyRVe8NUEHvLn6Dh0H7wi9IpA2phQMxeP7f20hGj\r\nUIshKwI/2jSDnAsyoDcfevWBRsS/nRhrcU2qywyIw74Ds+iEJZ7yDEZo2bC1\r\nlNjkMBcNsD0LYN1nkBl9s9ddlJPTLuaLngQpyZB/dABas+PbQjeuWjNZc2Jk\r\n2+t8tZq2HnO9EDbA1Ep6ZLMlUv8ZdHmv/grJbSb7gYwWcPVHRKrLUAXlPBKL\r\nAhyJLi5qHoaU57crwDnwGz/AOdQ0xFRUWpGJxQNA5zsaVGyrIv3m9Qj0yKDp\r\nzi0kcPEFR1FzsrY7OcTBXZs97daT2hDKAidU3e7sgWVBsCHMFjCv24eE/7fS\r\nDimIye/TE7H2e9sfJcNvJZ6YLGYwvVZPdAQ=\r\n=aOml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"733fdb4b1af9722336a17cfbdfd906763eee823e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20223614103","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20223614103_1649254241604_0.28863669003307635","host":"s3://npm-registry-packages"}},"0.0.0-dev-202236141416":{"name":"@chakra-ui/system","version":"0.0.0-dev-202236141416","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202236141416","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"77f3bdf2ea335b31da6ea8b21990ed22f14f0446","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202236141416.tgz","fileCount":37,"integrity":"sha512-hHBx3gD52Q/5jUtJLUwiNE6dBxHUEqoi50b8FlFAWSQVVxSKt4NtR2dwxYmCRBjldg+Cw93IWOHxPoCMRxPVqg==","signatures":[{"sig":"MEYCIQC36efDO02vViW01VI5vfV8doBXj9d6S75ePIQ9gQK6qAIhAJ4HegE7elH5cj5lvFr8iJqdySPen7hLZ67ev/qXuZgw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTaBcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAcw//VBL/7HI4MNxI53sTzXiI37DepzH9u/xZ1CRhkjh0iGHemqep\r\nQsaJeDZsPm5A219J/XES5MyH09pZOAMUZadDDCX7vtZflhll8xbOPKlXjHzl\r\nAdPLNdKPPZuCNCnrEbZXO+cZ+Z1aNU8+GY3Ez9+3NkSZKoh32RXYUbhplePL\r\nZ4vpIDpcGQhh/WwiKVbLGqUtQLvkrCfG2Su0wYRAg04l6EgdyiCSy/sTOklh\r\ndkIQZ3TfloEKKEVPWeE0w1s5jxWFK2pIB44Qoanm7Q1g8/vU24uvOShqsCqw\r\nL3+cVsLdhMZVhY4FZmQ3v6q32YQNZvb0ukve54n/pxUTMP+DfSB/le20UGh0\r\nH51FSxVT31RyYSvqFlditTx6kr1CKhNPjD36X7y/D7gT/O4NGex5ET1CSOuq\r\n+WsstA5tsg0lz4X3VcoyzzT8X5892D9RT5kwLZJgO9Waf4Sy0oF2JZ3PwXM1\r\nbmyg7EI2ZvcOHzjXci5keqojkIt0z0SzcnajgM9+2AJk5+kQw/RmGBGskXW4\r\n6wryWgoD7GVKRKjD0OK26sbiPN+ZWuhKV7BylC6B3Rnv40hsshvkcnWAsW/d\r\n3fKhRYqmbkVqH223bAa3bTUHUqVCTFKsXc/LaXt9epNKjMFInuyuggqeLtB6\r\nhMDFD55oHgA/Vt8zOwMzWpJfDttXSx+yd4Q=\r\n=a1Nf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d7a0761a4d3f34896b32985aa1caceb55473e992","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202236141416","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202236141416_1649254492260_0.043284662513602745","host":"s3://npm-registry-packages"}},"1.12.1":{"name":"@chakra-ui/system","version":"1.12.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@1.12.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"608655ef3f7cb82eedd8f20d2546458d90d77cce","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-1.12.1.tgz","fileCount":37,"integrity":"sha512-Rp09/rMuPA3hF38OJxeQciGO9N0Ie1GxwHRAw1AFA/TY3fVyK9pNI5oN+J/1cAxq7v9yKdIr1YfnruJTI9xfEg==","signatures":[{"sig":"MEYCIQCZcSSmM7zCnNe12n7uFXMxxHooq3NO0E89AHBCQWI8ZQIhAI5wEBcVkdXLMO0p4pr1lYgd0TFEK9aBxXZUhFnY2aEV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTwSMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp12BAAnQop6jduTzK6+OE68GxEm5KKfTNajjwII/39yInl4PZ12jyy\r\n0l92iXAUGU4Mvc9lcXH9N6RmqSEZGe6pEPa8yjIUQDeJcfwVH3PBhaGj26u+\r\nMjcPkljUvO2P6CtB8VcMs+Q1jwRC7PEqG4Z2ho9qA1HKgvndXP5U4VlOF4yd\r\nFkX7cHOUDCbl83Qvh0GnlT3w41NlfCnpeIgUG2pHsbpEt7YQRSiE0yR+QY/M\r\n0AAnUqVgCa6ehPRoY5hZHb6Dwm0vz7Sviu+fRN7Ap8hrIR1JIPhXBj5RzrcS\r\n8gJs6MeKqUoO8SZj9CCtdZcFs3OUzXINm9lqMG9p9pFc9P7rVTxc6uOUNmnk\r\nIaAZHvv6xMhfGN77qt+uZzgDK5KzDfxyUHZqyGkJZJOXyPUu+jgDaRayql8j\r\nAGQbBiitg8JlGsZZCFtPQhkzjO6dCakfp7PR6W9Zn3ODMhsFJB2N9Qftpx+e\r\njPVEm4C4VeIusalDWSNu63FzLztcBS+sRbAF/DRYUc1c4KkxF6uyxOS5NTxT\r\n/frI9pBhrXYrUoJ08YtyUGtzkfK2xv9QjXoQdnRHVlDjbJpBgBNN1RPVeGcu\r\nx/ABkH6mq07MqUF3rW6KPMpnvwLPV/fFmSsVphLtZrDBz8ixLhBO7LzWQYm0\r\n0D+papi3LZrZVngXC2t/fn3Gs0rCOyrSmoQ=\r\n=fd6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"3b0f3da033aeafdb05582fc5b135499d5637174e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"1.10.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"1.4.8","@chakra-ui/react-utils":"1.2.3","@chakra-ui/styled-system":"1.19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^17.0.1","@emotion/react":"^11.4.0","@emotion/styled":"^11.3.0"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_1.12.1_1649345676561_0.5721790342614854","host":"s3://npm-registry-packages"}},"2.0.0-next.0":{"name":"@chakra-ui/system","version":"2.0.0-next.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.0.0-next.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1b146d0e84be4f99619f90a2cadaaa593a65dd03","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.0.0-next.0.tgz","fileCount":37,"integrity":"sha512-Odq+qy7RXqg+Gkes0FW8bzxEK/cjPQ8f35zbY3LAol43PM0xZXErtE39fXPXzdWdZcfQn6SA1kfebwivx/JEfQ==","signatures":[{"sig":"MEUCIErX6i1uuiT9Zyq2RJVwUyLm8a/eAZx5LfuCig/YIK8nAiEA7o1Xi6qBqPlZidLcgW8tboDzXpnbeOFMebvMljjkJxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWY21ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8WxAAkazrLUPxYNssCZBO5teJ0r1x1kjGo7oQeM2LifJQDCuyw0l4\r\n6hbWpYxFr5V6bO/LUUavw3XCDYDH7GSI1eqK1MhFytzmAovNvz7zTo+QONcA\r\nTPvJgABlFoo8165FE+L1Uhur8yImQanaw8BLS+bUVhUA63SX3OMGPlfLKOUA\r\nbnqWNMyPMAwH0dFaVaL5edoJo5UfcfBPVoiLOO++cIhvbFfe5UIJmcg8rAdg\r\nPUWGoEvJ8VpYvdg3uS+SIaeF7g18uRAa5vFJeCFTmkBW3O+uFepxvOChK4Ak\r\nRVrcr+MBZK1IICV2v7HZ9JiVHmV0jwaUuINNgELOjoDgQm5VSbEtPzXiW+G0\r\nt9lSFWvRx/fOWTif3Zsr4sMNZyrirz08m441C5YoKSPbN7ABhKjP+RF5e1EL\r\nmc1wkhYwewxZe1wGE/ZuekQhFhZXxUClPRfoWI6WlV89O7vQYSHbr++hU6Hy\r\nKv9L6DYLgwkPDZxPaF3pa5dEUNrAQlA9i7CTOUngaQYvENGquYkB8RyiIrE0\r\nYlt94jUVhKJZ1h1jTuKdf37TgD8yrBnlyosbH15y7PEHD4OzCJKoWvg6rqVo\r\nMDg6NQYQ9nzVAnOpm7FTmDWso05lR9/Ir0eaOAOZv1XyPcX112yYGYQPFTTy\r\ndexpHUV+VRdvIBwYyJ17OxaBpXUb0h+8egM=\r\n=2T9T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"257811601483bfba6262e723393759399a55c148","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"2.0.0-next.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.0-next.0","@chakra-ui/react-utils":"2.0.0-next.0","@chakra-ui/styled-system":"2.0.0-next.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=16.8.6","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.0.0-next.0_1650036149161_0.9675544122809159","host":"s3://npm-registry-packages"}},"2.0.0-next.1":{"name":"@chakra-ui/system","version":"2.0.0-next.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.0.0-next.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"20f55d5770471e135d6257d67ba5b0ca2e59258d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.0.0-next.1.tgz","fileCount":37,"integrity":"sha512-BNuk8qJrJ1o4FreFCdD5hV9RJ0fHjrC+VIzWWtxyfR0KNElGxqTp/lQt4NkSqJd5uR0VmqS/WloF8vsqTw9YMg==","signatures":[{"sig":"MEUCIQDT1EUedFTH7Cq+g13Yg0Hz8ECGfuTRnl16Mp57tyGrnwIgajXCCSfr9lfd8ITJyGj6W8nJLL3OcsIi6VzcOr0yjxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYkWvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL6g//e+Hw1JKnvdk+FdjKdMeIRjdPQcgfW949F1Jve/55P/gnJLFi\r\nMKZbA5cyMSqJb6f7lttJYWy8bSWyi3f8VyhMCSrd0hIvEHN2/D4Ahnu7JI3s\r\nEgwIWiMIidSwuHHshlwJphzEMhhAJm2607y2RYqHwwsa7D2imi1lqj3eY73F\r\nlsS1RBOz6hFrr8xSVKg7HUZwt0EEfeXXcXxwu1ZTTu3jW5Ky1Z0rsIU+Uaf8\r\nU0GUQdaD1ZjE5BJh5Dc3GJrDUqtYoD/9E8Q9/BrEOL/tsWmMM9Biy03tRfDz\r\nrmLbYF/MVZm71vJirVd9FOaemRAOr7mWNFElmlUzs9ax/CcahmYIsFKUAHsp\r\nQhCVTds33kZbW2iEMbO7xV5zJe2sHmDCXWILX3joVocXu0EYQl1UsVuXINiA\r\n5/w7oQQ7cObiUrSfldY61k09iZwoN9ACO2gVsc6vkfL4E1+OcXgYe/IgFh01\r\nLXz6YRJcsvIrn52hH6VM7Y8zMV9zmsqhKB/Wc1rgxxDjqS/y7pPkwVpI0xEw\r\nuU0nnFdRgPZSvbdI1lRuTYt3VkA3Kff1wExUZlZN0UJFmCk2Wdzox83OakeC\r\nAINmNFtm9STcNpG3Z9AIjP0JzMsXdPqNaOhUYKD2OG4AE7dvW7vNbyS6MZxL\r\nPEtJJPT1SF89GTmZ7EEuNbcymeC18NOw3ps=\r\n=6+Ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"d90c04942268b9b586b1ffae3dd3791137716935","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"2.0.0-next.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.0-next.1","@chakra-ui/react-utils":"2.0.0-next.1","@chakra-ui/styled-system":"2.0.0-next.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.0.0-next.1_1650607535078_0.4531074337990155","host":"s3://npm-registry-packages"}},"2.0.0-next.2":{"name":"@chakra-ui/system","version":"2.0.0-next.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.0.0-next.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ab55146f458e045f2074f903e4b17eb958c024f1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.0.0-next.2.tgz","fileCount":27,"integrity":"sha512-vddCjoe6ciN9iQDwFRcazxkd5uIxPpiUumeW0/GJDIVUIu3D5zEQvlCGjHBUrOIMV8IdwaK8YHYUjtaURRlugA==","signatures":[{"sig":"MEUCIHkcoFtTfVAjl9SSeWQETbvzHft+vxlNSLSEMcVhHZR0AiEAvKkCsLs1XdY+AhRfoaOd9HDhmuKEyKdA0kEZjE1Ij7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4jwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFRhAAi+5cEOJyRHYvaECX+w5o/E6DL9Ky67KsE1e7n7mitlKHLZ84\r\nBRQnaNFR5RVhBh3v7rQnW/zwse9jUqW0oIhBFZgm2VfgzUDQ4Zp2BTipFG5w\r\nwZJj68MuaC1cPNWdA/F4ygu4zOiQycDZzm8l2rdFvwcngEcSw2VgUKMzuc4F\r\nLiUkpQ01KR2soL/W045Ypz4Gf2p4HRNDLM75ah50j7/wuXRMpZpqvk/wHdcS\r\nsSR7iZzjz8miiXH6D5NnJ07DLulLI2JFsZuQalkwxRLxhC5f7Xf89vqLMW7N\r\nTZL7hKN/eHuvNHShxl22Ystg1E9vW5GtDz9KMxRyXnbJvr/RMq9AIvwI8Xt8\r\njpMDmuhpejYAyPJY78s/IsdDn+qOC7eww3ITAfINaEjCzMpzY6KKBjvzgAMA\r\nVMTPVcA3gRWsi4iSZlwaiVkcJupaEOMCZaiCqkuzM5dWDEtdfucnOWax6tob\r\nVbk4KVpJZIK1FPM8JR6Fahny1WtkNQM5ao8fO60irapB+/5+f5acTxApJ3Z3\r\nPBKprQrmcGfYO/QIPJsYIGmk/9JtN7HegTFlg4wSJNgORq4ipeLlIX83jsdE\r\n06V286jMDmE4yL0rzkAnIbxe5dadkpgmh2ryiqSL6Ff7tly3K9g88YFSskhC\r\ndxA2uFWrFTMPi+nfCTXqQZoPqT1g3ZtQXxg=\r\n=MU6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f868f7862a4206cb6794ac526336fcf4c19f34e1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"@chakra-ui/utils":"2.0.0-next.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.0-next.2","@chakra-ui/react-utils":"2.0.0-next.1","@chakra-ui/styled-system":"2.0.0-next.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.0.0-next.2_1651738864265_0.2557150753645394","host":"s3://npm-registry-packages"}},"2.0.0-next.3":{"name":"@chakra-ui/system","version":"2.0.0-next.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.0.0-next.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f0840bb4629662faa45589870c74c32ab4c8248f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.0.0-next.3.tgz","fileCount":27,"integrity":"sha512-PUviXr23ZCSmoA2mBJE5xuEuosfg1abbpSh8RvMXwdE/x0OuzYingbIjvuB0KOMjtBU34Gz0+FPyWROq2tATFQ==","signatures":[{"sig":"MEUCIQCdByWCtZG4veHi00sRoW44lyVtS6ZSAGNBxMoLgBrKfQIgecUelY8ZzBdceTmzVJaNIhyp8Pydsp0cWBb5Jw7u/kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidBWYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKQw//SVDzy3ZBaMG/xMSIOwFItfRchSJtmDPKePLjdgsZ13SK97HQ\r\n+xmWshYQ14Jkc1TRLT4A0caVPlhsCxj1qTobViHbMHouhWcevPEpAvTICY5J\r\n0QYtId+rftu2SxJfJkW8zOZ3T4HFrnE6wBIoejNEX9oAH87+SWwYf/N6O/IA\r\nKAQB36QkiTR6ksgNsqcbDm3OIp4RWrnw/fbIycSk3B/pIv5ZmuWl7wAkYs9V\r\n/hEVR+t1ygL2ylWzbtYyndBAMI6N6nKYQhfl9SAqUfshbgvWZ2TFAIedQqht\r\n97ZR3Na2Mne6KXevUn3Uqn+LyYVSNXuiQndjGv3HVtaCxgqc5YIXw36HJ7UA\r\ngLlpKMQ57DSOMNlTO5E04cePnUxd5w/jcbojz2hbpUUcAaTsf8ZqfqEx9/qi\r\nSsldbVXUWHOm7fE7CRFJgcMIDOfEomHaSLTx0uKc7eMJzLe00xTF148hKATZ\r\nIp3oY1pWOSKOgSHz6fvvCGsNnRUQJWqXt/1we+E7mqOzp28m9Ez1n+OnnQ9w\r\nyOyLmnCqZ0udFSXgc62R20hGnzI9pU7V+GRiCNu06owfUTbrpE7BP9IB0/0X\r\nCyLwBlWilBPQyWT41mZCNXT/Ey6xajW7MoSfk4W/vR2s+TEFq3rcWYdoWZfU\r\n9KyA1ZhG0ROhTuifIVFFgMCzqX4vMPM6HyQ=\r\n=KxND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"c3a1993b61a7c8527c9a7fd80d4d5611f21dfbfe","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0-next.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.0-next.3","@chakra-ui/react-utils":"2.0.0-next.1","@chakra-ui/styled-system":"2.0.0-next.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.0.0-next.3_1651774872163_0.9875864843977686","host":"s3://npm-registry-packages"}},"2.0.0-next.4":{"name":"@chakra-ui/system","version":"2.0.0-next.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.0.0-next.4","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"84e3c5b814d3bc068ff1496c6cfaa3ddbf08e92c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.0.0-next.4.tgz","fileCount":27,"integrity":"sha512-wmHzS/ttklz26HhOXoSK6CAre86Ha3nOAqJfaQAt/JsJd1dF3GrVk6phzAKXRmKPMvCBRfU4noHror8BZ/uMyQ==","signatures":[{"sig":"MEUCIQDYrlcQIc02iYMGbl84Z2f2HyP032B/x31tYqAKOOxHOQIgUXH1mBqo6tRFycc3uHiRUfM12gkiLGussQPQo2UobVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieNOtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxbQ/+ILqg4O9XToZyTiY1+V5TPINT/o3EdKpstkarPET4rVsvHyi9\r\n0x914JBVakDOJr3H3mZY4+1UQURVol3CNo9dMb2DvtX4Zq8OCZlzN9qZ8S0K\r\nTgD47zs95oqyKiSZNNHKQU/8MBI2MJeT8fNVYI98m1EZK7ameuPuN6J9wrHB\r\n/O/BWCOdlQjr1d8QebgTkhuec/vKv2k6s2gQap/V+2CgYbeCyEvk+ABtiGu6\r\ni1KB4HxMAwNjAnC/ipl/8f7MaorgU+4fSPUMKvkQlK//hu0K5afqPTkX/5yU\r\niYS+l0PpnwjsgSle98E22rezOYPbqJI6V/XsVzzTfMRLU3ppA583WzAgW0L/\r\nMOg9TYrDUvD+/m25B/ksmiktOi4+IylV7H+wYTPv9DVGnJiGTrWzTt24DP0q\r\n0cqrA+t/uiGCgQM7whdZftm/mD6XkjAD7g+cAnZmzhbPg14XmdiQ5PbPc5nF\r\nRvzM7rCqRyH9mzHeLoG3QOeT7Mlppd0rWcaWDErg/hlF180VArq9U67J61C7\r\n9MBNwgb5t6UaZu9JNSZGs1dCnIQvgiO2eNPgKGMQ6ALfvgoilYs0eiCAdE+g\r\nlrSO332ukEVJvp16wEg4rR9nvZE9xNrxZXsYbpf8x4TXyAMnaeyxYqICxnZv\r\nuABnXUgRgFmAs9J8vJILcRXWP5iZIP3FVM0=\r\n=8LQD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"839e03eb3d949c1f68fc3034456abc050ad2d8e7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0-next.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.0-next.4","@chakra-ui/react-utils":"2.0.0-next.2","@chakra-ui/styled-system":"2.0.0-next.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.0.0-next.4_1652085677792_0.47619928437249337","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@chakra-ui/system","version":"2.0.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.0.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f45ef3a2d9b655927223222be0aa9647d9139173","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.0.0.tgz","fileCount":27,"integrity":"sha512-1Ns0czQSoh1WAPTyDyA8wu8/+HZ/HgmNY9lwJeinDvRV+KDX9SclI5H1CrWaB8dbdCopo8Jc5umnaldndlCVKg==","signatures":[{"sig":"MEUCIBd2HZi+oqL2uz9EcsQGes5KaoRo2ELTMomQ/nIav3MEAiEAxL8fxqARe4fsJkXmDej6YQxdxZBXxL79HF4gxZjdohc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifUlVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxMA//aE72eWVTSqe5gkHz2SA0GpZTl9hj9IcMeVr+ytO/NcpBeCCz\r\nOLmusrRjS2diu5T+hd9W3md77yGJ9bCyi3Xu6co8NuVR98fKgToygRnM+ul0\r\n1OjPUthQzv1qlTtbEHGvwyzRPahRZ58rf9oMhpMH+l3c/58gHqVJR5NC3bPM\r\nqBhhgDH/ofNVfo3qAXssrTI+p0Zi/bIG1P9Z9lknMNNsPOPUVJfSLjH0PHzy\r\nSg/91DLKR6HudiCZLnevXCPNJextcnpaUzDZul4XI/HPCo+LsYC0SyA7kT1V\r\n97waieryeSFYpR0BUnnyBNsPaB+R9qXKocqYDocg3QcosaEDPSLgli71Yw6y\r\nAFpAw59tonJdbXjwnpTlmOX4+1C5MuJofsXeCVXKn4shRuPxnbGqMp5cNfEF\r\nkMFUvP8FntjIqeT0FcQfrkD2KEn+aPnRL3dxjGANFFDpWGf61RcK4+ehBCl3\r\nmZafUvqBF/a+3a01PKcINIx0etM/DU48YR0VW3BBDXBMS5VQ04WbhuS7Psx0\r\nTfLkzXsuqRaMi58vLeL/8QsjJxKpadb4OdZjNMnBjR0NrA4mSPsmUaGqSvic\r\n9iO2mqTESLs5h8sQLXxAh2lOqe4ZIFAZmJh+dd8IupoiFjuboElVYM7TyJmt\r\nziv0BTpOzZr4oEC1A3BT0elRTQkEW5cumR8=\r\n=iurC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"48cc749d08853bacaf380a03abce69d428b47022","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.0","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.0.0_1652377941036_0.3203253868925735","host":"s3://npm-registry-packages"}},"0.0.0-next-dev-202241614737":{"name":"@chakra-ui/system","version":"0.0.0-next-dev-202241614737","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-next-dev-202241614737","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"81546f6fc4da397ecf8a93766f24a183887cd21f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-next-dev-202241614737.tgz","fileCount":27,"integrity":"sha512-wn9Lviac8eXhGUowXKHU7/gS8eWGTHAQd+jVZkchvuWgy5DffJhsxeBirMw9zGe+g25xLLT8TPAIQaHB5b5ZZw==","signatures":[{"sig":"MEYCIQCfr0tBnqBZ4qu2CGjU2vectGaXK4ETBSHkP3yA3PFeFAIhAJ+d3Ettunw8wzFscXFU7VVMR2BMJ4Hrug+OAGBLeZtb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiglrMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBFhAAjTKfMa7SRdiWPv+INIHmfZfEYxBw07Xvw6Mnz82gPy6PC9uy\r\n2HVr8UVZ86ioG//uw+gv/ay5Gt+z9uUOtjhr5vQlJ26Gjo1L1edU7P3IPB50\r\njyZm8LiUWjVhOKeTJzjA8+Cf2a2zh9FTfyUHM8suRWgi67ggLhvB5zcQNs5G\r\no18Qu9Q3Yt2FyYT2JZNLDMWcyzseFrw5LejaJREsJWdHX2TcuibOqqOQ1xlY\r\nC3vW5KUz2EoEGsArfVNbgepi427Z1mJJBMyyBVGk51QmLO6qPdWT85neIYcP\r\nNw9mW3b7FGIoZgQ0h3sQ2RqO77NBVqo2PElKpXI+sjdOrleDxWmLPML7v3mP\r\nf5brFv9Q9/gbGXnO03VR10IJb1Amx9wh1dLkO3gevF+ZQIMg1whMOaylOPdU\r\nwmcZYGiqhshd7btYAKX4tkKfW8A1iPR9BnBIvKIWXvYUNi2M2/4HNUdBUSnf\r\nX1jIKe5wGo2/tfdT4UBLbdjohmuG+uwRrXPiOkcp2366fRAdbSeUjNJWxOZT\r\nlQm9nr0e59sTeL7wjS09iPB+frftta9FDoCaFy2GXez3GBS8DFY/nT1s3hN/\r\noUyv1B+XZpQt5m8fVTPN2nD7vOUhdz8Fw7BMUXkR8uZJQSwD4AuErIJm9Cev\r\nuTbeurrwh+zFpVkKkfWdBgPWNOqASdaoUBw=\r\n=AXOi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fed228c088bcecc9b367198f79231c98e0a1d29d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-next-dev-202241614737","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-next-dev-202241614737_1652710092259_0.2873179710183409","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241614743":{"name":"@chakra-ui/system","version":"0.0.0-dev-202241614743","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202241614743","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d845fa7e1a68c9325771d65db747f461774a72cc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202241614743.tgz","fileCount":27,"integrity":"sha512-/Zi+YZYgqjQek70TNcJy7HxQkl0rElaIlE5kJngj+prvUAXi/nZLMoDhEr+uGdf3yU8C6oc9N2Rj+S85vbKGzQ==","signatures":[{"sig":"MEUCIQCZAm2c3bh0iASSNFk2sJOnFHct9T35hmMT/invAdkqHwIgC6PrbHO2ii0TOZmIf4pyW+OuOYcR78m/6z5dtssIIaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiglrRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBqQ/9E/nmxXDBKkvfGwr0nmK8G5Tyh8khb14B11MKqCNJHHt8SD+v\r\nhotZOE+uFhKAwg93AvSa2ch8BCoZEwMqALvTqiD8aMXClcQJxixDwJtsyldx\r\n6dfejrQjGSMhvp9OvHOMt1XoIQMa9ZLrDT4OIQP6kdZSW+psFwQswkS4mUNZ\r\n5+iuPhYOMEPI95flexr2IZqHR93tfFNlN5t9YIoXqyN8CxCH+1sQxgZoFVJh\r\n3KZOAEvcjQDTHgwelFzo5N0Eb8JZL5Epn3QyqQBfklZMXhQVoUywlcT9hmLb\r\n+Um/BnRx6EuiifaAYYgPO2UmdrGNq8/9uSXpZJgzBClzcwMsqYAo4LXH5vGa\r\npHUeIbbZMtZyu8lvS3mu5jpgW4eHk39g4dBKWp2VSvqUj8JtTRd7u6lBh/He\r\nMJK8T/4ey/v3AZuy4232F9kk+HD7od+KDqrRYQCz/dgvosK1XSSeq9qFbUjv\r\nT71pVYdYT/Rjif7EAZOXi0D3getRqyRHs2LpK4twkRF22hjT30LCvlxRE7iV\r\nahS8UFiFjdsFTZJlqCX0r1fwmPZIczPdN2V/bhlbs1Jf50BSd9Jvi8jnHmR1\r\nNKriXwwqIzq7Zr3BNrAuymYItfMS+8D6YsrGRZQoXwN6+eut9WhZbHbafSqC\r\nEdwUc8ppRWiENMv+3BVF69wNJBkAnCAnAnk=\r\n=uuiz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fed228c088bcecc9b367198f79231c98e0a1d29d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202241614743","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202241614743_1652710097347_0.0126254590846675","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022416204849":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022416204849","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022416204849","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eeb3543e0ee14b5e7a77daf7e97b9ecd783e4b4b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022416204849.tgz","fileCount":27,"integrity":"sha512-41yI0cStk1WCJnXLmJwwuTTvHAvwF1vovrC5if58k+cTKOMiJ2Z5Wjf6Ai4tVIpv/QABJYAH4OSfwZT5KQeXeQ==","signatures":[{"sig":"MEYCIQCRY/wx4zGF93dSj7lAhs5OVDn7DrCJTZaUtM7rzKJUEgIhAOEgLYrHwnBTjkw/jAYIQuWLdibUahBx91iqFMHyFyEt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigrjQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqdvg//UZIIG+10x/5Zxi4XCyZWxgcNBSpEu0lRzU/Arma1FpwBmVlR\r\nHdTcGh91ZvhEmydj5AXlnBa/fDdehmomqe1kI6WEmyzrQlQy84scTu/1vSRA\r\nB28nnZlAFL1eYZY5uOA6gBhqrZFbveTVqZCifoBdQaCAH6FZDQWcrO/qSyGo\r\nHiCr7ZmP92l1eZNoYAKoF4K3kBLVWvX51or87+7wA0mOB3GgpAr+fYbL7zty\r\npYFn8snKddKet7l/qQ1t9Aa0Ly6ZanK7BvHULHUyFCXfaKmwP4ySqBIKBSHP\r\nyDqBWrlEZeIqfeNvyxAxGgMdvXgPFXpHOT5cvNWz2cCRwpoEydDhrDz1htn1\r\nrZMgPjlhnEOepB3rzzzHusn+prpayCEUvoV65ufD9AEwc0IU0mQtYdbHGjxz\r\nu8oWjuio890xqknSXQJq0NRKm8rUscQnXQCU9D/6yuQTVVBN/RKAeMO9kBIq\r\n0fylIBa4bNDGWtIwHeMHpzNZ8+4G0+e40Gt/1vLwgzcjr/y+0dxuZlZ96qPk\r\nYsQbiwPqhmxsvO5qVE2WPpiKSF+0xYparVyEWkeO65ICQSrTQjvP0PHzG/qZ\r\n7KAss9y11CgVxNIAVjF98nBxNhalhb2zT0xV+hjccoJKBhg/EpJwZb2Fv4gn\r\nRt44jML1NQKYNcwii2Ech4RrA1QqJt48e6s=\r\n=RK4Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b6e8ae69f1ee9c566d9a7c99308c18020f96feac","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022416204849","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022416204849_1652734160429_0.5709069988509856","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241784047":{"name":"@chakra-ui/system","version":"0.0.0-dev-202241784047","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202241784047","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5c4e57cdacc9f30ba823224bb8cf13761ceb2b8c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202241784047.tgz","fileCount":27,"integrity":"sha512-Dlx1UnA5SEIxqgnMgeq9cRNJ5mFP9hguY0eBdfmOjbbZGGFhnfN7CDhG0DWrjpzaDkxWNEgKw86anFpQaFqoPw==","signatures":[{"sig":"MEQCIEdAYu/Ttq388jJVP4dyY3MFO05gtw2XjDPgQC05+CfEAiAhHxGSMD2XAHNTINIMgyQhinl0ZGrIcBOK2j4jUsUOTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1+1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0jhAAh2OTZZ7Wd6taJ66YEb7zldVD7XyQLX0G0w7vnhIfhjfPxU2m\r\nY0+OrAj6poNgdxSre5yH/QNB4rbr3qy5vpjT96nXCT2nk6myC7adD3dGTDd9\r\nEmsoiehsQoJHtXqV2AkD70MapiKkvYK+JljRPrfzbzfskgfw1QLqGd2P1QPJ\r\nazcu+brxULZhO++i0bTyV/HDX9KPQLqimWjYTSPt/TkhIcwjvJIk7BJJWrnv\r\nqkWeQc96Wu5QoULDajiYnNkOs9+P1s1fNc4cGUIBv1tWwHhSJxfhSC/olWpv\r\n/kX/MvK5uKmgjVmg3E98OjZUvlnHKpgCYNGYExvFiUAb3k+UoX6XRoAbGbJZ\r\ntGLpKHPK4qK1Y7Lci/gwkuBK+I2UZ+8AApOQunnKMd2ZpA4tTc7vM1Djw3Xv\r\nue4iJwLDLUSHAoAmYQtFrqzhZgAgWZdmsM5TI6b7nMy3JCMQQZG/OBHw/z22\r\nzz7jVbmMYXQ7GIvdjQZhem/RX3+/49cmt9QKNU59f/o0b44tqKBj1eYEPrbv\r\noIp5Q9358YljMRpEG2GPWHC/znGS115yEKpbhq8AJKeJevB+WyQAMtWCtQRC\r\nGZUQhe/d7nub4i+4ZpoBkW9lk4euzQpb0Mt/dn23IJi2J4KwqOC9BlCAxy4n\r\nqFJEUPz0FfVpTpyb599XPH6FXV4zjdtsj28=\r\n=WAb+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"4f2807e4195f5a7de1ad9946540fba8590ac42da","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202241784047","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202241784047_1652776885325_0.502364829858643","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241794553":{"name":"@chakra-ui/system","version":"0.0.0-dev-202241794553","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202241794553","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0a647136a2243c4edbd68632a1e852bf9fe468a8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202241794553.tgz","fileCount":27,"integrity":"sha512-6CYfaG8+Ag9sFoptgKhxl0rEXlxUmsUfTyVtyD+HuaHcQZa17gVmElm43pmuh9QSsqcWU44c0Sd6mWKGhRTpyQ==","signatures":[{"sig":"MEYCIQCNkUY07D5DMTkIoPdG+G1+h3fa6VUzlIXPdrBlMFOBDAIhAKiGXSDPNy6+NUKHtRllRjGen6ILztCYjX/Eg+IiFFsk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig27uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9pxAAjkjsh0thNjDhu4E/lZDXN5R+GCKjffg3bCpq4oPDZhIwn6k1\r\nAPt++z/62i9IdCAo9p4aTWoSrlDC7+pV07XwvNrcZF9EREcJGcjn5rbZaH+K\r\nBRYxC5DihMgwG7YZ7vOAq5Ieq3WyA2L35EyHo5AgjEYixigE58o159+anwuD\r\nptr8gNlMNWWGSTFg7c3IMhGZjAFCweRyIQ5HEzyEXDBffdYvE++rh2yHSLc6\r\n+6HjQQNHUCN9+pk3lvGcfFjPxPCbgWNTW/6ASmpHhxlPYQiYLcuM3HkIgvHd\r\nnpolibzX6EoAG21pr8r7IK7PribUJ35Bm+eAE0lpUF3qja9M+gtMx4ef8h6V\r\nNsrC5TfuUPaKpdwlHPLx8YsQghHYgIGjcL2sZQ1DvPWZhAmHcsgXxVBTGglR\r\nl7nQ3D4DZsw//f4NkK8bVPNAr4+Uuzb0k7680LVIK09q3JM2ZWjJQLilsilO\r\n/E8IyVeipFWOdEeq12GXRpopuwgdUxUlSb/XGaqpmYXk1/fnVtvrYtu0tJid\r\nLot47BAj3uD/egAt7TXZ4FlvjK0iuIljfKQEihKWeotW9hv9KtQ0nXiUkccV\r\n9wWMkjw9dnNdpZQVNSvClKJpCoFYaEr9ktrpqXWmtdPKHkH73HGMbdGT9e+D\r\n5u0+DHYB0ZMqsB864RbVf8owDcgFshDTeJY=\r\n=wKqs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"05f922f2fada732f04d93e13bd53434805f4d619","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202241794553","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202241794553_1652780782521_0.19351420882973547","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241710143":{"name":"@chakra-ui/system","version":"0.0.0-dev-202241710143","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202241710143","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8b8b93fe40cdcd94b593091be1e7ef28ddf47036","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202241710143.tgz","fileCount":27,"integrity":"sha512-ihxgbMVJOyASt/uSHCy7kWSw48wL7Sg1B7m5jO4tB/Dx/sWFX7VnW6jgqzYoNwsuC8Rx7WAE9YTfYRfMt+gDSQ==","signatures":[{"sig":"MEUCIQDPJ+wtxGSRuLTvTgtMmfsf3PBUivK5R6v9Nd0NzFwjLAIgLI19xHXbl/hQ6CEPlONajpzz+LODcBB9D12UeKLAcEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig3KwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrPA//Xa+N+iKtOcNd8e9VIgQsg/l9NIjXg7cQWkCPKr7zkh63E2N/\r\nFlePGYRyW2VeRnstyPXhNFEvqRKGstko5NAJ5NAm84LjOcts3htm4lgJbu/k\r\n2nBGcU/6HhRvY9nO8Qdcl2HPRWNjlAY68Q585EShLcrCYxCKUH8zuf0wAmJC\r\nOxl1+80vnQJe3I6tDNDwOlckLOmlDJ7HhuO31UbiE+eIlejHueJohhhszJ7o\r\nkHElYKBWVn33qgZnrQxdOKKPwRliRMbFtKZEQHDxTdxRpXG6+xJ/sxDs4O+J\r\ntxfwBLKp0vHYSBQy0ecQ2rEFj5YXqAFGZI74LU6bVBuJm91fzmvJfodoonOQ\r\njXQilvLrdgxBnb3MteJMEmMQRmS8wbf9PJGn8pg7t5NHSmxvqwDJ1UAoNrZL\r\nQsjtDfmbmA6nloHxSoB++dQt8sMJr7Gm2Wu1hRkGePKo3HM1TS5FCbemnbe9\r\ncnHo2ADZq/gwHumqnrFOCckGN3Vh3zkoJfqOt8R+eVkEs4yW/kMmJ7ug2Df9\r\neD7b6EExSQ/XSG9+jgkOay4+klm39hHYDP9JwBCbTnQfbLdh6BTPWVitqmHs\r\nxPsDKRi+dQkm794O6WCOG5ljRA7Qt6oJ9YHlr4h+mEGZDZvOb7T6CX9SeOcz\r\ndBI9241zuU2H3yiUerZ4tRG1x1RrkY18wOI=\r\n=atVH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7eaf538a4db9e168408e114f80a2c2898cf4fd47","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202241710143","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202241710143_1652781744152_0.02311256658973515","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241710959":{"name":"@chakra-ui/system","version":"0.0.0-dev-202241710959","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202241710959","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d53b1732a65a453d83dcdff704903051cba60bb2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202241710959.tgz","fileCount":27,"integrity":"sha512-cPcJgFeu1hutMrfz5IVT+ckdrI2CD6Ba1ZKuZb7+xWYpeBIHtuPssndHS59QLkvymNHzgr8c7MrftzrVfTaA0A==","signatures":[{"sig":"MEUCIQDWeMto/UD6FtA/qn0kPuv/dp+qsr/GorooqH5tESWpugIgfcL79LQ3+lgBEGRW47SuSVUov5HANae2DMyZbOrmAog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig3SbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF1BAApDKiFZ7owBVjt6Ef/pj2cs0Zw0vMR40zi7NUh8n9q+VRDHwM\r\nS/YAz5jkFC5F1LsRfA3LX7kN1+qFX/JUkHUPb6HO0C9zuvFkUctaxlgQ+zOh\r\n3AcePucW3hzHju4qB01l9kjZhE3iH5U8Hh3i05mTxAHC9Tt5k7u+Xh/iSb+4\r\n49qnmunc/cxBbFENK9Mw6L9PU2rub22yEuS09xcctq1lqMj/GA3aiMBtcs54\r\nTJG1mdn/RLp1hysBLVvz2E0plFh45xHe2XMdwt0GxGCuUP8RZ9m5TQ1fsLCn\r\nqHDTP7hii6cGHcTISDFex0SS8DxSGPMCNztD40J6u77pQCK77rbzgumjVJJJ\r\nquPL3UEvbImt3PMrQIVaJLxEKp1sqwE7wWVlZUmI2ql1W8CRqve9zDsX+5Zl\r\nF9fI8xatXCPN1nYhMvi9xT2uk8v1POKTu8SlOngVFuVuDpAQF/VfYR/fWG1R\r\n3iuZfYlEi4zehRIoPulhHl81FWp+ClXX2RrcdNMisuYIFpRk61aCpBU4kaRc\r\n4ZQlWMG3S3xMkDXuuuj0cvA5IEbgnkZja1SQ2zSjRibvdmSjk2aWpvDw8a84\r\naOrN+g3i/KazVhufoGS0L5MxDe2GnVvdL6XJvSjOw2xR7+L8wBltinDb8zTa\r\nXRXKg0mT6rUhijwkImIG/VdlXFkYSmXjuWA=\r\n=XZy9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"393ca5b165fc46e23afd90a898256a0cc3e97731","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202241710959","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202241710959_1652782235034_0.26073078442060815","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@chakra-ui/system","version":"2.0.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.0.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b81967c0654eae587135a8346cf5ea8118f0e5be","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.0.1.tgz","fileCount":27,"integrity":"sha512-4HgMaoCGXnYoWNmnIQ4JRE4l6GgTixDrknSVAeeWmg7cSnE7knFMrPMRygUQ/8e68E5NBWEpwEKlK+CBg1JIcg==","signatures":[{"sig":"MEQCICAV1lw0T4Xp2M1RfJonZUPyRk5ghd3comm06l0hT/CIAiApQ82xpdaV8OH3HxXNbVgDS0HoS/igqllpKSJ0R9qCeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig8yfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3BBAAlayo9nCBYNJFTGpbv8nldh4LJSCy53WhOXUlciccnqMrqEj+\r\nRgo067DnsrQF7fNZiWUyNN+MstAt3neKubFWPAy0luN03dlGubrjeJukmVcC\r\n6gOHPE8oaBkw0NJGdtW8uKHfGyx9l9BTHE5W+ugvkOdQg7hQh9/H5ONtzx1M\r\nuYeTGH0KtquAp4p2MxgDC9J3x0aWXymLrNZnvHfuEZhzGGUtNzWjp2dsy1WA\r\niCdarum3nm6gUSm5kMxdoYlnZdsVidcHZBtWeppABzvDMUNMGJAwYR/HaYvj\r\nE06meC4jpLrzhKiRuAxGqIybLG1B/YErUY3x0BcllP+YEBqTHl4JLfSkBxWH\r\nvSRXup9S2Rwg/fDj4oWKZZLsOYksI3c3FcVT9nbygWjDkJ/eHJlOjTsdsI1b\r\nt+En+/g0fLa78Ngnlr/H+nWTX0gU+HHFdhmyosHVdy3V+KcypxqEwV4apLE8\r\n1U6li2M13ccELibvi9aT41S9RbaPGyLWtB2OWTjHuXDkpMIJsKNCv9sy4MPH\r\nXdZekk11R+Mcfy+0R6KYjZSP7MHuL7ihquA8tbYc2Li5+aZdBIXToVKUwCAY\r\n6qGMizOCLwO4Ftu4LULSbDadRFUtUfp+v1FBGN0zZiYZ0et0dCn9yGtatSQK\r\ndufeih8zpNTDTuZDttrTSPhK8oJpyjf4bgk=\r\n=zqUg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"4e0c1943d407368234c304538ae57d47fbc15721","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.1","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.0.1_1652804767475_0.021094690013799378","host":"s3://npm-registry-packages"}},"0.0.0-dev-202241716586":{"name":"@chakra-ui/system","version":"0.0.0-dev-202241716586","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202241716586","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0ce311bffde3e46f5806aa419d29ceb21fd114fa","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202241716586.tgz","fileCount":27,"integrity":"sha512-vsJ4uA6s77dj+sq0NNHPeJ4BPvwiw5hf1JBMCiJu4/ZAzJZPdw9pDUqifC5KonmDYXPsET4PCRKJ91h+AdNYWw==","signatures":[{"sig":"MEYCIQDYxhBUCFr0Jt6uq1iT0zZhyKSIl4GUna00nkc2KFmIeAIhAO/qMB28nS2PQOH3YpOLEieb9UNa2UJzEfOXReioGgz6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig9Q7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdTRAAjFfj/kwgyiXrejIx16FkKzw8JFWpwCvfYwGYkAxTtE2edmVB\r\nox85NBrkzWXeSbNZxAavJcQ62R62mkGpQEINAwN8nxGFAN3UDB38Cdi341lG\r\n5VfLku/X6K370FhsIE6Ch7DpxUzw0d0YWkF7QRM6U/Un/oKBhj0Pg5hoWhB8\r\n0iRWkJmuo7ac1QScQN6DSWHAIiJtfaYZW2F+NPn9Is5QBVp7Ok40qehT3MrW\r\nr93CKsskfp+jaI4SSgSJzCmDtRYfhqbEHtk6dLQ7Ygy1qt7KWHtV4HFPiM05\r\nxBoJ+MTsj5w+s3kcfJ9MQ/f88ZaR7rfwfgt/sesuJBuPAABx/oihXOp/rI/H\r\ngh8UPp1VRjLL4AKcvd5B7UwEkjKcRsgdXAiViOc/rpS0bPG5sGvDwA3C7/J/\r\n2q9tynXNrPD2caXwAwASre/7l/Sj+intG8V963O1gv4OscqvuzY5DL6392je\r\ntbHHEj/UDE7i/vdyLT5RA0dRebGgNF6Xo68ZlH3aMXBvUeWDfP5Uy8taLaxk\r\nuZJ1p7HeCWdSg6UXj5x0lQzFd2iYfloXpjOXuFF65rbJNoNQO9wASYbE3tUk\r\n8O8H54lRQZCf7mdiz8JlyAHBhDIVlSo6SiiuuAqTVuc24WCyefHcZIoEJnBS\r\nncmCPsi+jAPrJ134Z/rdZHzW053oQhtSJXw=\r\n=pZZe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a9727167c9529f5512717ccf162fdeefe37c5d8f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202241716586","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202241716586_1652806715581_0.44018811984739736","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@chakra-ui/system","version":"2.0.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.0.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cfa19f534f9b29efc50f843594601d3f19727f58","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.0.2.tgz","fileCount":27,"integrity":"sha512-ZpzGP/7YvTrSK6/7ci1m0uu26EGtwBLl2SPY5jp8dWOFgxgLLQlxCCoRLJT0s5eKbFUqoaZFu6tzGuYIWws4IA==","signatures":[{"sig":"MEUCICF6cQ0JPD3NRylVzRLc8eRRzVuitT2Zqcu/oaGFjk31AiEAi8kCnBrB8AG3u4+etcwRNhQz+kSzUdSta/aZve2ghpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig9fgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYZg/8DiQ+RXFQaG585WX8lcXd9N5HlCeNzyNofOMt1sWaS4K3Rq6E\r\nqSZ8i4XGN3c3FLOxMcxG4jCY/Q8/z9XBN04oFc+LY626DdjLAFY6lqEb43FH\r\n0XVzoOY+isp1M3s+dkSKCWeqz/3lIGV4Ed/rmzeO9Ja3dX2Bj738g9n6pGBV\r\nBB61mbI3XqzV2DSJ89dMtcLGJgiA2847WSgEooe0iIjWoRXD/giQgDt3ZAua\r\nKkLqxtLf5CSXLKfgJts9afjYwvTrYrNBuhaFD0ejE8Ka1s0Pz1S8lxgZFCtj\r\nbEeBxhye/mef7kcDKGm6VH/wYl3Yzd9onAebBm5v1GZuNwrvA0LZEqOLkP/4\r\n3guz6h9aQJYYGF3k3ZRluXV9vMgRQeFgW0rbcXOPqROK8V9VkjN1L4UNd0qa\r\nuD+aNoSM2lUfKbeA4r1AZQyRFFz7Uo+BqAtImFrwe3vV8ZSrNaLW9ARqTNAz\r\nNJ4RxLMOqlx+t9nUPMkyfLMXpE4FR4+Dn/e0zYAeHYuPejVGZpZXRVWHIQnp\r\n5vLT8297ToeOiQlUqLzrsxV/fezhrRhsf3eJeJR5o0PqNEppv1SKQIAV8RFZ\r\nOSV7H74nFaTrtLnEUWeihKdPloCEyCPDVgBeoExkhGUsCm9WkNi+JCBNKKnX\r\n4lsSEygW6M+L8dZ+oZ8w2iWS9kte+TeeYCM=\r\n=785N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"516d036d48453810b75fc338619b5831d5fed861","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.0.2_1652807648686_0.4425551011842752","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419101754":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022419101754","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022419101754","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3bfa65fcfa4e764594445c725ee4511d22d4fdf3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022419101754.tgz","fileCount":27,"integrity":"sha512-CVcvfDwIuMgP3uDBzxBJClxquvrQtW15nldQkmyzkbPKmJ+tmKYdXVkcOkCmyPukZmt1s6EQeF5u7q/16ZuQKQ==","signatures":[{"sig":"MEUCIQCI27nmhWwf1pZVCOAYGYy8iNzE4g+1lkMz5i3WvDk5YgIgO+djosLps5UM1LltZ3lUeaG7COJXVZcoMA3VKkqZI9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihhl6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYqxAAkXPMHL/0q7vou3wsHE/Lr9RNYW9dzgpJ6onwfwiM6Ta1VC5k\r\nL8HExMbB4wiJUWWERVXZ4FfteqcpHk3Q+o4TDSkFzLFtPVneCCfWyIejNqPH\r\nwBpWiURnV6KZqzNt6xJGlfw+UJf+Ogi4gWvp+MhS7wZ2VWIqxJIEhOkecJIw\r\n6VntZg+D9QwMm+YzXCU7Zaig4oxOHIxLdTg8nPKwATA2XfwHcgKKa2g5Kjiy\r\ntiDjhtT71fD8X7T+lTvw2OZkOScEN5Iiv5w2FvpSvf0Hb/oqcTtGsYsWjXr/\r\n5HYviw34Qfp9xDZfxpma+nCw0+6Iy7NvxG79vNbBNe//SVs4KAr+WlSEuM19\r\nf4VUGkGfbWYwQnKznr4wzi6CnC2JrL5gmg5Qs9VmmufeV+Lvm9/F1lwtW+Jm\r\nkCZG18NfpPymsz2j/aeRgyvuZ/heHDXYxy8flPTYdhRxwoZACqT1cG8hBjFC\r\nW5d1WaCZ4foDdKnwo8vLgiTaGAjAPHMORZPAjQ5TNVGB9eP8pu2c1avd+zFS\r\nuaArBuYjrXBa3F/kxm1vf6vTaX3KJfvIjmAC3rfiFFb3iO0SkMzVLhCv9bqK\r\nPMUr9Schqs1DwjGVwKKXTQ5vVXZ3apYyaDCHzzWt0zWevlBAwFJR/ndhoe4R\r\ngAtpPkE0iF5JSm36XOYpaAWjy7ZJg1sY6+8=\r\n=CWFq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"55c87cd62acb01bf7a74d75af24cdf8a091dc1a6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-2022419101754"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022419101754_1652955513916_0.250843762629835","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419173934":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022419173934","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022419173934","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3975f2270ba6718f8f0a964184b419242b48f8a3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022419173934.tgz","fileCount":27,"integrity":"sha512-7hQZ2vaf0LreZRlNDcxvzf6N6lP4j2jAyXJio1vRYIFo+q+Ko5cfmuSnA5s1HAr45iDTyXziBeUZAIOAQErE1A==","signatures":[{"sig":"MEYCIQDnBlfJQG7XEGnnSVB1rtBsZDcOuvGIuv31ieLYO3dK3QIhAIu1wTF0PTasXsLOhs6MUmaCFL9QwLnEAWNnOkcYnBYc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihoEDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZNA//ZNwd6a99FOcYhFAB1y5+fuDnyatdvFPk5m54FD3yoEQxztRh\r\nxKOd3IBn4CNC8qsvUisa8TC2QFumzWfBd5RSzk0ipl+CcGXIgRX3SV2q9/dc\r\nOVTd6s04TCvP2VYJzR949wtb2KTqBIfAOAt0/6kzMmLVjZ9r9q62tFooM96x\r\noAsK5I25iqBSqX31zhCvUhgnmWrLPd+FM2EM6x23RO10hZ6DQj/It9coQTsK\r\n9hw/CWhsWULFTqdHUr67LZuYrtRGZxKkDMRxxfEO22sleRDP3g7UkjtODbbq\r\nUOcNj4a8XyhSbNVyd3M1BOQAWCZQ/jRk1dDV97JwtQvyxuGqjgbLN8NiIhRu\r\n3Maq/gy0LIZIbUkhlcV/NmnmNIT8QwVpIvUv2ajkhoRrgNGpvbTOLH5+FAwL\r\nDxFzJ9usOx1XLwHuQNjGgLimnsv66wBU/wfe5XgOmOQ9cyx0CQ0Kn/qLZHqQ\r\nhXy762X/RhARLNhHa2rhyLevQNFKx7J1ZUdyn8BMBAcuoZMRtO78j1YQ79LZ\r\nd0cpYz31bRGayulU4OPyzO1utt7NT0O9G5SeCVO7PwHj40oLVWN9DB2I8oJx\r\nmGr1MahlUuKDbUQASQrCoJGt9m5zhOspcaAPJX3tmXBMVY7vUj4OzLlMAKW8\r\n55ptqOxKkAgx1JVrRmfTEdlCVTuY+6YB5LI=\r\n=g4dd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1e1503f48905bcd4c0a1b5767679246c1a03db1a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-2022419173934"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022419173934_1652982018958_0.10015722282530048","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022419174740":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022419174740","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022419174740","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4e4c9c7fbc7261bdf85f173627fde639b6ffa3a0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022419174740.tgz","fileCount":27,"integrity":"sha512-541rKjNKFW5mMGUpQLZobnBTqDU0sIxcXHJ09OQz0w3g8hYGOR5P9izav6l9eMzSJCh2W5beyCibn24UNG82zg==","signatures":[{"sig":"MEYCIQDj804GlRTk+9jdy5vd4x8bL9gngyxlDkw3iI9y4EZdGwIhAKO0oFm/qcMo6tKAt+/sTfONAEWJdIe78xXlpwUcZ7Oq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihoLiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRnA//Q7TCnoQC8KS/QslnZJ8ddaZcDC94RepcEETfSLMywkG2QPGZ\r\ncmlEHs7ZytRuJbzkVExuhqmiZtdlZkLU8bPP2jBqzyMH0bRER8dnlNuZMvJ/\r\njCVfs9aAF9BGWQYNxC/TfGguZBELl7Mx4dLv+EBqFvCpQZjGcieuW6aSvNZX\r\nmR7jBjjF2S2YB47SMjm26S2lYuQYOj4UE+JtJVwMzUfwAKi8cmPmUBod5c3f\r\nsYwQgvfHFPdq0xzY90hqHUY23B77pIJrPRZOmzyYMSK1+4TmNuRAYDud6d9K\r\ndO74lMaNvjaIFBuad1Gs3fdLQjYhh+wQsX3sIbC8aQ1KxRLyb7FGSKu3OdQM\r\nTX1Ym0Z+pkjseiMZ2R9DqFsWWyooKqeKt4o7BHyVAN5HfcizWYBmDQiq0/zZ\r\n717PHko14VYysWBr/zdqAQijdm2tpc7I72Fi12FAR7yZYXFOgrBeT48plzhB\r\ngMQhgBDJqcguOPBtb8PbO2rOWdshFU1o5afk/tM6f0UgfyDGhGdaWO6u41ps\r\nXXfsEqG1rEMvXcD4pZGnqDcUV/evHTiSGTCs8pmzEZOCy0BPSc7iGDHbTs2L\r\n6P5MFlw7MT78GgUQgF962aVbBtbaaM3ROqGtKUZLq/S5fr8WwLd4R3AnJMne\r\n1kkWdeg5FqAgwoPF3cIx/ZWQQgobZg4240U=\r\n=0KSO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6f23780c03750a1b70d8c855c7058d2b9958b6c1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-2022419174740"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022419174740_1652982498483_0.7412125076016711","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224205231":{"name":"@chakra-ui/system","version":"0.0.0-dev-20224205231","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20224205231","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"85309f6d78351538c4f928768dc1baa0ac4a2ee7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20224205231.tgz","fileCount":27,"integrity":"sha512-TjYxkxgFYUBO0BC0Qh5HV8fN4rU4J/5CLkC/dezyjzb9rI0r5QpNFxacoRZC22qQH5U8mX1G4C9Y5MW0uALt3Q==","signatures":[{"sig":"MEYCIQCQ5lz4Dy5mb1ZEt4TPqKOdLedG/YSHom2psQtMVlCD7wIhAJl67j02NuLu3o8+32OBhqrwXQaW3td1if4ZEr6pljkr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihyXiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrprQ//Q/FeR8lAQDPJGtDpwlg0P5ZMa2a7Ef2cEo8k7CUPOmmlfD8g\r\nOCBhIUhlMzGsL6dsWKkeRYWiwuPOW2usrJnHOzNgFHpVIvVE0nLklLz6tVh9\r\nmPiHJCT6s1HQyqmutaVL7SKVZ2X3Yb+XRRaMUZ47Ps4xt/TxI7R3VZF8m/ke\r\nVCzPbK3i2YIkrAXcgq7toCeDb96AsgyQywiVrpsnlbFpQ8Oi43bUY1NeN+7/\r\nEPrSVMFL1hdHj06zaDb6zj6pKwIqTNQP4h4NHgkDIswjH+gm9MORWthkNJKw\r\na1jDj6q6JTVVW0wjg+ixuJKWmAa8iG30XrBK6KjpLxTtDqQDgistgRHcEiEk\r\nDYYoYDqZ0g7E0kETvbmtBtufQODIghEfzsmY1ZQHvZ8pK/mu3BarnKdDhYNG\r\ncOvwSUUW2FiQPjV/awVqQYkU3l2O7G4iYvnMp2rqziWcTCbFjVqysMvKoBPH\r\nFCeKOq7vBiToG1Qv7hUHC2s1mhFq8zHdPvAlvmzjwNNlO2XGJ/J0E/OgO6cA\r\n3SZelAg+8rD8/h4uL37cCKxyW5uTfgRSTkNmEUHGF6nHNtJg/bjwaPN0sbd6\r\nChp926f+cbVhb1P/USZmTa8Qty4RrfFNJ0F4bMZUFGYkblrXiAumDvEGSyri\r\ny21IIS5ojkSwozrX2A6n3REwvvgaP5wI5OU=\r\n=dn4a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"37054f067f41bfd387b92c87de6bff4e43638455","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-20224205231"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20224205231_1653024226134_0.7831847349110763","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022421153722":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022421153722","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022421153722","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ebec4463b07a42ab0926e84e85b026d6512e1c30","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022421153722.tgz","fileCount":27,"integrity":"sha512-2ZFGRpRwVnKIlWTEpF8TNcQpPeBSuCjT5p4HKegbVK0FxxOW81qfHxrVbI3WKJcgt+UCkVZaBCh9cBn6I3torA==","signatures":[{"sig":"MEYCIQCt+Js/Xna77+fxNvKuQ+P6jvsVIQ0AQ0dqwz/MmSD+hQIhAL05usyxZxRXHjOtT/nGjZQ+i0QCcsTVHJSRwLiXpEjJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiQdbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNSA//Q60pu5uCA4ENv1Oh8Ee4FX9JPiDUHp0pvuaaFSWN08HQrftB\r\nH01/SfpRfVCHbkZORXsxxL6bU5/D3znqQoyDeADnNP05ZoFl/2RH0oi97d7o\r\nOZLsbu9PdjyCFj5jGxbw5AjP3UmlU9VKwfyNzKmRIugVdGduxsNbp7ASH1jl\r\n+UBtqK/tmtFd/ktTTQcp4tUZ7WJFhh1cXTAF5T6Q3QGgZBS/MNaIuDzGa1Uz\r\nD9y6b30rJ2zSMJoOodICbc4D8gdcD0yzNL84RewpCZFR3BnXvdDYeKGpDqGt\r\nPNjrcjIhM6K5qrQI+ICjgOyfeaZhlJEdzgmYE0iq1qmDtbB4fjsQfvrVu4G0\r\njxSz+0To8lcYhOU1SBSSW+mnshMj3jib4cpruWiNA5zscw0J3UwlaUJpcQb5\r\njrdHsVk0ozalXt5fhnUfSTLp13c3HsXdGYs0iakelKCpaZoD7zqaz3c3MjlJ\r\niaq6Wrk51pmoSxBy8unAepVE6Y7RmdSjhq3zp8EIb5rhRSpJn538+DftJrK2\r\nUFQ26j27OjawkSCH2YLhQ62iNU104sHOitvFirMS3bqP/vdGB00IK1pzq+Mm\r\n4FPB4QDrhlqeGcIgTuejjHGaLj51Veyov8knGyRGgE3xlYZ6JzmmLqJqsxvj\r\n3Dt9Iz27g8LFFs8mOvx/GLABCOUW59OCd3o=\r\n=07XK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"47b0f3c1d446ec73146609bda3c2b19b367e9980","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-2022421153722"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022421153722_1653147483487_0.4121079946334527","host":"s3://npm-registry-packages"}},"0.0.0-dev-202242121518":{"name":"@chakra-ui/system","version":"0.0.0-dev-202242121518","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202242121518","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e13b0c19bdf43345b28bfb049e6078f0d3258da3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202242121518.tgz","fileCount":27,"integrity":"sha512-1Vv13yDr/gSkyqjaE5wwkbZVSDwx2xdXMcS0jqJhCvQgFto5CxYoQYtR6O0Svdg6oZhKupgmaUwx9GNIb0+nkg==","signatures":[{"sig":"MEUCID+DHVsCjO/UEhwx6ve8UmNVN8po9ShpQTi+hcZ/VQG/AiEA9J0Gzk66qNTI93grzBxYwS4qDnoCXWTrqXOldR4IA4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiVQ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi6w/9Go0THDm1cd183WO1t5UzMh4g1e6TNMUz0+KJU+b5q3kfojz8\r\npkpq2XdGIfuIV8elFUTANqrm0RN2kDTTtCiUrA3L00394YrNP8+q74w5rB1F\r\nn+a0q8IoXC//vx18XUujZiNlrKhPo2thaRj8TQRqtW/DRtkIIA6JI9DAa8iE\r\n5owZV0N0vvCAjwAHxA5Pw/xNb7AZ7yjQJeLfcwWLHhJr+6pS/dOPyw9TzBoU\r\nES1Ti04fJPJxEem3nweYbwkrmll4nF9nF7+swyUt5esZvgz820UVh9F43RXa\r\n9PIlnhxpJMyliGs6ogsVXaiZlvgy/nfY4avLoM+MzVuHqXaIZ0aW2g87ldzQ\r\nQuYcd2bvCylNtM+eaXwwUp8Zz60yYyazOv+beBasc/iESOz6I6TZ3FEWt4ej\r\nkQUIFhMq+c7Wg2UJ4pZiZYK/wDfpeEtOOrkAkDiNvtpyycGPZxHAfXtLZMTM\r\nqJDh07XOQeUqgjBCZxzHaKaM1UlM52SY+usTXQYzG+f819cjK9SqDz8vQowS\r\nz5C4gXEdo/KVlnfFUZuw+wU1WJBC/dC/p1A4U6bwtkEczj5s1Xrpb1W4ksw/\r\n3i7FyU4P6yAELNXjG18+WlWMaxfRLxqzYUKPgw64bMXI+fTI5wknQaoBZmGn\r\nbt7nWNvbhN+JjUiFBhzlMs2KhYhhfPDY6Rw=\r\n=MGfn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7150626f047f6cd0f559acf8fb679e29eaf7247a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-202242121518"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202242121518_1653167158861_0.26334686767175564","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@chakra-ui/system","version":"2.1.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.1.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a46f8ae94383965d99ec56c91ccfe768132b4813","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.1.0.tgz","fileCount":27,"integrity":"sha512-ZDghTlPGvx4+aZfGZFgoz1UxFkhX6MXYoJ8/9p9EuFS4QifmKgk4vQ+MkxCC9549+KAvMR+FNa1ur/o5lQtHiQ==","signatures":[{"sig":"MEYCIQDBIzuVxpycD4w/crMao3403fw0uot4gqzHu05cE8jh0gIhAOjRTnG9i4bLPLpkP0ozVLF5M7sPWqkgT78TKjcei+ed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiic0JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVRg/9FK+fdRAN3S1dQxM+grsdXIEEKy/qXadN89aHgnqh/KPbEN8b\r\nmC4X5Wq6p5/61FQNr5ntooWCRFAEHKCWELKrMirL2RkSjfIAUG3HLEQZS1Gp\r\nGfc8O3AT7FTArE7nw/sN7PzVj9Hh+x13K/HtuPjNlPbet+OTwqb4RYU3t88s\r\n06IW7V0GarMXARqCJ87Mqbgn2BbVyX2/C3FTn7xIU6NfUh1OJKUdLwq9V82L\r\nYvLMJgmgUyVq4RSLF91g0qK9Rk6Bm/a78RH9LWBbmqpDx+f3mSi2BCe0ALIM\r\ncxZdh2Lh84YQjHjt7CzbUCeb9lx4z83eSQVmEr9AL3ef9AmoH8WbtXYREi9B\r\nx3xA5xJPpN3pkH84FpNQHIEXMKdXtwS9x73tMIRZm1PPuX3U7DJAIJGDJ0N2\r\nDwBSVto5hcWmEMUa2llpcKaQJrBdOAeU/XdelpLXf4Q+JVer9Plu3OgCdSho\r\nBsq65kMuvVLe2Ui5axy2w1FWaACKyiXoX9ju5pdkAZ9bZx1g/Gbjjjdda92N\r\nl2z1bRMLVDHMHmmaB5JQVPC/pJfYzctWGet6Ydzv6sgYUx3xxBTAAV31+UVD\r\nFNjX4EfEHiWxwpyAU8iEL5YGIh+QBR597jDtAbcdJWeTJl3ApLB2NJHB7a72\r\nsVxrGS7Z0U6DMrZFtOimDUQSCQI8qurzkzA=\r\n=m8oN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"9980e6ad4bd6c1f0a44e21ec4f8b28e8264abc34","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.1.0_1653198089670_0.3549062034719208","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224239149":{"name":"@chakra-ui/system","version":"0.0.0-dev-20224239149","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20224239149","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"210194704dc503d6e8f2fecb4df136834733356f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20224239149.tgz","fileCount":27,"integrity":"sha512-vWixN1ZavkY/HmqRK5RG1N5fUeb+PqRQq9UitcXEg9Um75XZp+ps/xhVg1M510y5xHMroW8luxtDLu6Yj3HkOw==","signatures":[{"sig":"MEQCIFYPmUhknIKSChX5RMcD9pyRmPbQHc+MTwV5HvDAapS6AiAeA2xFyd0c/Tp4qy+IZb/Os/WVaNvT40582wPII+/QBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii02mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUiQ/7BSirD3Cv/wYzoiuQGgHu05zzWBtWmJT20eVCvY2f5kJiHj9V\r\ngw+l8gHryCDZ/r1Z9W0XbsoDRafxrDwHBMhkjQRwjnTW4D9dG7PbkR3zA7Yw\r\n1Ik1LzVIe2eIaPKwXL66dvb2wUV29gVo0MJz/cWGQPY0JFFId2g9zJvU8XbX\r\ncl/S2v1fm5rMcF70+MajV+M/LIGcnTrXq0hpnPhpeXb1N6+ETdf5OTf9x8dU\r\nVvLpjzyVI9ybAHsg+ZQFMhZvq1XBoTrDossalHQiRfqHSi0rHXI/rf1n3pIn\r\n3/ODSZvmCAUzJCR61GSXKWqlH4FqJDMWFz/XsDbNqliw15JX0gfTfvz1/KfZ\r\nbjsJFKx33QG30IkzkCdBGrSBuQ9SSaHVbjJ9ko54wQ4uDpP55R5nWAkc5vHY\r\nnC5WOgZlp8VB+MOqLNFY73MFcfYzPtLp8djQJLKpfYF2wPL91kpYmDT4pmDy\r\nVnZh5nc879Wpdb0m5dtoSflDMym4gQGKo0YuZR3cXZaVY2Q5/Uxv3PaI1efB\r\n2VLN78zUjpeX4pIwL3yPUjy+v/lxqi/zmRYLpbAS2HEwMh8T64SA+AaFm1d/\r\n1896m2wJZYx/7HgE+VcR/qjmkpJ6AakplGJ0ZBIlfxIxhqWkoLc2Q3NGy/aR\r\nFqkPekOyulFnSE9KZM7VCBMrxNatw6zt2mY=\r\n=j4NK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"618037ec72af18957a3ca3de300049b784ae7304","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20224239149_1653296550330_0.01325111148620306","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423113827":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022423113827","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022423113827","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"39f1dab8d9414ff7fca6979d672957745bfdfa71","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022423113827.tgz","fileCount":27,"integrity":"sha512-/iHgXdD1SuCmMLqFEEdmue5yT6EuztJg6aF22mDPiSQX1rvOfFD0xWSFGcqmCo6iy6bTVZyHmMd6ZUuur0kZdA==","signatures":[{"sig":"MEYCIQDBS7dG2eCEKCUu+BewjKO32O1Ds0qyv/qOASYli6SkHgIhAJyP/P+hryl48WOQUp554M5YkYUdwYOXX8OtLN+3BsYY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3JSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo78w/+PA2ct8Kg4Gl8nHbfua57H76jxbcqKypZDk1eteAzdT++U4x4\r\no6muShPB89Yv35I2M5Ubhv/n29knU8EVKnQUG27+P1sBlKX6KNbB3XkRyc7B\r\nYfFj7ShON5Frl1dKw3HLSz1DGyyznoY8URClPhwHKLAIrCeILq9HNN6yIWRV\r\nhi5v+4e7JB4AB/Hu2zC+GMaH7/eWj3dwjRnepWn/yV/ehlUIrtTh1aINew0d\r\nxvB+Lg15BPWPlnnoDEll8rPKoSFCjQmuSMl7g9Z78zZDGaL2TjjD7NswTDw1\r\nQnArGm6FCnXFwqrp1qrjc5GRbdxhsKIBp/bXPvE6SqsKXcQ8fwOxNxeXHnqQ\r\n7n9FYXKz1gSNO9qVtQgValqX2LEqF2477o0LBeioI0CaiAkp5xgtYZpno28v\r\nJBmVaHwYeq+ui4ur68tFlnirlkpXlYMlkfcUqR0bch4Cm4CXSTOH0iWT+GPq\r\nnmCfpVsS5/TUxCnFPJiHHqAxM44kcdsSgNyZp/uF6KHfoT6TBsoofH5Nm83f\r\ncIK4oeXHYHgEdRsgkDF5PmM8ygQtRuVACzVCxYOpjlWyPtF2kRpZTstqS/y5\r\ntZfjyF8nS8ckcEtyjRbBGt1yLoApNHIAbFvKwrCWH25joKHX65/nvOVka/3F\r\n4+RAp0mStm0DokMDMT/X2Vrf9xjmG3sq8R4=\r\n=huzZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1026770a2b96b51a1a35f56c97fcbc42abbfb4d4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.0","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.2","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022423113827_1653305938430_0.5130329314021738","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423121532":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022423121532","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022423121532","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"88e06da35d7ceec8aa8d7502c3dd89c8f99c82e1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022423121532.tgz","fileCount":27,"integrity":"sha512-dtVdJ8LPTMqBqXK37f5yviomgVu3FgkOnLUAkSqzx9TTlUc2a7WREbtQCoEYSU0tJV+YXyRBDSCuq2pjP4qTQQ==","signatures":[{"sig":"MEQCIFKCURX5PNIMciyu/5j/m2XZO0LHTfGdh7mdwfOLwUjdAiBPjk8jN0l5DST5AyOM39YsMd3kS9gyOupL2kWuGn5p3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3sOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpq7g//WVD1Sa5pyb9S8JD4kodX026zWAdHsxMUtY+je5tEhev3mCLy\r\nEbtCiKUbfvE7SW6IzjWJB6cX5T7A0pQacrk/af5359Bm/zqMf/u2pvqGMSrq\r\np4TN1GW2w0Ic136peUxUbwJfhmp01J2L5SFbwwgtnxoYGtX7vQtiT8BahHsb\r\nGJqDgoCNVwbCso5+7RADtxroTbGWkKAytv5i/hpToYHaB42S+k2beBmb/D9l\r\nTvuLqweol5IGPibbZG5oAHj3dpgFrGND5czsOEWuMbIEOUmm//HfiKyrTBlv\r\n7p0uUxn8iBD5O85iOsGopq6W8pnGAcrvy/2uwVy9mZZsO32SeShRk7IpH99T\r\nk2mRbUikveU2AFVXPB89kgkVFMv/iIHktsWC8m87BSX8BFU4uJ7EsIy/04Fy\r\nAsmfuxMemit7jlwKUxVZRgM6ji/RM3NS2V5uZ4U5Phswwm3fjSBLurFJsJb5\r\nalqbWJk7Op0MAwzx297cwbSTYenwm2aWWU8tkqsEg+0Y4ZfobRBWk9FV16DT\r\nOk2qyBq2UYR41BXTl6ZuYj/QgbJphQSL2tKfMy6w7k81Sf1B6Oh+4mXPak3d\r\nvsiRzkiq2VrwTlpN1dTIjTyLnTpDSij9ciOljScsDwoMMXiHL8eFy0BDzy+t\r\n/T63TJ6vUkuXwak/3M8hWPifpr3em9AT7vw=\r\n=RTyO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"35b4565b04f75dc5d3874846b65260be849d08ae","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022423121532","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022423121532","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-2022423121532"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022423121532_1653308174242_0.21901122640584925","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022423121615":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022423121615","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022423121615","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8f09aead33219294759474fb486bd60a96fc329f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022423121615.tgz","fileCount":27,"integrity":"sha512-lFl9t5i3ZScq8cqMVfK6dqWA2Qiey5z2HNqp3hvvEbujNvyGW+kL0jOFxJ8lmwMmmtxg6IXT49ivxCZaAa0Cfw==","signatures":[{"sig":"MEQCIFR/TOxtEbZJT2Bs0yOTfo5P1hMekXf4Ph7Oj2BY5nDoAiAlaHZ8loVUyFXaOYeFN2PWpd+SJmZbzIcSBqCP4/be2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3s3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqouRAAm/2tOrnqaiKSlGVAbzRUNbhTuZlCactOelTd8wRsGbmwA07s\r\nfaspT1w9G8PvCIq3b1MYrLMFhZW+xNiHEe8nJFeT6n7weWq1iReT4GkcnE3l\r\nIQ4+zzfe/mIi9Fg+KJ9qXDVTHENA6UNP6DqyYobzq5lXyXkX+c+9AMDt79Dw\r\njBxdiCNt2Ga1ytpnkp2pLNSCfZ8Bh+nhKr0csbOEOu5HqrpGlBRx7y9FlYXZ\r\nZqQPiOPe/tt1OT6cCdej57f07JU4UkZ/vU1hQ5+/0fMrQi1cRLYkFUnBroKr\r\n+vKhTrKGzCb1V4YZKsO2aJ7qXi153bu4wjl1GazzhQlNnUh7/lIhyW2j/823\r\n7Mpwkenx3F28vHhyjuY5gU2Giq9U3f9YAxLrBglIuJ07GDM4TEvy37PbRe9f\r\ndbcAAYtI62Nvfahqon3gHOf8VSa0acq2GCjz5aNbnq0zUtfqpuCJxHS3rmNZ\r\n2OSA3wxE9NKQEnoxxVW4ti0ID1p29kOXpwIrewQEeqenYyKUGhSoB1nJN7TJ\r\nqHSiJu86dhyDnOZqMbRI1Z18g0EVqgXUOz/ZGn5wqIPjQ4Ks+hUw9gpZTtmI\r\nbkWJOBCUT7E7o+gx+XGOxG3OqygdcR6yz0wP2wD1uhuKlELFYy8/vVy3Clt7\r\n0tFSPlwcVwQ2Dthki5yV5pehY2oqO0CpHIc=\r\n=QqSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"38452854419b6a8f651d073c02c89fd9e4520158","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022423121615","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022423121615","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-2022423121615"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022423121615_1653308215746_0.9458976133094139","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224248246":{"name":"@chakra-ui/system","version":"0.0.0-dev-20224248246","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20224248246","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ce5308a0ff1f16d3a4ae87bb6317f7e933897351","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20224248246.tgz","fileCount":27,"integrity":"sha512-8lUxx7azpLcFlyHSZ40Ul8dUY7Sh9Z7FWrZPbppJZ8yu6Z1ySHXrvmqmaBUQMgfN+czxgi3yOvRIlt777BJAwg==","signatures":[{"sig":"MEUCIGI/RvSEvpj9Ro0c4V6FethbzG9KvRlmaQDcjw9aHF0hAiEAk8l6+ikINRtRvx9Ah/+3pkaZbm6M51ojjKkJPJek7sw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJFOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX1A/+KIoT4+fFbRYj0LBUiPJEAUCgMb6GmS0hJu34iZRGks7FsVc9\r\nn5T1uh9779jqkFZV/7sZEmffeh0/Fh1C5DLaMwM/519FoGSR2spMY0THaMMF\r\nH88/37wSjB/A9G3Nfa2g4XJMtvjuO/xvStSJ165ULJamyPi4xy+PbSvfUJ4y\r\nJrjXpAaPgJ89+k6sw3p0gA6jfT9LRb15D1/4KUyNAsBSdD+OKzjsN8duKF4s\r\ngTC1WfZYtcSsZsfj0KgPIiqSDjB8dhc10vNd2+APcuPJUZwRNm5shFADpF0h\r\nE0UIa2/ydUrvtThlCUfrPVg1jRODhsgVTGAHXsCvSGteqfEGEbKsfM4zsNDS\r\nGIxBAYhP7sAMIYZw7XuEy4BGGNbHCGUc+8Psgt5zEIncM1sYoPo4Jf/DwOPG\r\nXfpYYSqiFVgTWQWikdUEXBTbFv7dy+Of8TTZSY1F9QhNZ7FGaYdM6xJ7kcFJ\r\ny4h5b0AwhJCqDUYN1xflLP7i/H/J/EZMcyTH9qgpPvQxspNUr5bduiTcB/ZO\r\nSbQg70qg2P+gEyib/kuZJ0VrcLOoR49JVZCDm9okonbWQDIdMKNzOkkLU3Sr\r\nPer5rnXDHXTuN8ZQRwk/ghgIrOOMomoP/dBcPYA21/2hD7oUS0SQqaVkJ6OA\r\nyXCRKZdDh1tKbdv+rF4JhyPz41+IZcuMUeY=\r\n=uQzP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6f1921d44b496e518b2691cbd62cc45a6135d1f6","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20224248246","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20224248246","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-20224248246"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20224248246_1653379406073_0.38069750567830685","host":"s3://npm-registry-packages"}},"0.0.0-dev-20224248516":{"name":"@chakra-ui/system","version":"0.0.0-dev-20224248516","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20224248516","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4f4326c8c5b9eb0eaa3a9aaa06f2d58f7af3e7cc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20224248516.tgz","fileCount":27,"integrity":"sha512-ThRScsKMqoCKjb4kTBWVSM19J/dLCA9R3/rJZUKa/oyeCQLNR9fwuKa6vWpk8Pr4/VuMeaOIYQED0aUupxzBKg==","signatures":[{"sig":"MEQCIB6jkojY18G+pJOOlSKib8JYa20GN250nWmK1+Wc9TSZAiAnpj4NkZcsQVIBXItCseEFFFSi1mngFQgtu5buKYTvAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJHiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxMA/+IYQFlwbTu5F0OLwX1YK8TiGD6uHoLv0EWSpCoSeynKdvzWXX\r\nAKWTZmIq0ay7Wtwx2NlnPJ49I8jZzyDiYSPUWQfgPCagTtaMdzLlE1zyE5UV\r\n/akZONicp5wsaO7ehPDOyFx3Ene7VE13k9tMdhPffTmhRHeCr5e8t1rMFv3N\r\nYSI2+THctRdpvfQ8KspKDcSPmV+EvHwXgOPI4xXHAhUkbMt31v9x89WHEM0X\r\nlsMtWHyakPpVAQhYP14F891lBUhtIh//uw6YczFCT0wd+wZpI3/bqE5Ix9Ao\r\nU6Z7BlqXN6Wj4zlEJBIWizRAs3LGVX/Qsr6s5EXMYNkdNhZlLn2y6I//1rlq\r\n0xEo95yTSjJ8qI07v6eqmQ47RVxZM3gksQBGbEm/dKz0dzkHGwVyPPmrQxr1\r\nklTD2NpzhZf8Ivdl/wJQGocILj/5l8rnmHXJLs5lrtsTeZ4EugYEozhl/0HL\r\nz1axJsp8URE/BG1gW778AtM41lymWkqkGUimEMp2aROiM14WI4dsYC3k9XCV\r\nPKPeZtW8UwP1rk9mrshxWu88YnxpR8R4txbAUAzkUIPM1QU675pKB3WYJ+LF\r\nuDoJ6xUyEFjlJdttHuduYxvptNFPqRy0Lr8w81+pWvxbmVbwhexfMGpJ1gGm\r\n97ZMrAdVZtKMyezD+JprM3Dy3Ub0HAz18f0=\r\n=pnfr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f5839d1015edc4f3525bc74ab2cf5d9044139fde","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20224248516","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20224248516","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-20224248516"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20224248516_1653379554783_0.5225168548432892","host":"s3://npm-registry-packages"}},"0.0.0-dev-202242481651":{"name":"@chakra-ui/system","version":"0.0.0-dev-202242481651","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202242481651","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5fd32649eb6e30234d7f03cde97fa271f4d8d99f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202242481651.tgz","fileCount":27,"integrity":"sha512-esx62cN6Eey+GaB0yJv/Pn0356F849PCPdIleC3qIh8HPUGTshrHABgjokgTQJVviA5/mp7M0LHHSZRUMtWU6A==","signatures":[{"sig":"MEQCIHEfsj6FseOU37+kE6baQC6oNQ+a/rlNKBLoE3Txx080AiB2espnZ91p4V2pWfaXnh55jHM1nfeQPY+2imb7vsPi6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJShACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKMxAAlhjIT1cUjaJIuSTWGatGrP4iUTsLSkwaaF8XYe4crXYBVqJh\r\nL00uAfIjSZ2kpAqsE1qqbCpQOkpLKh4LHC2mNgaWV0oiCg+easiAZd0cOOv4\r\n6vPJ/GR/GPwI+TOh1+9gvnSWvNuHbARfL7QRy4sB8xJgmHl52r2q84+cYGqR\r\nU+s+k5N8zcuDSp+7wUVn90PGBnlZ2wyuEMvdc4IiM4nusgla3IRX+hzP+UAu\r\n4EK+xnbF82726yOYmuIRJYbAH8C/TbnCCbA3yMeNS3zZC9ctfxPJvpdbxRCx\r\nd9QKlVePu08E9mxmwLEyRrH5IxxHEoCZSBhd/d9f55NW0n8pS0h081/J8H/3\r\no8hX6aKRMM6pUYAyJVflveOMB/WH79wppvehkyud/GdLRnUhRx5UMoZqHh9r\r\nAUf1SFiQ7wwKO/CR/0Z8WfT8WVTLDzX0xKHmhOHQ5Lera4wIrL08feOpZ65K\r\nLItwaPBOBM282BkxBkxp/qGJXJNqiXBvMnyBRLre0EbpPM0sA5Zcthdr0ChF\r\nZ9NoH1AzXn7nN1fBvAOjIquu+y1tTmh6HKfcBSyJ7fFSIiQzbuCyr86ozk28\r\n6UfO8Z7imD0z5+/cKQMlY9FFmsaW2cwNIoGumx99pL5N9NYm7o2FpTdkyFB4\r\n5YIv0Lo/BD68Xj9f0pY7sCoDIkHuhMQpvYE=\r\n=ywdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e8cce77b27714277db576b45d03d2570d590ab8e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202242481651","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202242481651","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-202242481651"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202242481651_1653380257479_0.683362121779415","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@chakra-ui/system","version":"2.1.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.1.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"adab4ce5904b86fbbf5c922b4207730093eed196","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.1.1.tgz","fileCount":27,"integrity":"sha512-hiIz/OsWtKgtp8dSfrjWxvGBFEpBbOuTB0uvq2zpEnRSU7cjFYOnGRVdTf+gE6KiuUPw6/rHgoczbQx4ZOGmDw==","signatures":[{"sig":"MEUCIQC8ciFOFAk8Rc6rYepW2G7wJ2+YXVbvCVNZ3iXchyJ4ZgIgN2beXK5K5orDr28dkBukDjUARLlDokI2uLazYRivXek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijM9mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO/hAAnXrgTRAQcyxODclcp6gsw1ygCHr9QMhg713+26eTSK4SnbpV\r\nIefP+6RXvQHk8qxABescvySXyyxc1StuVbzg9oc98yoC/LoOq7BDi6DvlDgI\r\nbjVFolajco26S8XH00WD64Ij/kwzJour9Wy7JLDVbPBnJPnk4WfRIKhi2xJn\r\n1/+ECTbIF4S4pKYXrYuWrThxbt+4/1XDSjiyXieGaR+/5K0tUJRZ/q4QHEmt\r\nZ/MU/cKUmXy8TAkwXTnXK1raoiNX73nFzzUZMIYgiX+AC+Uw+q/E5fLTOg1X\r\nvhxSHeCG95M+HvUlFEneQPdbyLpyTU/nZ61KQ8eoaB4gWDPujkGOe+X0KlIF\r\n9hB12WtT+tAhvuQPVx6jTagfc38PzbDIlr9VIK3i1UXDBhdLvHu8O5ywgZ6x\r\nuGTI6GNNNrSeZ1sR1wqowIFDQgxyndeSTDcbBsH+qQWRkJV7NoxEWVdt0Saz\r\n9AXS+zzwt8kuwhQo0ohTIXrCzgxcj2bVzMLHnXEANq6IAfN5yHUFPGaNUWls\r\nka0KeHBlsQfbpMh6RNzAVNnpj684gbQEINJiJgwg4EpfRFff5hHVsuVzR52O\r\nJuu8W+yjFzXeDjKmWSL2f/WbKnha3Ikg9xt4Zfj/p2BEtgGPxJTZhDrj6kew\r\noH5ZyETc5J3/anokDU1o4pbWNdVU6fA7nrI=\r\n=LmyY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"6375f5227d4482ad6d23852454a3792ba1cfc262","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.3","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.1.1_1653395302032_0.5374250778965999","host":"s3://npm-registry-packages"}},"0.0.0-dev-202255105723":{"name":"@chakra-ui/system","version":"0.0.0-dev-202255105723","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202255105723","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4929e20e4750b9a1f6f81f6cf6885374162f0459","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202255105723.tgz","fileCount":27,"integrity":"sha512-y4d4s8fXOA9OiIhcOuAcIormEkmlgAG2lsaiP8fIMyR3Uj3RUJsEsVu4px2bAu3gMFfAnf5HFv2lBlwY3S1Edw==","signatures":[{"sig":"MEUCIQCUVIQAnu6dFfM9KGztaUAJcvbDSZYkexx/PwqMxM2VqAIgN07ncOsQYoKT7VCjWWwFJLpX8EzA0PgCUXc5xou8h8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinIxCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYQA/9GwY2Ds7tzmu01Ux/qjNERruh2Viv2i+q6jG9wDiAS4qGGSr6\r\nkqVKuNZMSUXTyHPdifuj0T5kS9vhYHBZ11UgucOHLywTtC60m0LSyv+7emUB\r\n8E0ze6XsZCky1Bpz6T3TUFj60aoBU4KhySWDLSmX8lICkIq7LPwNbrbWLh8z\r\nDoPiDIJYeq2pOrtdFih2w5GYGBfxKGWC96m9PDwxH/Nxb7uhArxqcek1GRw4\r\nv/FhPZjKEnsThzO2m1KsGYI3rVjB+OUWUzMJhsDs9xwX3bO0mqKye9MuzG7H\r\naI0nc5N0usRE1RjULFsYx539DynspHr31FYVx2E1iwWlyfm/yl+9l21dyoi7\r\nEl8BmkgJTJKifd2k8Ib1vnZvrUDZyLbS3kBxRxyMOYiA2j9eL6hjucPNXBQI\r\nfp1uHRO8/d5SnV/062KMuKIrYiexTN+o0vUxRNLIxELNBBk0LSEUlKtkxdj9\r\nYtTOnMC+UOlwQKq0rtvk8N/7i0YCzEsnxTPyrwzUHp8lFUfCCBYPWg/D+ptU\r\np0bf8oKPOx8+jHvLT+Uue/u5D6Y6ruTZ69lNWeCx9WQeyseqvHV7SDAweig3\r\nUymkkkiwID2opDW2CSp1WZYSbkjhb9qJidvwnysGkCs4tTS3nzZEv1NA7unl\r\nzcgaH3Lj7H7kVWiugwbMEm5MZvmrQRYeVWI=\r\n=D8qT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7746c3c6c82803e7063bb3ba62d4d1f35183102e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.3","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202255105723_1654426689989_0.3647746101610685","host":"s3://npm-registry-packages"}},"0.0.0-dev-20225517307":{"name":"@chakra-ui/system","version":"0.0.0-dev-20225517307","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20225517307","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c93c02997c1fb9c8e04dae5b83e457c378435857","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20225517307.tgz","fileCount":27,"integrity":"sha512-myql4GY3SpWx2U50+sfuNnHRPKhmpLEUPCJuN6vukRJqegbmMzLDTtUu7CJcc7GYoiimHBTJSrLmNiEvw4H0uQ==","signatures":[{"sig":"MEUCIE3xCmrIr4ScFKAbgjvNICSsLdCl5hv6MEfW8xTRqYFYAiEAxLM8IgVAAtKhnlAwMzoYbtddKaNXqb7BzpgA6S97quQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinOhPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhPw//QIc/VfuqJJTRMbemCKLerIJpiyZjHHd5xQQkoOch3ebC3eAH\r\nCHXpWl/y1QB/WJy0i1LnOU3wRYL0yzamP1I0jJxhGN1Dnsf8TvKW/gYjBDd4\r\nC0dpocc4tfriHCu5l7GjMAlZ0y3odUh+eIYG0BN48Yi//sMugjktt3EBumC4\r\ngnPRFweKtT9esMVVLsgZ3dF0tHUgaQ964Tmijfu3R7yKk3TzxUMiFK/PLMAC\r\nZZUgUuM+6/QgchVqVBdIgxezYqsr0DVja0aqer8VjrUXiiOy4J7rXbljykMu\r\n/O3bgJYXUeB02WoCEmlpm9EmKbVong0u90+FaqS4KMEGgtXxL3rwzdXKtqPq\r\nlkbee6X8gHA1uB9Nbj1B9nhKiMGRD3uaTWRRXZS41B5qajNSJ5dkG48/oF6U\r\nZ5d1usVM9R/tlScw7MTc6iJ6SHrSZLdVhRnmvXtsu5j1O4ozYuvaalyrT9fZ\r\nk5RHRCeZP+vS+eA9LmQXf5heAX/pH30kx5T8vBTDD/CI/5vxtntQXxZCURsl\r\nKFJ0P4W1phZbfGsRBVr/67Kn9DAZKzm/ZC+9lPMBZLIQLdMOEJ1mHCpmO5GI\r\ndYLGKNuem+pvrF5HE/4hfHUbXG9As5Q7cO4de4077/xMrRfnWuWXQ+RPiT/n\r\nzb5/HqkGXi1sVg46+F88vg49bJUEo6cQpU0=\r\n=QPMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e0cc67ed2979e821aaf90abd8769b4ab0db4dd6f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.3","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20225517307_1654450255018_0.6732300989296867","host":"s3://npm-registry-packages"}},"0.0.0-dev-202255185818":{"name":"@chakra-ui/system","version":"0.0.0-dev-202255185818","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202255185818","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"adcac4de8cdd51405b6df45a41c26b6bb60eb668","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202255185818.tgz","fileCount":27,"integrity":"sha512-Nme0QK/s6CruXTFGRQqX0lR0RRqJEr35oL1AgY7lZHzKO2GyPXcfxVLkR1g6dyKPGCkgNMBv5oUWJS6hm7BCQw==","signatures":[{"sig":"MEYCIQDwTuwALTOSMbVoX+3YOOw2tv04rmditKRz6e/zQYc1ogIhAIiE3fPMyT6rDxvgIeHdKJPghamJ+l4rQesHjEdLvklR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinPzwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Cg//ehRnVl5ejqm01btNJcfKU2ITLZ7GBBTgBfWlhst5H8U/FQN+\r\nsAA+njFTtVT+2xIl6Td+UgpjeUPpsEQ+PacgKjvsjtXh8WHryCbreCHiw5nA\r\nzgVfrWW1S8te0K70GD5Qej9DxIEaUci3AbsNqt+WKVdwJFj32F2hZ3FQPUcz\r\n3eM063i3/1a1vMBIoYZj6g1sBuvnUODT3hUyFwU8SxMpLfqx57Kw5Om0P/Se\r\n3/0AbcF7Oarlr2f4c+QmCkaVH5bohGYXWjbuNcCAybwjAcW89v66v/bT5wgm\r\noECkWqE669VOGzf3qvpfEZz72GoI98agWDe2CyOSNbkAEy2KPZdjthUQ07RA\r\nAdbmeG5XN/JcBu9xr15xLuIQlTtdvAnZHqOajz1BURxJVMqC04jLaRDjfWSV\r\n+W/QEmhPHnqTWKjenFHqpsbyv4bQ0oKVNQPyqWE/W9c51zrrnwKDCv0+yYpp\r\nXhKJsCQWUjeyyef+ox/gvFuDMdS+BqNuYXJw4DT93mGuKq4RMCnWLNaJ6cgU\r\n/Y4M+GJdcSefEGOXErTtpWNdaW/KcRVfcpglE+pJPw1rUrfcMsVeMBCNbyRr\r\nAygKMGcQsGepLqtVRIulBZZBdIqnzwvv0YjXCXnjSs+5wmzwo6g+kYbF6nRL\r\n00RYuK1VilE+lRsSYoZAEGTY7RdG+urCWAo=\r\n=NJVC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"3b20df926f332510f30c652bfb500c1ef477fb2d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.3","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202255185818_1654455536324_0.44901145211316074","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022551939":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022551939","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022551939","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c4d916a2dc54568fc910f695a561b4d7cbc6d597","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022551939.tgz","fileCount":27,"integrity":"sha512-SHdo64oQryBjNS8k3qrQP2HJzuLXQtWx8zRTjynyQbKw2/f3cP14l7NVTsS5XHFotswy7wpPl+m3amvyEO4YSQ==","signatures":[{"sig":"MEUCIQC8St+bzfxjR5NTEHwzYwYipT2w7npGa3506fqFqafAtwIgChgm4tT8Aaj2BxJZkO2c0lx+MCAPqcxX3cbHEVb3PYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinP4QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCYQ/9EZBwPY+Ep+Nw8ILfTKQlHBfd6jamMHbrAPZDc7n7nAoy2sDk\r\n3NO4s9mHc1NRvTRDVF5eLuWolUOj+ENi4qF1OvQS9Y+2d+wdHuygaIQGwrTV\r\nbh2HavUrLYsToUz0AFSvqiN2oiy931fTW3AbgGvKj1/8LxjoDC4/DC/pGNxT\r\nILpWUzDPQJJ0tKIZD34cHFQgR4u03pUkkzWah9yaHmSACYobKehcG6Noz8/o\r\nlOyE5TMoarkvxIIrXXOjUwhURXpVWmhwhwXBUC4qHhWRIcXKorgYSj5wOWzu\r\neOEYZUtHj/EfAwPRL4WthPg6Vp6Nk0PE8vbOOW/N1+21W5qN8cTu6hpYaeXV\r\nZIKr5Jk3HDYfZ/sJbj2aKfMY2ZpIPJuXQvdR/TD18WLkX48tTlW5g9H7ULnd\r\nzpi5uiBTb9snJ8AfGOqMNhHOtfr4IUDseeXlilDjLeSqrA5rGWL95YwFz9HB\r\nk6OjKx7ri1w9uFESWbtJVarKKQgx/SdlS4JtRYmke7DW8+a5UkX3c4eV6QZR\r\n37nhh4tpFKa5RdnUzvU1ZH+kh/rzzENnjryRgES+3fCd6MoxNX9HHH5IYCG5\r\nPwrGpId/VIxBs4PBt2Oza9wy7WWBuSSsU1ikFz0ABB5ppE8H7Z7fkeqpAiKw\r\nxV7nnPfT7pbIWmPRPd2HKomAv0dKYGPA8vA=\r\n=magQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"96117054388ec4078b0c58ff3a0f6f9c3c8cd5c9","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.3","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022551939_1654455823993_0.0780175533640941","host":"s3://npm-registry-packages"}},"0.0.0-dev-202256151938":{"name":"@chakra-ui/system","version":"0.0.0-dev-202256151938","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202256151938","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"376c4d7a04cb6c06fe0fa8c3e8522400201100ae","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202256151938.tgz","fileCount":27,"integrity":"sha512-l133XI0qbWQsLuLJHw7qwlj2YmX7+GJRgxyTDhUVIjejNFjt018bkwNOd0QF/m5wNoGw9QvnS3IdnCKvt9kW9Q==","signatures":[{"sig":"MEUCIEVJpXvwALuHSg686q7LB2MC8n1CEXH8WWesSI1PBGb8AiEAsKcQnbjpeUNXjbo1HpLHuNmbhRxRMTHEwf+XWkZhHbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinhsyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1RxAAkPyhW5Fl0ZzRihHeb2R2qCxE8xLpF2scHncY9nmBGbNvBpbl\r\ncvAWcL/C/TBAD4i/+02doKAT5bXrXbpzwx8ZhPVYBR/Ts9XF5tZBRGpgKB2v\r\nnLqLc2oQvo93FqbaKy5ahJlM/7TpVrI6SYFS8gBVwlUQFguoCRkCxE0XzgrN\r\ntGxz0PUJefWsX/1HT6f2yi6KiUn4DTL4/Fc0luVGQt0EWq8UCUX/99FE9Zrl\r\nXqJQf7tBuUkkp0o0V4jOpwC0tr3+RTxNgmtetWHnMkB6YuistHDJW0Zb6gVh\r\nO7HKSihSaEPV15WvStwKKlZelD9YFO/EQAuMm8+Lh6v7VJX0Fxz3RVgHTLdQ\r\nsGYaIkSO1M4ixqcZBV+a4zr4EWT77eFCrxtpgWBRM0yIFd6+Z3Vxd3oAqS/w\r\nTc7joejNdE1CazklTw76ucIW7J/nui4D3Y18IVhfZ+fLOR30UFMjJJDJ1HCI\r\nMs/CbQ+xzONxZJDGItVVgE2KvSRuZdWmzS/RVhZ1BUZFQ5i77kRa7qzOv+TC\r\nKl9nWQMF7OC3ZnJa2JbGG+s3IZ2g3Me9uBLhiRDsOeI+eUcgZ8I5BBnGN2jv\r\ndeJPUM/z5FkXFHNR2NU870ab2KJxXknmg/93niPbtX+WTBEjCKghEdm24hfb\r\nZN10U7IVPZJaZO7zlkf5Sr3t/2jxg1VUJJE=\r\n=ID54\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"97a993c2926bc98c0441f899ee608f268a64992e","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.3","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-202256151938"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202256151938_1654528818135_0.827552074112514","host":"s3://npm-registry-packages"}},"0.0.0-dev-202256153840":{"name":"@chakra-ui/system","version":"0.0.0-dev-202256153840","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202256153840","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"faf0ad2b707036a342c715d4c8eea5c60f999ad7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202256153840.tgz","fileCount":27,"integrity":"sha512-jhJVEwFrhIZyLA+bdTkkf9/SDTkNEdQz4pMiTfjD25iNLo0V2mX9DfVVHod4XlTATF1xTDaTb315AR26QhgQmg==","signatures":[{"sig":"MEUCIQDvoZGgeptm/Uk4We+9frRpoGY5hU3OvkrA7JcixB2aggIgXqzwua9AcGfYp++9TZK+2y47kIGgOuwBx98r1XVjdAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinh+9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Tw/5ATgU8RBpOkBkDy9nfiwOvYWitK05vf/jKA92YcG3KsMcsEvp\r\nw6dSRTcoa1UMotVdkP+JGSwc73drH4j8pRdQkgvEvVI3sNs8fPHhjhDKjYVN\r\nyqUoHHj6YsEJOX0iPqLexZcUpT65kA5UL8F9M1LUC+d6miYinVs8D7zvcZVZ\r\nfMVPyiHQWb0OSQGv1xJFC6sb+Et+nfZjRzt3tdLeElT3CW9tCVy8G3257so+\r\nlFwFXHMpXBGvLTA9RZ+2vrfJZz3JCxRXDZPU1yjWnkvcVY3jY9ZSB2LkVh2m\r\nc70Txr9PoHfQMo9hJYZx46lgJq7HVTS3lKg8zVgebNxyDfC0Fx8jIJWZDxEO\r\nKFNxx1k9Hs8NysC2EYzjte6LQZNey1xJp/dDP9TBSzj5oYk8YG/vOX+d+hhq\r\n7hBjaHrnAjBBbeLhfiBmrAcBk5rCOE8/oqQDgKfB8mWuqMT4eDK5n4VQG7of\r\nq/9rWMpbSf+LvOYqpmqBHUerpyVbzq+rJN1BHUcrYWJhV5TkZLeQ9zdfAaeL\r\naC1XYAvKcUHtEzDj6+HKqsEVfw+NC5fRYF2SYk5qx/UPqJg9l7+FbhZqDVK6\r\na1Po+ddZUD7Ebhnk76248qkC1tgk7q91kA6IpPeEDbPhI8NMs7hNucHGYb9p\r\n8AfcIBiNkDEytj0qYQGbH/h+4a9exf+KThI=\r\n=gQKt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"052333186c6666825937a47baa51cf3e5dd6ecd3","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.3","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-202256153840"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202256153840_1654529981309_0.5382934434334015","host":"s3://npm-registry-packages"}},"0.0.0-dev-20225619634":{"name":"@chakra-ui/system","version":"0.0.0-dev-20225619634","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20225619634","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b7146206bf0545664c7214331c35f3bc002f05ce","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20225619634.tgz","fileCount":27,"integrity":"sha512-uiISYrv27WpymjX0vwlmHUDNZGpWASEszsskr78PyIS2EQlEItf+nv2IUYb7sPr0zyPxM4IxiHTlOT3ix9SyIQ==","signatures":[{"sig":"MEUCIQCT0hqf/S3HF67PLrgHLzRni4jV2EAshjF96r9A3D5aiwIgd5GM1HnVnh4Z8PQ3WUmp2tt2cypqBMMc5VkEjCYnHcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinlBhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUMw//Ujw04moec4TGC4nmUCrTjA5mt91kVJyNQ1fBSD8ZJas8sfGR\r\nqrG+SulC149IiyeTlstXQX+340tpbFEQ5IF1CzhQUNhZNtYBQCeSwOFzF0xr\r\nY6cFZq8h5l4pGWBByZSDidNiPiTQDAd8U2yWa32OYo8oIUFNqKs/TTa1RSh0\r\neKZh9hOPZru2CIpYlq78zcVAxRJz0DlGr6fI2wJjMNIlu3AeKs9+R8wzQ5N7\r\nNfYAm291j6X7P7PAq3pv0CT1zcU19Ws1Yy/n4JZ8Y796tKCrd8ClImARJCro\r\nlbkCA1XOftyv0tmOP/qB6lDddeydjW2vESGjzOA8SIAwJMYCjuAqqolk327w\r\nVJbpUbXSykEzidAx/zhDS1UpXQe9k9gGvQANNHvyXF2CXt+9MxIf/ll4NnIR\r\nvoxalCnpK4F04ykal7sJljFSYZFO77S8iN1w9Rd3KlAEl7eYFCIfkMMgamnc\r\nm7i6RQxIGgMK9yyZpatqiZSDTAp0kOXUDRMKP8zbgIFn/sjKgV4mFT+Soqc2\r\nAHlBmX7tYmNDxdKlENjMi+o/xjQVEYDBynB3x5E0qG+f3W9oy6OXG9rWQXbf\r\nc0HgF8SNZcParVfT+RnmLHqpgWXXaA1uwZRiHCYYH00c3PjySiii5etyF6vl\r\nyAcIj0txMpPhiYRk92OUGcRIa/6uFoNEvnw=\r\n=vT0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"c1b818223f71711abb835bababcadaf0904f3bf1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.1","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.3","@chakra-ui/react-utils":"2.0.0","@chakra-ui/styled-system":"0.0.0-dev-20225619634"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20225619634_1654542433314_0.6819381167169791","host":"s3://npm-registry-packages"}},"0.0.0-dev-202256192154":{"name":"@chakra-ui/system","version":"0.0.0-dev-202256192154","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202256192154","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e1a60a45170d08440ac3bca18d3e62bbafc6850d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202256192154.tgz","fileCount":27,"integrity":"sha512-9OW2g6N1kSZkFqmFVNLCxnXyxoGnwzTDAR7Ku4q8NF4mPzVWSlneQ6Z/3+eN1EYQbN5/PASrBovxouSn9x/NtA==","signatures":[{"sig":"MEQCIF26IK+L7jE8os5Jmdl7ClYhKG1TmYawAWxi6dwFK2flAiBTMzWD2xQS0TH85S3CS7IGWah+e3eJ2Xr43/a/WqO9Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinlQFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW8Q/9Fo0WlS/S69J/9XRwcq9yuEiCghLZcAqAD6Ph6+jvf/deFaG+\r\nHyVoG4/MDh+itCqsRIvdi25J+QFYoMwQoMdrhArl9MXo8/y1zxOMVomVhnS3\r\nwXf8+uUQRszm7JfOR07YmvkKTiWkaZX7MD0Ofvb9uXYV7DD5GjC55iboFvgb\r\nZT+1T70GHHnTHwUTPZRHWOYsD9IpwKx7rfoeOQUGLqm7Dcj2VaQAPKNjJcBi\r\n0YBQcbL5yYoEQ3ezngIOSChxvvkP7DgPhPvgZmsxY8rexCQKhvgeCGoeFZRB\r\n3CEeLGpT3l8ctMSoodn2FE2++26zo2cp6gQtDPrP0LL1ay0DVG91z4XeGsz1\r\nfgyh8Hep34nIJYYPKAD3P02O8CombhqdHQbUEzi/jJO/fPUUymXeHoVybap3\r\noeB8jRyFmlTnfM0HwUDM4BFCXWmuXwleT7vsBpqRJq/Ma8R8LBuQeuRedBUv\r\nWxIXD01w5k5KI9XyWpavaOEsxd2T+vrGbuV21+/WiXVnbp2yrs2p3IHhTI+h\r\nLoncaLc7bjkAGePTbGAIzSjf1bomfHziw51sK1A/RYmQRQoVnN2rSvM/SMHU\r\nYk1tudU7Pf+YCPbeOK0kwBThPvVL5mXqUJkYIw1iRqi6WSmV0WT774LAIYoS\r\nQCOY5rX+s1bqB7p0qWxhqv6BsCMp+QXzlXc=\r\n=gn2W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"06f29f8cdbb10ff1da523e0d0e958b9990d041e1","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202256192154","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202256192154","@chakra-ui/react-utils":"0.0.0-dev-202256192154","@chakra-ui/styled-system":"0.0.0-dev-202256192154"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202256192154_1654543364994_0.08511973794523353","host":"s3://npm-registry-packages"}},"2.1.2":{"name":"@chakra-ui/system","version":"2.1.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.1.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0b18e44ceb8d344d844f7ea577e86dc80084d01a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.1.2.tgz","fileCount":27,"integrity":"sha512-N5URKaQWpKuxq2wFYAFTFgiTEpAHU++QOFhGxmV7BY/F6olzK9eHE5742WyRkbGaS7vOgKFHFrBxgL7+sGtP1Q==","signatures":[{"sig":"MEUCIBh/xz0YQi+RonboWlY0niVAYOwVATRsXS0A5rJic+ldAiEAhmevMQM4aEtxucF01DlACWKnrKNAg4m5iQlk7+XvHaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinmaDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2LRAAmDPw1EHhI8f/p3LrlHArEN2weOTAAVyrgalt/cdoWgq6b1c3\r\n+sF0Iyd9ebqFPjyEe4859Wy9o4csAix4lQ5xy3cff6yohmpWuDQQ4TQqkPLH\r\nqXBBOBPljvO16v2/p+rvfdBiBUlwoMfze7JEFwox3mh9AKIjovEpRyMm9LyA\r\nw4Hkabt3C5kK05BddPfEHW7In5cNFVPGCflzQAiLKI0CNdIP9Wuj5/Uv9fuY\r\n4okoqi1k78AGG3p/MYUdNFyeiylvbsvSETwCLWyW1WPIKXRoLcpef8+8qIYs\r\nfselwuCTA+maQkuGCWBW5UnSIPrjKjbTNsQQ0f0gZhYxkCAcBFV4Uai8lpkG\r\naji1+WEr5IFKKldokYR04llpqP5uDMb9ILXKC+o3aV79dIUiSrYuiZ/JqG0c\r\n7pAuvkq7nKEDqEVlZJXTUMOba10sVFqw0IKfHFaLQ4Y3KXm67zqsvnEZf+S1\r\nVR+Gh47e1Glev6kNzwmy3ZOt9YK8+O1oGH+SgBvB3P93bn28pvODw/fUCCB9\r\nMSEGxdfHTb8Jlhm9a68QEhARoVfV2EnDtkuBYjv/cUQAMY+4D1uKUUuchtVB\r\naC0l0fiUElfXvERG7Ig3rknDtjOzrvh94jFhlDfzXs92CUIPqiq6/ZpqfFMg\r\nyg7gJBTcCO/nw9UYZdJv/JVfk1E2TXnfCEY=\r\n=MCWt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"28e10e36d773f609246df375dc6279385d07e0ff","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.4","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.1.2_1654548099440_0.489201472456384","host":"s3://npm-registry-packages"}},"0.0.0-dev-202257113227":{"name":"@chakra-ui/system","version":"0.0.0-dev-202257113227","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202257113227","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cdb9d3d9929f92dd65c27cc648fa26624a6c6292","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202257113227.tgz","fileCount":27,"integrity":"sha512-+UggykBTHxZylCQXfu72sni9zoWdUzOIhbrBEszD2WvVIaCnhlHoTwu4aDUnsqiGjGmWGBccB/xWS7eLCXdzjw==","signatures":[{"sig":"MEQCIC/vgxYOkGyy3eaV+JNRSK7sEYrj3/p9wFwQ3xJ1dMvtAiAybY/nO6scwYUbaBABbTlK12S/6J8BR9v8+DCCPEkARA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinzdsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFQA/+Mcck80pqd4ABcuVnbCH673LUhpyc9xRKk/9FJG8tcWAAVsP0\r\ngSWRbqbEaPNXEI4Xz+V9uxD2QCL9U/l0DIxrvB3Yw5DvlzSz1scFxMjZc8k5\r\nmYt4snvw80PJ7MEOx6kcL4n+yL6RBAg47N6Xm0+8R5qI7oYpwqVneKM4oNZI\r\nhzYK79kK+P61mYhJ8ebCNeZb0OmkG8TjX/Ih3n4jNru3Way8iw2bzUDUX10e\r\n8GszrXG5yvfo21QANusO3cs5bSE5yMmcEdvt7x4Rhejvjq86KGUkUyEWYppg\r\nKzVNQ/NM4spspXjVN3Y1t/aEOJaUQmrSFXbR/NBu00osp/7fs4zmNYdYrKAs\r\n+3nJHlZ6RUA53D/RAg79PU2k65f2H9KFPXgsYZkNVg0aOlIRTbFL0Pq8JJPS\r\nNyJK5Ahpbc9cggiLHb3/M8PbLVs01n5RRgLTpA1rMXIUu97K52EzpFp3N3hQ\r\n07c0o2HSDs/aHCnbkTVcCWfkRTZ/zKi3vimBQ+5ccyAhjwE9H+7tLpvu1EXS\r\nBqBrKMVG29T56HoU5ybcX1XzU23S/Go7UCbBXzVTdEKsvkkXkF5vYWBWKmZm\r\n0qAYaDt8MBTMjHVnODYsns2UhDWMOOOgDzH1zlH6OKzDiRhkiLxM1iILHV5P\r\nWUXFkORgIJuRoquo5qqc8VfbzQlEJkq9O1I=\r\n=YUql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f98473dd769b4524258faa214ca5c8ee67feee07","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.4","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202257113227_1654601580331_0.09444432890282273","host":"s3://npm-registry-packages"}},"0.0.0-dev-202257113310":{"name":"@chakra-ui/system","version":"0.0.0-dev-202257113310","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202257113310","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8cdfe39bce10de9021b26080e5fb77a5a850df45","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202257113310.tgz","fileCount":27,"integrity":"sha512-FMks90hlXiFiHb9ksYQ+6naKlvSQBkDdXa5b1I14FNGyAWY2fzTqTI7Krd+uNXn8Oa+As2J1vG7Nwy4mt7XtRw==","signatures":[{"sig":"MEQCIFLDh6wbOFbFtsiejIqmURjMwpOeRPGpjFxRePuioED5AiA16LaeGHunHZAGFnqF1hs/gJA0bvnqTgMjgpTvdeNz3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinzeVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/ng//Whzs3m4T+Mvd5kWmOq7ulhWZWjb3/I3/qy0Str2H1KSoevw1\r\n7I5rwGkDN8L8l3aYGmHRjdnlcSnXr5Mztk5GSMAFEoBaWxV08vo/ALWLx5H/\r\nOmtVvmutKeTqrZSL8VbTFsYOsSM06EVew7pfuM++61xORympgf0hbc15wxzz\r\nLS7MApNYJYxEUzRNfgzARVq552MK4rKMJiTWWtKWg6EIXfr1UKRi9U3Df2Ln\r\n42LYmo9gPFw5IWaf0ClQMQ4Nc95miomqOCXv2AK/A5XZ6r3ae7lAobki5RE8\r\nsrBymCe/ptHG4zQkYDaJgfG/O5EppRXiZ2v4Ga9Z+hOmBe964UyJMLl8hgUo\r\n9db3jVjLtaVRLK3nO+H9mck6x+5xfbzdk2Nd8L8cHa93SSw6A2qJQz+PaG7q\r\n8vsQczUUXhXNLWyOf+0aGrpRqOR3rVI470c8DPOAGNOA58XJFEnero9XG673\r\nUE5UBlrS+5fEq7/Dv8O6kA12Pkn1gH29JF1BZYB4EHOe11G0VhzhXeuuY9ju\r\nG0MS2L8d4dfmSi+61IFAyIbGqNgDUzPENz6yiglZK5Z+a6N9ajp+jQJz0QWY\r\n2GQXlBcM7HkBvoqH7s1Ey0BjJdrIUSUGNK8k0F6DDZ1nSajBTB0z3RpthG5X\r\nJoB+4JUIASENNvVvUidOIfT9wOQh6XlY5Oc=\r\n=CRta\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"0899270d83c68a1d33a48ecd8594d8855b680701","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.4","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202257113310_1654601620772_0.14048596776674405","host":"s3://npm-registry-packages"}},"2.1.3":{"name":"@chakra-ui/system","version":"2.1.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.1.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a140335f56087f761d0a8cef6e4c77f971f054da","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.1.3.tgz","fileCount":27,"integrity":"sha512-f9GfJr7HGxxhyAbXmka/k/mPsLl8wl+5fZUWglfRg4iddmsuYQcJEYg8+ewCyr7MA1Ddw9bPVgsC5uf/KYlo3w==","signatures":[{"sig":"MEYCIQCl05bk47/XHNhH7/3wCCwzG3SssswoSdvFL3nwinLXUQIhAPLFnMFro2dExPeOljkT+5oKWYMEhgOd+5TkYtTtVh9V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin0DvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRYRAAhMRaMa8nPM+HIqpy7Qbq5U4IlCZJ4RFIniL3ym7FgXace31F\r\n0mblAuRVFm8m5jtEj/F6ileqoAWmrR5NdnrX0pktVaxa1p5CevMGo7nlpWo+\r\ni/503RwO0/OaDBzrNJwuDURVeEgb7GqYbN+ZSLv3znvo0jOuA7gd7DaNzOUV\r\n6BKjcmdbhiXitg0g9gEVhyWF90tG1qypkSR79YUdOdc9oUSaJNhfvlrpVEDg\r\nhXV8sBIHo/nDFy93Ojc7VmKx5DyQ9N7GJ/bxsYzMouo0jHR1mmrYdtgoUj6i\r\n2xiCyh1WvApcs5ap+Vu6C8PKIya7q+TMXH4B70i6CDrb+NyYd//yY85O9xsF\r\nzvgzp8RJhQhJmk92KPOgWL0wPlSV1DfkVDdP9/eWQf1NWZ695mvbmN4f+ala\r\nErxw+NjtNRmX05AkQx8e0QcyrCBc2BOXZzIRNDsZuPAVyV3iErlc8yn8sds0\r\n0FIu8WNpxFSyx9G50XvNp3gJLYhaHOdVFF7mRRfUopa2FinJuaSITZ8jPZ75\r\nNRnXm6WVA8+tqZ3fQotxEdx0CKs0IXfzI7UiYuo1mq1chnWnWsUhr4RdQZo5\r\nJkKDMTcpDJnjNYNNytnuZhv5Ri6vaiU18aOZqu5h2dWqGGqlHbHTSZdyIRMN\r\nPfM0rbLgvLXpjL7sQyH1YcaiK0wdzvMY65Q=\r\n=cfI/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"104f7bd1206a966b1f07eac330d39ca46bfaee38","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.0.4","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.1.3_1654604015589_0.14401883364048862","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022587541":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022587541","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022587541","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"91c2f7b031b630a28f51d19ed37201e0cad52308","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022587541.tgz","fileCount":27,"integrity":"sha512-Go8Qt4oIrx/ckk/gWjCYeliCYzV/cbcLTG7ybX2FTRduUxtACWFSlVkoL9byAMLutpL5ZnblQ9YXqqG7x4TDkw==","signatures":[{"sig":"MEYCIQD26iLerfR+widEJzoXB2X4FIWHbeENVezuGu2KKI5gpAIhALh5i/tu08nzQtBkhMOlQGn3AN+Dm4wY3uPFJDKvuBkK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioEp2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzeBAAjvf9p/Dlhyn0m3LtNHvlgEnwUmxij8GwFoasPJJZORLSfhy4\r\nEulI6QyBwyWPusanmMaSteqmU9DHKJgr92o+Fsdxn+3zNW/n/ILsPZWZleVD\r\n2LhsPe1z6kCrWpzfmtiW85SOCD+eB3+RvUhRPngGPiKfDpeGpVWos5OR45y2\r\nRobImojfI4H0Kh2RsDcQMTTDi5y/PwURKlqMOMlN0GnWFFazcyVsgn+W0dr6\r\nHd6MxyPKjUYUgcd2bD5PJSkAll06fs9gFmqohdSN3OFwzh6R/RUcdN2MD4A1\r\nWGvNO800ErES6vX0TTu/rSuDtJ1ID6mmdBsajJmnzmgjS9xvIN8smCitivXg\r\nZR9eNCzF2bmZUzHXh+KZMYZ1dxljERP8AwPjDMzCEySsxwSD4wbo0rXsil80\r\n1xaUvfZVExQQEks1nKZ1mSAHGj/3tMI4tt1607tQqWWp1Mp0LJo9392vDxhs\r\n8ABBiI9OUZFw/R7agxQy7yTEfm+5UzxOurVmilK3Y9s235WV4nsySIEMcL0Y\r\nt1Q2w/r5hRO1XaxZNG9ZxxroL0VjoEQ3zgf/Z1Xc6AR10s2TG57m7Cwbx1sj\r\nD99DT/WuJzZGH6o5kuCdpyIUjSyhRfZZ9WvTvnbhESpe0i9XOI/SkQQdMi/6\r\n33T+SW0rctYtE93RZ6mvV0V7wxobm35cyG8=\r\n=p8b/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"ac1f37c9daf3f099147fedf1fd75345979032c26","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.5.5","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.0","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022587541","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022587541_1654671990018_0.22171134391444647","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022511155212":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022511155212","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022511155212","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b92cef41c59aedf67e71845a21fc533146e75481","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022511155212.tgz","fileCount":27,"integrity":"sha512-hPRaxLGzV+ariBpczds6lqoaedGe9ZWu4Q13mMfkXPkUC5VwdwQG1IbAEPQps5u6xdBqmmpjlNwsKWQF7J5u1w==","signatures":[{"sig":"MEUCIQDl2XXCLLQoSEUfXM0ib2tSXrdbuNAidkcyYnvo7SUlPQIgEU4oZ3NQhF5mTwmNhlOanrHvJjVZ2SqhlCMlzL0+CHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipLpUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtlA//RqCAuPw38PrctrRltUrjusgucRSYzqontLAIXi5IwvrNbjIk\r\nYNhcXj3LCKO9o0OUNIrzwD5DGZR1SguMf1um0l8O3ikUmFh+mfSVodNmm3BW\r\nj4s7SOwU0jgG/k2vHkIn9bhJcbz21aaRmCdMuzJDsBgH2jzK+wyLqsWbgED5\r\nihfymbH+1XXvFOiMgeVfzj/5eexbj8jOpxVYkITz92CKFsvmCdTp1i59vfJ1\r\nHY982t2sf3VDmn6n9F0yu/eh7LolJ2OxYwMI05QKSR+kFgKHut4gBSnXwMhI\r\nRPQi+D7wVkn7aPuC0m2rTSR2WiRQmmtWtZ2YzeSLjcGXF6sGVqtCYp8i+C/0\r\nJkLQZzm5RkmT/d4t15Bvg3Hk/srsEd4Czp680kfkjQcsQyr2+4NeN6YbkCYS\r\n0NMENLhOLvO8kgB1boDy1Btx08yeXPdCrHDBT/NMOnkeO9DfurQMVJ4aE3ft\r\nePWeQ+2pMNBW+KIzdOCgnwvMW5f3OCAyn0w6D3QyUAm4l1TE3yB/c12uh4S0\r\nCBD31bKtQ7CjQK58I6NErSQkH6G4VbT5SEZl614VtYFuOxlpCAV3LtQFuJuW\r\nn0ELQvHMbaytEj8SGo5EREf8SddU5FM5Uw++/x8KdBwYVcR0qevdaJ4tmahJ\r\nmpRIqtfDgTFEZQ85yTBPRzUir3tkNpkf4Z4=\r\n=ZcC+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"911e13823b03fabd673d7bfc4270ef845d3d496d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022511155212","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022511155212_1654962772612_0.5989176025867702","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022511155356":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022511155356","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022511155356","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b389f378cea34098fd9c8874adcaabadb3250ec3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022511155356.tgz","fileCount":27,"integrity":"sha512-HQzabYMKqM5X4/8syTFsSR5+KMl8kXoezytZ6QqsceFwRKxjUIA04ObPzVHmusGtPEHpH93yDyKYHINvcSHjDw==","signatures":[{"sig":"MEUCIBNRjMzvfNZMd9N7nHowI9kP9mhkjTAHQRVcndvL6GWvAiEA1KXqRwy1ChzVRuLLWHytMG/bPAbv2AL9LP6rAuClD38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipLq7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAeA/9EYwcuoiJK4Hj7rvUs734uWGnZ4+zF0CfI5N4jVmLWVL/9tcC\r\n74MQCXJNtyAN0MCDCe2Wf6aniTBS83jfwVv+iRMPF4gp3x3ydADMTlysE/pO\r\nJShdTpYZJrUotLAbQALr5hoWaz61JPV3MoSh0vLeSNBfW/SR1UEl9N54K/95\r\nP1T3tfOD3DQ+Ee8KpEB6j14zIE5RFSTlwcGbTmwO9uomTFKdrz7v8kyynuld\r\nEKrH3jodN7+aFmOxu5IJKKrA2+wPecOMihr81RaHTjGr5Fbt9O8UCRM11LZL\r\nINsRM+TRUyt0el3QuL7rkcRM4hDf46kk8x1yVP5mE9tHxrxXR6GJY/JsHJjW\r\nBFyweW/nDUaPAtU6Hg0FTXUxiwR3LFFU/5o98hmxfbpJX+x5GO1CHro1E7di\r\nW0ai9Ktk1SWB8M9fLUg01BBcDw2eKmjxoE3R4S4egbtx6fnTqt+/zTFSkjhg\r\n1XI9z1jycXEYcLN+54Cjwi0BC+pGGM7uhGhgjJXpHFS+SYYiEl8oKPxerRwy\r\nV9y48wf080tq3J3izrGqtheiomEXENztvsGeSfeRN9RMDmKopGrJU2d8BeQP\r\neG9P2MMC0BI7Lb1S4fAAkJfmjZW/awcLtxmzCpkVMpehFnjnXedeQ0JU6/5G\r\ntY1SjtyFKVvnOeE5XSAzzrCZvQhwRtKLGE0=\r\n=czBl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7f11b0cd2299ec57b98399fc61314202919adbce","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022511155356","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022511155356_1654962875321_0.4030947019752462","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022511155428":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022511155428","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022511155428","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"30e8d7da878c3c6df21a43c712c4240cd28e6a0c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022511155428.tgz","fileCount":27,"integrity":"sha512-lk/r3SdWsBmuAdNCGabtodDz8TxydNaUqNfw/PzNFDxxfQTEY2jl1B+kFVK2+J2OYjQpHYKZB8vp2Bk0C362Ew==","signatures":[{"sig":"MEQCIHFMyjAIMsi6+k+yFnYtAc075UCTgxM+0LN1SLB0yYYWAiB2gQMkiKRF2BLW24avStEGLa7TTs6Jl/1PPVW7swUyWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipLriACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Og/9GBO/qaXGLBqSP4Ya3py4Wuu5n550d6SjDh6jVUTEuvfQngKG\r\nWa5cMpqcH4rddGubW+DKpeH6WwaXNv7G/8N3DOs8vQpZVo+NnMuTb2t4RDFE\r\n7Q/e6gbnBk8opeBuNJx/7xeRtTXFo723fTx6YxZrUm9S5Bw3IJT3elCAdd7O\r\nX+LVfR/gijYXPD8uJICL3hIkb4PuiwIRXfdD9zCD/XHlRFx7vtdhTk0WvM52\r\nqcX4SmXheljHjeTdDGILNsjwSmAmFF23Mln5PJ/JMiP9Wf+vx2x2MZON+RaQ\r\ndEKVL227v0JDtTFyvsuoonaLZX+1835qj+DPC8HEjnYx4KOSq4I0Ylzxcj2j\r\ndLBqjYLLojm4EdkytCc+0NOBG4FtvoX3cuiBLshVwH5UUG+6THXAQ7tVonZ5\r\n6jEAW3Xj+ofzRARWe17TRR9UnwbvU5Sf2MBNJKx+W+iBK+vV4EjG+0nJ+NBi\r\nNMKFMkfisH0OCVKQoPbSfM4aTCeC0mqr9SaT0jFCohS7pxeQMSdpd5SpLfyD\r\neKgy/z6LKy+zJEySpE4HVKiPTlrKrIoqoke7Zx9ZSYqt7gGlFCgJZAE0wXVq\r\nTjXcns6aDP7FzMvvzVOK7wc1GlozOZcuxmwaQn4DvRiJOryzNvh/BoZwy75U\r\nrv3Qryr9/bCh11oYHqXze0mzKe64o1F+kG4=\r\n=6E7V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"7fc054eecf48cefe788fdb31a343b1e281649197","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022511155428","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022511155428_1654962914506_0.8284894868834007","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022513181240":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022513181240","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022513181240","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"184243a63da4c03f711ebb03de3c5a2e2ef5be85","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022513181240.tgz","fileCount":27,"integrity":"sha512-WXTm/rLDJ5sTKORxdr85RncMTq4EEWvsdienDsKgwY9GWgr3vehz5G0wVvgpTKN/WpIi3worncGtzjgOU0+glA==","signatures":[{"sig":"MEYCIQCa1uHzrEHQcpSMYLs7g0RwJ8+MNWgPeBud2rU4E7WUhAIhAJTNBve7vPTde1uFbG1W4FAWcMuBpR9HTPzSoVHwZNDB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip349ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMdA/9GLGGX8GyKnBoN1vanFmvEdrY8BWsgRCHEdR3zOLme7/4GhqD\r\nq4nyQWNEtilj2H1tSoNZOk7eOpYpwAj5MrGZ8Q54wTd+5Bwac+Zk4VwWrTyP\r\nPLFD8eNS1mjySeBPJvmHoM4Fo8xg2LtMnOXGyHgP6lYvPcE3oyREeHkxVFnl\r\nbCJPNqpUWFOXNdZ9EQQBpV2gYFWaWsoVZWrK/ej4vjxtCVBTxEnwfUlZxoU3\r\nuSeKYn4A5VFFhnldb09BK5zfvQ2pwV0/ApmbJofIRi7IYIFxCaiDW5EgQ8kp\r\nmk+JXBY6wa3wypGf/fcuQ1MSxD4ORvEGWU737cxZCQ2x5hi3CT1HOiuhVVe5\r\nYtyDjjZk3qZEkI4SiCZyWE3PbInWodQabrIO4oAmGc+kRCv3iS8Qlr3nISN/\r\nc9kwSP2arNON2MtSVr5z7ozpwNfZbiIrR71AhA1/bJYpkdjBfthluNCKCvGs\r\nYQNiko88720IWExcrLeivpRIOfTVXfJu4AB692KHjnX4jyxbGvxDD1EaasyB\r\nQQQVGjm9k2bDgnh8xmAFq9bpSVq0/jJEyCp8oGaq0zPLqlfK5J7CFscys3Sy\r\nVCvvCai6rNGwxaj09uOzyp1VwFgTt1gPGQMKaDk41BBW9cLTRkpUY4ZMwpnI\r\nYuqoN9cSG1WkJSjxt35rKmUchhL7s29zlF8=\r\n=aQkg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"31d24f6b0953fd4eb9c90a80e3e78227624b4d40","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022513181240","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022513181240_1655143997764_0.8524222523548817","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022515163532":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022515163532","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022515163532","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ba7c7b2c7bac7b6bcd031e86bcc79205131c036c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022515163532.tgz","fileCount":27,"integrity":"sha512-DBDq1E9tf3sTKbnwPlCAg0iXfNIG0N74l1hDHGX1ldEY9ApNM4CHfYma4nWDUp8r8bX/IlnIkjiEQQj5aHXh/g==","signatures":[{"sig":"MEUCIAmCIOsVXJCsgFZlAO/+TnK1kmDlwnCwcPZHY4Vjh5KSAiEAze+QXWth2TUnvsRSrpX9mnHWgPUQ//Ntus9Qri35roU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqgp6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKfg//WfrmiF2WSv77NEnUEjsQn0KAUBb5MMSIwfiPLD9PsI1lHTM+\r\na6MCqdn6uaoYgPEcNaRvVn+Jtl9tPNAoarpOQPswW/JM1LxJMSrB6Ef8xsWk\r\nq3AFkJj8Pm80LdKs2bKBfWYZOR/sEBhzsDak1poPVVBDYv+ShhSuhRzsdG/J\r\n+V0mLLCkF5Nu1NBurBuilcwGLpgXW4cQNc/LZqka9vrByUEghlmB0W2V5d5l\r\nt/gthvZ+tip/wqBN/zAdTMLC8bMdIo9Ln1m//I29wPuCeEXcBPq4aXBWjxhz\r\nL8McSScCeb4uBIKRqZfE8Bodgfc0ipSkdb83oVvZxPU45D/c77wvE0RVJlRY\r\niv2GdPCXTFySlEV4TGLS/F4hvhgV5HROAYs5WRUovnqMftxDp61AA3vBgpyP\r\nG2q6jGaN3xcS7TyKGYN/p0Vr+eTWyhkyHIyqFS6ZtCIxgT4e5xgCvUbmy0BW\r\nOxuPZIWAhakqjU+K73JoNxORAM4NbkNDCqHmca19LK7MbKGNMfb3Mx/t/cEt\r\nMEnXDdfBXpDs07i0SnO3gqLyF/soQJBDFhb5EX+8w0w9PsFowVEN55fFr/bM\r\nQE9u7s+8rqr1HmE8mOWx2Y8AFYbiCsM5foEk8di1pDhJIFmMAxDKESbFsJqB\r\nLN/gS7PM/E+quEolfzYbB0igISJrRpFvl8g=\r\n=8WYD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"f3c0040dc87a741a46d5ad76e4484fa72221c914","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022515163532","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022515163532_1655310970664_0.8337732367902588","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022516122241":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022516122241","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022516122241","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1e6dbd9d8e414d7029d59b2e9cf865b89f5de1c4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022516122241.tgz","fileCount":27,"integrity":"sha512-+dlCDunud3OVi1fX/gb9iT3vrJcASt3DP2U7wlLTGY3cCr2PF0zzVtg/D2JK5zli9GRM9YNOnwIT1CUzlKdcFw==","signatures":[{"sig":"MEYCIQDK1nt5duodC++7XXWKNlXM7rnqHO2XpMzqG3KwgDqEDQIhAIP/SEMBHascoPyMAPJXK5sAy+w6ofjwUfm6xaLTRVie","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":65209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqyC3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhlQ//eUfdr4EfX8PX7k2FANQuMoKA5L9WQY+i19HhUejFeoPAZ2rd\r\nEdmq73QmwKlt3KvNU1UwPuH5xtTiI4r79EUQYij3vSisPG1Swte5szb9HoHN\r\nvohAZBRFGAhiQDsCPcao6CpimbKknj5JeaVjHz+hR9XDIKcsYJ7kvzruJ7CD\r\nClhp5C23C7fhbF4OcGTetk8AUtAJTZYVYVrOhIG7vMQkpNfsg9pn3yAr203U\r\nDkP4/BB3p7WKSN5cPL1NZBfUJ5dHAK13+7z0MpnloJPnJ8VoEHAKY8pVLZiK\r\nfoonhbBv10diN5BC10Ks+fmymWy8MHMdW/vVvkid914JQLtKRBLjuhmr/e2G\r\nY7LQFPGTM8QSBRDolNte1e45bzf+xOHHriXTQSXwY7LJ96mOJ7SN61ni6IDm\r\nB9C8aJ5tu7vc2TV9LYKvuGS++gkHckW4FGfmc5sW5hELmuw33BGa3wN5KSq0\r\nzuEYp/oaahPD3f3I7552muD2I61V5TkGqJjm0NtJCFGwQgSHDi8hDthI/CAO\r\nCZgRPXufBS9tQZIfr9n3SzLkqEewhTewprsUmNQW6Jm8VBUl6cd62xLWaN4o\r\nT7Fbdusd9m+j7brN8ryYl105IZ/fnr+JsDJ7aBkK6wDWZUwRM4r2Vje8VlUk\r\nStNXJHQ9p3ERId6t2kqReOSEToZ46SWB11c=\r\n=HPDQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"69353f68131cb17f069a17135e8b3ef8888d5f3f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022516122241","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022516122241_1655382199767_0.09028462927023262","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022516151633":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022516151633","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022516151633","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e51cb4dfa08c42fb8e73257cdf4765310d6b3ea0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022516151633.tgz","fileCount":27,"integrity":"sha512-o2XweujZHhdxNpjvPbg6JA3VB3ieYU6JSnphRqIhys0iZhjPhFwimdsd5un8nF5p0EMDZa6+LIq8baZnaxq96g==","signatures":[{"sig":"MEYCIQDvqHiv6b9NwvOGohRHK2lDCjp2p8hGqOvCO88amCnJQAIhAMAZ5O1iN4SFzLwxuEWuQZmBn3NCeTwZR4dTCCfPrt4o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq0l4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfKw/+JAFo0Cq61HixdFfv1FItoZ2UFdmPtKW8G6zxuAypyyafRZrJ\r\n4YnL7VomXVgbCyK9ttfqdCRuGt3cxj2BhPe/iEplVEo6kB6bbmYw6OvpioNN\r\nEJNvzMFsenfXBRL2smkvevm/LyyyHu32yPuuv0BZV9Hz2Lb7Hqxqd/phjlad\r\nXCf6bYLTkUaTWIFaM8ArsnLyWxUjaTTqklB/TrOy9sPebYbV5IXEBr93zceT\r\nG4m2odck+rdSHHzWfxek3z2xY4qF5M4a+ECUlYlAL4y+E4uAHXcsZZhju0g2\r\n1q/WLqrvXeGZKIalc5w0KCmSXSNZ05/LXRTHjYRbdr0QLu+9fYU2aks34BQo\r\npG6KH7SOaiTMO8azfxdy6WJ7OoNmaDV5kvEx2MreBn1N6Vv99RUBS7spg9Fi\r\n7RPzyx2D30P6Og6mT0YJfz/EL/FjnAeFDx/lG+y4yAs94xTEOr7OAbGvFbca\r\npQwCRPhRC3yRvq41QFpwkXLgpQNbbXWgPzqZCJTmBqIyQaBLfXR+VVCVGGS+\r\nc8TSRFAk24flmQehkTEDRWareaek4T5U6JJajFovTRs8jeEdE7EAXcbUonS6\r\ndDyjSypdmBd1q+Q8g49HrYd7BzfJrBfpTFdBmGg7wDjq+wvDQqL4JbeEeO7Y\r\nNoR/OWvD4UXrXdpH7lx4p+jhn+mEhWHg4ys=\r\n=eM7f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b4ea78f453a06eda2019410e925e527176e0815c","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022516151633","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022516151633_1655392631987_0.8414518652708989","host":"s3://npm-registry-packages"}},"0.0.0-dev-202251616831":{"name":"@chakra-ui/system","version":"0.0.0-dev-202251616831","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202251616831","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cd5d82667b6a790994961768a68a502a6eea12cf","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202251616831.tgz","fileCount":27,"integrity":"sha512-axHmAChO/BNQxwj9J9XA0c9vBoJ89zu7hjrlgEIQdci+fm4Gb8UbCjY4QZ0Kvyn41MyT5ijEu2SoGoVrDW+0Hg==","signatures":[{"sig":"MEYCIQCYxe2r4mvzfTpPkBn/Fa6rYEkfa1JXRN50UXCBOWFE3AIhAO+Obwfu/R3a+FnNYTATYgSokV2f7fmhdRenVQZtO5VK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq1WsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz4BAAkzOI5KkY6ckcLscw3czwovG+OAtghLz5S6Di+kaYPCSbAXvM\r\nUinq6Mc3srfJOPItmUDhecLTxliCuveG3c+R91ms1bwQd+qUkHXiysO9Iu6/\r\nNitAUDczAlqAoTCsJz6+lNYrGbVKTWXP3nS1yOvPIINwWHPgpp+mVAzy5XiS\r\nI0tVYqO8hiMrib1cvga35lQEpw0T/htiF0GIba9pXcTQ2k9ft1btXV+RUzPs\r\nMMX2SRnx4w3XTGm8ATDJmrwGDQoVa2FhxhtMAoJHuVJrXci6mShcQE4XPfgI\r\nR9IHhXErZxbR6+s8JxpvjkC9MXydh1sZAwo7ieYT915Xjej3mgUNteavuJMQ\r\nOb0XGUQ5H9UVQC8ItggD2tMpuvg2qE6i/megYuqlpHxRfOD/VzAV6TKYVthY\r\nq/AEjCzgh7JJALiO1/OQyXCjQibNuT48+hhu5qS6z2RPpp9nWvsa7Kw26wv5\r\nQ+Y2sPEV6y9xO7Lyp1n1RVnpis2ok+ZKwLAnD4+ZENSIrJ05M1XhXzhfL+xQ\r\nsBIQ2H8tW1YLXFwj/CuJBLS40aDv3JL+BWwNybe6M6Tveuc4czcg3k2tAFbE\r\nlPhHE46l/FFcMEqEkln5KKNmERnZzVkoqUYeJC+KAdqt/yviO9h/2hP3dYXX\r\nD2QHpykO1o4Fl5d14S/vSJBUIzznEb0hjnQ=\r\n=wcwb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"aac6c98321e6487894b45cb459e67e5e02499224","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202251616831","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202251616831_1655395755549_0.7649687058771228","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022518113258":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022518113258","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022518113258","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d08791ca03f48189db6d98aad955899301d20b62","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022518113258.tgz","fileCount":27,"integrity":"sha512-SIn9niBu38pcGySjLGv9UjiOD6QAOauxPbe+vvU6wzNSz/weZ4KHcodoK//59OSg9hE+ms/yZsrVCTM9K9EE9A==","signatures":[{"sig":"MEUCIFbCtzxiQDcwGKhUySrjTLIX7POHW93IIPdyYllAcR9LAiEAgf0/XYcW5S+m4rwytT1ts3NRE+yzdMehImQOKyl+1Vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirbgRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMdQ/+IOR8fnUVPXABeyRWFaevpGVEHxhkmd54MOeaT6cDVzXVDsFb\r\ntNDytnWs8d3EVPxHs7agHQknjHkefnuGcjki632bIVeufxqiWQCNPUQUL4Ay\r\nQiLRIKYpZJ3h/YtoBfWifKNdLYIf7DzN9eY5uijNUoCUDJDZw2tZKGO8FHGF\r\nOSd3wB1iNKlYu+FZ/XUnGC8u+DYIaGxNgWFvXZAPb/MDv7v9MYb9y+NdvCQ9\r\neDAr1WNK5Gw1qOb/eKKkLA4bYphiBh+nWeMyvFGY3ruB8zPIQcffD8bOLkLK\r\njnIKQg+xKBBod7reiwqGEmw2ILrITGdx2SSa+2KxpKR2fckASoqEdJGEGVO3\r\nGte0TBccHCSklaeVXvLj511vtOsI2jmUJ/QoH6byqsab0hg/GhFcNLAKezzn\r\nxOPXMAdaGDUpBhqPETlJpxBAEnh3de/ViVUuvXIqNPCLa0NVu1zBuCWWsHdG\r\n7Uw6uropJHgoKN3OYPGyju81qQgAqERhfxz7MpBBCQsvrg/F3LLmpBC7wJA8\r\nGqSn+YEBBQUcGE4d8YYrIdS9jE3BsQ77sHZSyMtzJdY4ApG37162qoMoyTGw\r\n8w6aYRB/9ESPPcFnG6xFhTmnQz+MzdjtWsrO0hDkuz/IiSo1PlJ8s5c5eQeQ\r\nl9cp9a10gBcqo8NnB/LMy31xP36vvCAgtmk=\r\n=Uu/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"6ecf45646d1558a52b9ed5ecb45e96feed8f09f8","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022518113258","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022518113258"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022518113258_1655552017714_0.31219320237907944","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022520143145":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022520143145","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022520143145","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b3e4acd174ecab59092e1c76fe4cbe16662a8a0c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022520143145.tgz","fileCount":27,"integrity":"sha512-3V+BWSEcsf6vFb+VULMiYORsnuEcWUrwoR+ReOmyRmSjoWKbCgFeWzyi8R3wf7e0kLf+FtiXnYBR1xToJnfbFg==","signatures":[{"sig":"MEQCICtA4GOp7AjUbv/DSR/Qu6i4uIe62E73lv+cRB8S2MisAiBQAb8vFRRuqVhfJ32McJqlZ+ZxFT2bsoYUtwsosbqR8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisIT1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPZg//UeIcwXrCdObnlrBKw1DL+AoFRACFYO4gF38v1gInsXanEaVN\r\nGl1Gl9vmH/rDQhWAf4ah5soSycfrcfh1A+je4V4lTXIHminOJr7cgR/B4WoI\r\n9F6n5jOLk5ESeew9BT2hJ6033BkmKR/JttPueu72lDdues9gCTBQTBzGEbHc\r\nsqDzuHeyQ8Ga3ejNC+SLxqHJ59SmbOHqYzHGonm50SiTvWK1o0ktwy6DP6ZO\r\nV6EQ7+AXHBYrokYh+m4f0MRngI7lRUCOrjr2y0m1QABUEU1JvFm6hnnyJmeT\r\nLA4ozi5xrgREUPjL8rarZ5RTGdu0QJcUn7H0e5QiyHv80VmBIvhEOdGu41K1\r\nW3bLXE0df9bcmfzMtmJB6NIJs8i01iw40R/7Z15pgRux5nDy8juxWYn+SJ7/\r\nIvb+paZtpw88h4B377hHRvriCFYO0HBOh0zto+wLTEw5u12XZQ34goX92bmG\r\ng41jp3V48wrJM/jNMIwJdZgQMJvRKZpFqmVDomIQPomkqEkN2cOUONsi8bue\r\ns95LeWwAPbvwjlanYpMq9J9/gYPcEy6tVo194oFwDj51iFlpdvuoZRsflG88\r\nnItzxD2vnCsrmOOQbnpFi8lr20cqO4SnyjIrEKbjuw6OyYF7Q0Pv7lgIuBDO\r\naf7ywwzib7+m+ZZfp87ONU/VQWrz/fAjMeg=\r\n=pm8t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"20f19b09cd30236b5067d6efc19c13340938dfc7","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022520143145","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022520143145"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022520143145_1655735541189_0.9591977381996288","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022520163758":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022520163758","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022520163758","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a872a7f7112dc719d9510f68b08127696f968e0f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022520163758.tgz","fileCount":27,"integrity":"sha512-GF8V7NO7QX6XNnFOZm+sx9dRqo7snYFm7xjgsd9+j6jL2hHLSpBVagZVDVeqjDFSLqlTnMN+7+MveYte22rhPw==","signatures":[{"sig":"MEUCIF+FdfpRk+blZTIePDJubTWe3h7fZ080gAXHuBHJDQB2AiEArNp4fwIB7QhnXuZx/st+5dSNSoMXsh0SpxsfkaQbEyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisKKeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYxA//b43K8q1Y7K7ZvAqUq+RHirjCoDUmg9f2h2gVxv873Bxl4vPU\r\nw5NILoH+QZ0pQnj3WH/hPpn41+PcftiikBZJgVvEAaDMjyLjZJUuFyqZJTjp\r\ntQRbV1S5b+ZXJqj15L2cbXxL7/mrd5OOkz+Z/+rLa1WOBDHbUfJWhF4QtrYz\r\n9kg5vLgW4Ypm9HAMlHnavM9roBFSkfJ9UiIdwXoU0ip1ghWMYnvsHiGc+bMG\r\ncSSH5fcWOmnkxc/oCuYiR4sqTJAWhUVDFpJExDcuA5l8EnsrYahVQe/wNEoU\r\neH3y2KQzEyJdT5QCE4VHF/nNKwI7T4j1RuvA+SOWBVGwSUdyxxmPDmXIeT5S\r\n7WOofQ6v5nX2W4HMlE+O1ol3BIC/LvUsNnok5kJvLEI5NZAp5gevNdr1pjOd\r\nAkMLfwK7o1NIZ3cxq8700VBNP3W1uhERdrI4T9pza0cKamWGhn+JLKdkRofY\r\nnP/hqa5u28QceX5pk6M/JYfPv4YZr72xq3ZmRvXDvn4PlpRvRSjKJnVqXjww\r\nW1Awyh7YyXuLVb8Gvs57d+tx/MQ721pM1JsHFwYnkO7RQzaMc+93/RNhGrtF\r\nfCUXRFyVdyzm2RQXm6nldFrE+2bpgxiqhAU+fEXRbRRR+P+OiEzgdYsfRsSG\r\nbv6d5XVFT+Eeh7E6MnYMk+VB3YBhhZTFYg4=\r\n=66jk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"cd25161aec422ecdaa157c25102c4f0cf6c15db4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022520163758","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022520163758"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022520163758_1655743134563_0.7669998016275617","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022520164715":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022520164715","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022520164715","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9b98911582bd3910e8d5add4215b3596d7b3265a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022520164715.tgz","fileCount":27,"integrity":"sha512-2mKxIvyuJl9RhoMIj0AC5hMVsaFnzU8Tl7PN+eg22N5gFah2YHghmMWwvidib93rJ3EyMDj7TFjIMLpratlenQ==","signatures":[{"sig":"MEQCIFHGCDSSAWru3674eRV4dU54+aX3xXvqav2u6qnBroiOAiBXoymAjsOoQmJoT17jKfWDvbGTQbjvuII7rwshj/mq4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisKTAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBdxAAlXf5Ot8WR8k33XprHOZ8mX5ovl5FIv+m9RyPDsRq//iECKq+\r\nA5WhRHOcqwF2LisemV6AnSTuLkha+/l5+Vl/AfyujWzjRU4BHdzdZlMOu9IF\r\nRQodedwhdQD1SmDrfKJ7izY5Q82G5tWOnJkcPFi1a5RnxDmXcNVpfgvq43M8\r\ntEDZjdlbP5VDHQTNcQ8ziLbzDlde7oiHnaw+tCGRERia2dK02Zp/n9f+xd17\r\ngi9stGNA5K1S1AjIGBDmPc078a6nzHZZ6MBNGV3t1ZAb1nkY9Z+w8SHhtQns\r\nbHy4yYJQRGl83voNpdN2z2VuDOQ6JOH44o0HuzIIbTXHunbk/q4nvZaWdK1q\r\n8dr8u6AaNt+kjSe+9X5r/Y5fNqcos1xadOMmAuESLXpvYGjSyj1np0uXDaWn\r\n/gAM8SkHS9jHRRgNpK99v+4CA3IA3wFVOUQzoeHfLdSLTSewTMj49KAGpZJK\r\nwjWEpyldfOfoqQEkds67EBz50PXkIjp7uyoIvf8olt2nM2gcWpbMVeQ0oYEm\r\nYXMJ75ysv9kXbk+LxoMgmi6FmQVTjM54uK2sut4PRE6T4u7fLFt9oois62nV\r\n9BPFdcsy0gQ8SxoaNV+mKjnGMODo5HujgbBRMpnMGg/3txtodV9CT9b2ZX7t\r\nayjBIMMDz3w0fXG6XcPDgfLD3APOHBaAy34=\r\n=+IhX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"b958893bd458ee7ffbaf725a4185636f48b19590","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022520164715","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022520164715"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022520164715_1655743680302_0.0546110140081959","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022520164752":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022520164752","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022520164752","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"196896ee5b0869194c931e9199b51653f9c53022","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022520164752.tgz","fileCount":27,"integrity":"sha512-mxjPYgMsZnhfLEJU+3qbTT6mT3d5wv+V5EdQi5bfdzk7C9V944xM6bz3uCW1KjilFnQr3zdhv5pM8/kjyTe8DQ==","signatures":[{"sig":"MEQCIBZmSFA/MlSf4Bv3YiuB6PbO/2E8QJDZeUUKCAw1RvtDAiAVrnX3GPbd0dg8arYW3pa94yWqEIXq3HlLXwS+Wtwfwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisKTkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnAw/9FwKeag/NfQZB2cTMcxq8OWkTfq47XRfVQLnwPCbd/mfDNFrz\r\nxMa+CLmyA4mBL2q8AVg8GCPQO3ZR7vRldUA1Gv68/Fr9DZmN+xj+ltCwFXy2\r\n95/Ij7rwKprmxpPxq7zXT641KqT/jg3kcl+7r+t1ErwTffreytDO7obNhFQP\r\nvqVb3sW0OXWFDZOCmMG01vzciJHs2VQAYytQb/YkJOyEWyWnHhGGwwMoyocU\r\nYKC9YRAJOxk5ElTcZUh284n4U6sTttgkICVw446cgRmle6krYnU4RV9righJ\r\nZMmatbhhFKkFsgsJaJaXYnIV85SDse1TMLXgazSijlHE9wkkSMDN2Tq7gl3w\r\nJqOgnvsGdv7cj121GVKKRn+gZRmjjq+bAhU+zX6VDWgBCr/bkkfUYNbC7vNu\r\noHDW+hQU6ygQK5c8kihblMD3om7LQmovWLQZ1TYRD2WkKIMhcKvoJbZIAal7\r\n5pMFM2yLrifmRaRnZDOCl1cCEyvGPM7pAIK4Dh2hYTL91rKfyRCsXeFoWRjA\r\nqRhZOqiCu5Ue/mJXgvL8UavUrKrN0+6gOMkE5WtOgfp7udZNM2JCNYSoZ094\r\n5SVGG1KjcIQJnfYglgIRSAR3BpKN8riFj+/RJooodsvZsjB2EgPyq85bE8hf\r\nBtIQkEGbid/M5SCzPFntrcRZgHlFYZs0Ncw=\r\n=2YnG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"3a9cb998b509535923e2673a2f402900151d2a6d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022520164752","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022520164752"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022520164752_1655743715935_0.6784796491932625","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@chakra-ui/system","version":"2.2.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f58226e01917a683f4da07db3ad2b43c27d174fa","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.0.tgz","fileCount":27,"integrity":"sha512-/oK4iYqweT48TBy/T86NTTjBcre4wylu5fcyWHK+LK1cj3vI7opgKoLdNsgzXXjThbd0BQmfY3ljdEeCA3524Q==","signatures":[{"sig":"MEYCIQCwI5VLFkEF+n48IqynDDU04H7/SJWlYP1F2LuO1U1TmQIhAJxXdEnLKCdH8YH2ljCot+F+Tff/afhrN784pWX/sj9I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisXevACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Tw/+IY5OyN1WR3KFRrMlu5jHOy6y0mAvPWKtK4XkDFVUnRwnNkkB\r\nQVMYf0PN/6sNiUftvS9zjVXk0Afeeou70KEsabaELgUQbO76l0E5UIE0/NdV\r\nozBnZLD19UlXAfIdVbMdpVgG11+xgirTKuHH/tutsiMuDaguEJp7ajQg1gOK\r\nQgVp2allfAmvEsSxHw51LOghvjhB/kioyeTbCyLX1krDF/D6HXjNzLK+LgzG\r\ntVIJxsM4Xx2i33UFVw57mYsYU2wyjDukLdqD6wikZJ9iG6QGpF3wsVov7Bka\r\n45TF7iMOZOqfagR0Ovi3vHbM5wycGWhYENO7pjQ9K84hGmsZSYRaaTiA5WU7\r\ngPOGsGEUapdBApVq/tSUK28ICEB8YEI1L+aM7LsREhCNHK0Il06O3zlEkwS+\r\nOXrpjve4G7jghXXEO9YRkG7lN54A7hz/tlv4YldsbqNvT+/nfLVyGuwwU9Hs\r\n+s6zO4efAkTLZs1WpHJiG4ube5kJEpmgn0tuIfOaNqt+ZUKspNzXhe+a+Xfy\r\nSaJnLFJefnHx3Kmgnh0Iz7+7VJRAH9UgLtNOptbNvIP0jXLGE0agN/m41MOT\r\nynD+6w9T8NPP4CNIWhEM4PM4hH3g+VyKRpul2QGtz8mMuTWSy2FIC9mX1hMS\r\nEnRslMrq9EzrTtyuVjZ7sc5X4knafkbZLVU=\r\n=R80I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"df381bf96076d99e875f548352476114776fbbc5","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.2","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.0","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.0_1655797679559_0.11750624764318363","host":"s3://npm-registry-packages"}},"0.0.0-dev-202264144818":{"name":"@chakra-ui/system","version":"0.0.0-dev-202264144818","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202264144818","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"774f95bf556b1c4f86332c984ba4a7ec160dd386","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202264144818.tgz","fileCount":27,"integrity":"sha512-FCK4eCT7Zp+xx/G1snIlVk3j9T4A9b/K+aDe/fIxK5NMjwj0JXdoVEAkJhWn+eK5ER+wxizubEcPoKnXJ+pYng==","signatures":[{"sig":"MEUCIHcwtKEw9PiuV8HUcL6neFgNktU7BGWRSx+vt7Blson+AiEA9e912jnwIRH8csOpvsEZ7fyBNGCcdPGgeHe4GW1O8Jc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwv3qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCNxAApHodFe5qBhu9+0ZwU0ahuVvfIuEpetV9SofV47fvq1lQuD4t\r\nlkKWMt792vRRyIIBuH8XvEusnrRWjeu7HGJszUFQgvCaTRZUKTuHfPSS6DlP\r\no9i29yLtNdIOu6od6/H96wyYIo6t0E9mpOR1rTNahjKDHWJ7y4v4rf//ZYkC\r\npLypVR5okwRV58OaeoAXlGw9W2mUv0QV6sMI40nGYLJsOU6pH1f0bzYZvbC7\r\niLC4i0bowHD5ADVDofGFa+bcYSrC60gD20d6rjykOLXO1l8wfjhabgL7DIDl\r\nnWqJYh66nqUKIl6PGGPfLGZpYJPuA3JjsN/tvynXOZjin525uCO3vgrnA7d8\r\ntOZbmrQKcd1SjCVnjNZc355s14NFISjZkHWBdYdpIjiTsISQn9Ad9Hb2/TJr\r\nGffPpYeEhVqDHATTp6cSXuanbpTmxvYhXO6p3uql7FNfpgESCYJU8MXjxjbQ\r\noQAtsiSjMHZ5K+znzsTjRH2tyQyJPx4IZ3unFYA/A2fYqqrOV+gh8tYEfKKj\r\nVuTqrdYd+u/40DHb/j5pxxzSPXULWCu3y05LH6mkRT534let0l5o8P6l5MYW\r\n62FGTXqLS/6WySuPBYIoU3eM4ftYnYsOMntCdyCHOhjmDrL4VgSqi+Ce5mX6\r\nei77F0jSQoEtDBaFb/JMUVZQZqqEd8UxvCQ=\r\n=PXMB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"1a20374c681d03d60f7f90961946e9e2dd29c4f0","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202264144818","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202264144818","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-202264144818"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202264144818_1656946154403_0.02001250309086955","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022659325":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022659325","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022659325","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c5dc33006afc55064e4badd71631899317c3e9a8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022659325.tgz","fileCount":27,"integrity":"sha512-Axfg4J8AwxrFzUZ7aBTIKoGr4Mp/Rx2g1GnsnCIXX/XheVsn7FhYOSzDuPB1inNwzpxC2hZAE7AWExBbe+a26g==","signatures":[{"sig":"MEQCIFcdtbnBHCyv3z1uCb92qgE/u5V8WuCLFmgOtUkVoc+GAiANhZQZma7AFFxelgw5rnBB/tbyqX8tig9ufL7gASo8gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiw/6DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAHg/+JlycG4RggqHSRHrcm51LebDd9EgNa2X0lmAVSTRpJXZcaPNj\r\neqIwOneJ+EZII7IJonHaVlHC21/IxggdiVIGRyCyYwDmyRBNTkhzmB6htpf8\r\nsFyo2VIP3VIxiwi2mtNZuHqzr6od3p2eqj8igjVB/LhaQEkbkkhR5VLwwxjV\r\na3iMN7C0EATylsiNaQ+RxnMQHv/HopPpJZfj8qrY1JJ37zNyW+4gsFSUMX1m\r\nRedAbzuig5L6CQDYHILjGg6wLVO0A8GcJJ1mjBk73dGpHW5qSTepvsoM1igi\r\nIjI1iv6DH6LpVOA5ZQqi479e5ubo+hOJPY5q5rvoy6eWNo+lWtttUJcz5Y7W\r\nD+oSoCIurQKOQ6AnoEGvh5qEcIlRf0oVxTpG0E9tiq9vMk0Os/47PkGae2r1\r\nKhjWW9KXCcQA0SM7pFd65Vn0WyXiP+i3by+XhqV0Nko7ojOGqN4pNaHL3iVc\r\nhhrFs+AUyQCQ+at8fhqtz08LaqDXBKhuyzDbqVKIsbaHJEqAh2apFrBZgekY\r\nsfdfMZrSi8WlyvRE38tFUHQYwcyPfml4ub6wyGw3RhWnEQpGa4e2SOE3ua/f\r\nRZTcAiFYPixPQbMoWq7HfdL19cdHzWGyDync/f1oZPr2513lYZ6e+G1htuTZ\r\nMn2GhAiZQEVfq67zdiYfo+oxXug8VSCtVaw=\r\n=xv66\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"daf80e3bce5e2431078206cd5edc3e967d4ada90","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022659325","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022659325","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022659325"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022659325_1657011843087_0.009341254042851022","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022659431":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022659431","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022659431","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"28d9751d0314d1f89d888b38c49c63b9012407d9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022659431.tgz","fileCount":27,"integrity":"sha512-M8bfP7brfXPfXg6v4y5mAEJBeErXZJ+C5F5LjY6drErG/FmjUVoTXIlxpIDkJDQ7kyGWWnqznAOiPXGFUdZCkA==","signatures":[{"sig":"MEYCIQD5tsFS0YnxOWAKNYnD0N21qoeZ4+iDoLbF1sv7mPC2hAIhAP2kJjsg/g/KupEDHkejLljF1f6n0ToiNFzxGBarq37Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiw/7HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryfA/+Ksk0fvRwTHQJFzdEKNCIyyELEnJY2ZMj9W3hMNxkI/Lh0rN1\r\nZzXmltvseNRy/pKWpG7g1IRsVVw6/sm8NmdwR0oHk7QCrbptXTc7YBeac8r9\r\nXpM53StrMN88k5nsL3W2uslyRVHelCFO02pHLMYeEmttVvwomrrPIz8aTRW5\r\nWVNNQVhtODirs8SQA6gGKC6YprM/fRej7LRyJPf5rtPXushjmSugu6FyPERJ\r\nldJz0e6fkgr+v48aTR4X+pX1P0kZ+JAfqYQgw8srWmqfChx/OeRyK5hJ+CjZ\r\npECbB9z7QxLzW5KMdpIYNmDCszB+o0GAZ+lYroiKcGUKMTF8CSRATQFkE/hA\r\nkPFKvwpy55NhkqHAor+xtDPc9x4KL9yJR8zPo2lDV5xzVZecyOAMt3zXVUY6\r\nmYd3kl858sy4br21CLRMyqvOTogrOCpVIjKOkyjlntL5MyZDgdKXPB/q20Q/\r\n/xX2BTSXo/kvmuULMoDlspq4tmg1r3egR7jrwvNC7LPNkA3WC2qppZFm1218\r\nOVzyMCH60BCO2v0kTY3OjUj+PDxka2HvH5h+CPEMZPAf7O9w0nwZsj5H4ek6\r\nJAPTIhPC0TY5zoe2HqByJlg9Dyz32CWVVTxyvaEz8ipUVUzRuJa3zCd9QRTL\r\nrnqK19MqO1vBN7CkeY7Mmv5/Op+6pV79fCs=\r\n=7Et/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"95c1c98a65355f568f713bd78659dadfaab6c850","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022659431","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022659431","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022659431"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022659431_1657011911161_0.4909623855380685","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022669710":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022669710","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022669710","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8180a8cf26a084ed07a6af71536ea00aec9626cf","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022669710.tgz","fileCount":27,"integrity":"sha512-Fs1no5YT0MNMR1bYiZKbwrAaYzQKE+jhp0H8CNc2jyVJcOJvYOmmZd/4kdSvVBX8TlTkDp2LHJZzrCi03fMtJA==","signatures":[{"sig":"MEYCIQD0u08vcsrPvLRQM6VrUyOL3EeIIp6+2HbyBIgotKc1WQIhAIOEfo7CEt+W7av72hiTTULbq+td4KShL6D0p/kyHMKC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixVDxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHFRAAisaEwGPxP6ezh0TyfF9EcGfAQ8Wspt6KO+ViDekdKORUQKlJ\r\nSHS751/A3s4F5lt+a52XcL1aOy5eUiDRmUvPI3Kchz6ac3OMutPlfkjlrTDZ\r\nD1uJYuXfe35NYqiEhmrFMUuHdg7EZLbwtmLBXHB2umHCgL8OcCxHYxQLQc7s\r\nXyoOmDsKHP2sy6Y5m1+jZsXCHECMVBugb+x9o2MqEqsenT/eY2YEvgBzld2L\r\n0ATps/gKXsJeqAp/CqEhotF+nYKPPFf1wvkV44tb+Y8UruImN8imrK5hhsP/\r\noq2o5UpPatH4hpxXEIoKMVmitATbAsAdy2g7TrM7BDe5sBMjXSjyZUfGrqIg\r\n+CWSphFeiszD4L1QWOjbU8Ow9PZ7fLqrkOGNiUSdI9ehorIskAqZ5kX4SJQS\r\ns8j7Jc0EhbnDJUPNRrrq9uYwE1z3uvYP8X3EcaFttw1WcjaQwRVUCrEbaZdG\r\nf34RMZVmV62mueo/kKhMnDFn+NyArtIe5RbgSRdKTr1tz+knDOZE/TohdnH8\r\nvSwdC5OVTDCg+p0dM+2C863M0EvoZ8DTzZf9f1uRPladr4PVGO6MppqernnR\r\nHVUo8eDw/k8Z3RWjwPvbix9ibuyjj1cbOQhqrdJN1eVgURjGCoYvQdng2GAB\r\nkRQnFTBIDgYDxLcCuslNBua5EcBh3LSxUPI=\r\n=+Ljh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"e2940ab6151d213732abb924cd7ac5201208dcb4","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022669710","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022669710","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022669710"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022669710_1657098481502_0.23232139958808418","host":"s3://npm-registry-packages"}},"0.0.0-dev-202268163535":{"name":"@chakra-ui/system","version":"0.0.0-dev-202268163535","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202268163535","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d7b058b2248cef567c1471a898c265530e9920d9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202268163535.tgz","fileCount":27,"integrity":"sha512-A9kTylQS1lf96mJvRcgaFiAl0eSRAiDUnKupg9aY0U9ODx4WSRRXDm0RlGf6qxfhfEj7H7H5SJISowbTVAhdlQ==","signatures":[{"sig":"MEQCIHhORMKSk+CsSM5pVqu1Ul4dkrPLkcUkpqfbEEXzc0p/AiAnVwlYNNCYtF32UJIZ1eBhlx+0z/yOBeVMSMtmuuR+wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyF0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO4BAAharHkbNLpxPGpEbGAYr/fsYMJsTLyd/DV/Sf8Wt/DGalkox8\r\nn2qLvenKWuB4JT1Jfc7C7KaRGwyRAtJanB6cPPxyoSZYQd1cOE4wxTwDerhh\r\n/NRPiU7rfhCYLQJx9daKIKfVRJEWdW5SJY+LwApK443z2Px3YCknOIejw7Bt\r\n87u3zB5IRmuFiPbpdeR2Lxz8zz9vLJQwBVBhaunpenRUBn+cFmLLPAv25prx\r\nfZyjk1igLBHFwV1Z2h7UADTNhxhy8KOn0h1Uzjv2ewdeZavkkKmWFCNVBjfP\r\njqe4rS52THcwqa5SyAJ7yji1I/daDF08HxCTvr3+hQzYlnm1xuP7Mo3o2VNY\r\nF0Tv6hEwtLAgbcoaBKrAeMGOOqVcmxK4YLh2oc4kpPqFR3Yig1p40pFmNiJa\r\n7TtYiSvOutY9+Vs+CHHOKNLnR6tptDtc/tMRYRZQoSGWW7Har9QFMb6/HMCO\r\nw6u1YScwnQxjZWFJhHSqnVso+dw0d3C3Orc6ZlHMiY3Gr7gxA/qqQ7SjG2OF\r\nbOADwNGKtsGujO0Gqcevxqvo0u4VC7bg5P9njlXnB2TuwyAj9I9/ywDCT0s2\r\nc/D9sMyV0kUeozPDjQpj1pdQdABIAcH13M7TnjUUYmhkDniZtABwEyLN/jyb\r\n4y4x4pd0yFAds44SgvzlajUcYlHDJ5Pte3U=\r\n=cVZe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"a08770bf04414afdcc5e2c7e8b088c75f5dd949f","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202268163535","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202268163535","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-202268163535"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202268163535_1657298185893_0.9998649843385017","host":"s3://npm-registry-packages"}},"0.0.0-dev-202268165050":{"name":"@chakra-ui/system","version":"0.0.0-dev-202268165050","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202268165050","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4065f7d939f6b4a4f38f611ef508d1809b4e5ddc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202268165050.tgz","fileCount":27,"integrity":"sha512-71l/35BDiVync/a8IfwdUwYAmjoJPrSIqPkY076no66rgXpZy5CEUw/O8Gcm3WS78dhQ/31fQoag3Zdeu7RNJg==","signatures":[{"sig":"MEQCICxvG2hvnOchiL9tUUodwC9c/PaEmA2SC7PHFdqlpjXxAiAoW15kdM2H2sfKw6Cf5uzrwRR4o3LjuWohoEfSW7nABg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyGCRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG7Q/+PjuzPfGlEPGwXJ6wQBokR1f3pZ+UF7cdieHLNoy8F36ZVfDs\r\n7uyjEqHmRqaCtMKY2GC3G9v0AHItLNz0ezcl0RON3Kzy3h6GzENFI+0z43Go\r\nlZY4JQnT4jM4hPzRCyumWuUlbBzDromtFsyPI30Sp86xq4y29phlfjADdR1V\r\nqZkn3lRYE9HSpcY3pllaX8FuW3nOeTSN7wicRWeUc03axyQT0ZNxOLZg/WQ9\r\nKX+PgkUffwOWPrp+nr9h3tksX2S/twaGHvYGrVS2jHCwIH4t+Y0Bl8DbThzC\r\n42ToGeSZAr8QUY6h5PsvS48fgUw4iG8GWUg7Dq2GQu9uetPfJXierxQFLtdx\r\n9DDAZZvKag+/j3Q6GmJbb+M1459PktgCS6+w8iZU/ZvVWZkQyqXKUk20PUC3\r\n/CzXi/90JEw9AyAiS2gRxN5hG5lyb+bb0mc2e++0C2ljRdV7pddUMm7ixWls\r\n5CuhCnI75NufeOZ5L4/vXndqr6gCXAqmU9wCxHQmFB7RA/Zd84ezhaDlWDlE\r\nkkebj2O90szLedpGZc0S4glfYgjsGgamSJ2yfdHf1hR5GPXXXVPTg3Ipnyhu\r\nBogwv6MdZlUaO1Qiv1rQsDqlsR4JTGwrZnMm9fcL9lWnFpCNb+BdBuNciLqb\r\nDZjfhpQvBkpb07GKhQSuawrOJYkzWX6lhU8=\r\n=YAnU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"8bfeefbb562fc5ada4757309db6b951c421342ad","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202268165050","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202268165050","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-202268165050"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202268165050_1657299088860_0.25799884172463283","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022610103716":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022610103716","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022610103716","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"790906ed067afeae7601c7025238bf838bbba370","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022610103716.tgz","fileCount":27,"integrity":"sha512-SCLLW0VAscthyfqHUhGH0Rw2i2L9Q1sYffoF93TFQ5+XeZUSt5UjsSMLGuX83AgWyPQ8feLEmxosMEX4i/mb8g==","signatures":[{"sig":"MEYCIQCLpijKgzlqPoKO/UMG6GwT7LnCdLMqx3UK+PorDEwJoAIhAJ73iIjUgqQ1O0Yt81w70QGNr+mtwGals/wydVPPk7LV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyqwEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm0w//VcMT9Jc6Ly+HeW2qXIH9qJ1Xl+RppztV0STnSPB3sbKJjU5J\r\n4EKSfV07LWwFOaVMt/oxis8JKonudWCbSh10JWROsgBMgFk07A8xon0FN5vo\r\nCA6on+hYUw3r2814cA9HwNhcrqwCabkH/4gyK2qFh76zLrHNwgF8FEslCN2M\r\nEshKm/CYUxR43Wzqk0DA1GRo6AIlq2g2CyLISf38w4phutdXPavZFRNEIeNA\r\nMshB3ES6mKwd1IHU99XIRUbb3jSxAK9l/hDKM7SEngQaZhS6kbg81USQZG5x\r\nQHJ12LsSJElXeIVf9tkn8KksXdP5dlf9diAcrW+c9dNdvgv09ZDEK/LIkEQe\r\nCOB16RiMivHS0aFr0l+feJcx/fKZo+AvFl+qdGfeFbeKveZeWITZ5cVX0Qcm\r\nuR85k4Zv+Eh7biXH4EYGehqRl1N+vRBAYvRvfCbshOdpPLyd/LleyBtmbCAd\r\nwOxjUs0oPsgB+JPgJUZzK8GXN1TUFeUVndpHBC0BXcDChgAoE/2ZAssd1S9B\r\ngZ0LA/i7g1aYVLVhx97HQU8QcMmyeU49ElA1IkyDObJByu4pfsAFo+Yuc96Q\r\nm+a862lk652g91MU9rm0Pn/clm7frNWzW2YNRyqK+RlfEimZ5b5++y9kR4GS\r\nxfwouaqhwsMhLIX0bvHfiI8aDBzmosPGDlg=\r\n=+HaP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"385ae812e7a8004403e2c7cf7d7471f782f3e667","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022610103716","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022610103716","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022610103716"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022610103716_1657449476704_0.7121861068741528","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022610103924":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022610103924","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022610103924","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"27293e87944fa05660375a6d954dff0dc306f801","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022610103924.tgz","fileCount":27,"integrity":"sha512-GNVJtSZNbmZj70XUzEkD7/Wi8XfaQokZxmJSCjcLurZMcxWQSfZpr8KS69cin245R+e4XO1any/xKZduVDTlhw==","signatures":[{"sig":"MEQCICD/ViEMVwS/+81lPwP34D8xovqC7s0IS+bGuO3YVyEaAiBBfIdKgCrCHGmKKkqXFkpjzCGJsHc1X5xsNHkW1gPGMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyqyGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrM7xAAgCdvAJwCFCnOMeAA8SH2hb+MwgPLBcn3QG1ncXMCHtPThFrf\r\nkZGL+u+i2K4OPsH+Qtofcgd5z3zJ9PjiAdW85RK3bxjMBygXaeE2ud34YIu2\r\nBZ3VsdmRa9sdM75ueb1KvAPcHMwwfappvoA8zBdC3RzQCZ2jr4ze1pUD0U3m\r\n5aSizem28gMIaVNe1JiPMsyKPXUXjN/r1oYK6kJbgURAmfV+aWg5dehq5Lb3\r\nGk59a32mJ4eYPoyJ+w6fAJlEpY9RfV//oPfxOLUxqskEGSaKclGRkTaxGLTb\r\n/RN+wchRnfBw6RluokpcXZhR9BjirJflemmUs27rZBuECiggiA8GUIzA4Hmo\r\nC1bAzBMtGGxtTHKLMLfvFjZMby0/kWg5XUJ4/5/btVG0hHCXaXDdKSRPwNdl\r\nAqWjBQzYH+/LJs/LaBcE38On+IQrxuRngCFojRRbdDH2e3yluHjaPIXcSBYD\r\nPmTnb3hVKqrAWOcrQHxlO4jGMi/23w5yqdT54KcVVeOkx6OlsJtAcir311zr\r\nYKYezYqsSn1qKn/Bz6mApIFfCM6C8spnsiHnEg8WiNPXcR+ZlpgAnEz4jdLY\r\nBENru3CTEfM+0TwmpVzBFMONGm4kR+08uTINSxdZ/jPm0dXW1B+vjQAL9TMm\r\ne8GZ2vHIZmOX1G3IvvLpprGofWl2BBiyKV4=\r\n=PEH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fa2c993f8383663056cdd4139d5dd3894900fa7d","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022610103924","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022610103924","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022610103924"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022610103924_1657449606674_0.5563192786363216","host":"s3://npm-registry-packages"}},"2.2.1":{"name":"@chakra-ui/system","version":"2.2.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4e3cb8808ee7c16d994088754e26a12ec212f060","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.1.tgz","fileCount":27,"integrity":"sha512-IIBK3Zk3YrXm+o1XiAJLLwfVu7bUIoY8mUTduTjiwIk7FeAKqa3FUOPhC9YFW30+MdEvWXX85Bn1pt+wh4na0A==","signatures":[{"sig":"MEUCIQDq5ONFK5MzUvmEpgq34I/UoGgwmuNqdU70nZ7jB4vtsgIgKRa4SqLNF7tASx1ng4mlTywyyVO86JJwjqqw/5+DP64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyrCRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/kw//f3j6fi/x20/T1VysWxCIJG0GqBepKhQgjpML8G74u82OeQ1V\r\nWjXR9lWFtDDCUmuZVlKn9PMHA5GZicNOGA601sRd1QTH0EgF+AEPu0hFumkg\r\nFfkJlbeEOXgVVMs25DPTuUoTLymSgti+yxsj7bfzI5uAc4cwUayqu5Hvht3V\r\nUU2uED3xJzGI2EQa+5JLwicmhH568hr5j+jDL4eb+PqmZbEoX3bp2IpQTDgr\r\nLHmTfOARnP5w40etA1+4VV5NQSl6NjukO4K2msAIEgODWHNbhwzA5kWKYCsj\r\nzAOyu8Fo+uxOXiJ/o0p1BFpxTcDtohHNLCR26TQd9YNxajy7vnDYrNHYrLJE\r\nrZXlrKNvX9W78at84Ht8283F8i4zq61Z74epEY3Itc6g6zD+BtT3yURfT33A\r\n2JrNec/+RCn2QaKn9AilGeY3+8YmXWEQkOTPYEpnO6oss50Q1//QybkjFS0U\r\nqz4b0SBbRKyfBNrbrz/ZyZdoZF5GFqszHo3jiSEOCSc7glRPpC5DPSIFLIDt\r\n9tRIgBJoGWi6JIvW69LxXmbowc8gqgRUaLN/iBR1rlTzw4DYdNrTdj0E1NRV\r\n3nVVRe3AhZ7k4rRJFCbS5TuxcFNnh2KBG2svIire2B2s8KtoWsbwvCtiG12E\r\nbVf5XQMfo0Qi9aGYr1gwRaXuiAg8pDamGts=\r\n=El4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"c80c487a43a449059c4c345cfbd2dabd31890c61","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.15.1","dependencies":{"@chakra-ui/utils":"2.0.3","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.1","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.1_1657450641023_0.13449284937117945","host":"s3://npm-registry-packages"}},"0.0.0-dev-2022612222012":{"name":"@chakra-ui/system","version":"0.0.0-dev-2022612222012","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-2022612222012","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"10088502c4cd45c121145d9fb87fdb934304ce91","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-2022612222012.tgz","fileCount":27,"integrity":"sha512-Q3NPuQP30KK8KNgxGGb2/2skk6F0aY2sPc7YNCnGWLna5l6f9phzaxAlEwfE8uGrMYtgfvTqY/BFAPHUALtqZQ==","signatures":[{"sig":"MEUCIQDQrAJd4z+tSC6/9OnOqlrbOehRYSaM2IpYCYNKYPoorQIgbwiwKJiDtY7dzj7uiVhO8mA+UNV5P0zoo3zBUIEltv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizfPKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOUQ//VsoC1c8efeNTgY0m+oHNQgDzBlwQI9Zjg7cS+bfBftZ4+wlG\r\neaYetX1JsN6QfUvKawJTW8uk1xgRiJu3x6QRZAZ6fywArhPY/EyOWTV3hooC\r\nRJTlYwF+E3Hg4DDL0YkldR2XSh1E46QZJeAEvzz3BEZoD6V0O4+Tgb8fYwev\r\nKJwgylcNaE8iqaD+50y6ANzUByeyhsYEi7IycXj+RyUT+7UzUTaqSisXjWIa\r\np4xDex+S1BCqIOVzFbBzOpVYJ3lQLT2Zabd27aAxmsMmLOKG6JWkodtZfV+N\r\nhvTHC8UrTrpMXUq0P/tYWhoDAJ9xylB2PBqnDoCYx7cf+L8aQA8nA5R+ivCz\r\nQRyqosiBzaUfOUSbpR44PdQXhy7B9U1PoUdUa9xooISErx2mS0J2W31FQIyL\r\nuZnFBSuRoTCS+OhTLRTHBX9ugtQPxJqUzAkMMjG7OomFft+Cv7Whcake3e42\r\nRoud+98uCgW0din8PTp4eO2jB1mzRyN39jIuOlG0EiLVIrq7ZYQ3GXsIzSgs\r\nNh72JYGAQyklGH7wopISOodCBHVulXIkBx+jBejBVeZnPATqH7FlvuNQtuWd\r\nUTMNg3Law5IywjO2fRle8ytrCc0DEQbIAvh45fy+d3YPpW7JpG7t0kL0SoUT\r\nc85HWhVhmJkZQPqzXYJB6W1E1m/gBXu6oLA=\r\n=OmPJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"46b495455fc416b166db18f5098ede7752b2e3ba","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-2022612222012","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-2022612222012","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-2022612222012"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-2022612222012_1657664457996_0.6938355431121519","host":"s3://npm-registry-packages"}},"0.0.0-dev-202261316456":{"name":"@chakra-ui/system","version":"0.0.0-dev-202261316456","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202261316456","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0610424cd2a5265ecaba36b649a2f32da8d5647a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202261316456.tgz","fileCount":27,"integrity":"sha512-/SZhKPNxxBTKt4YdkV1MJoGE/+iML1LtZmJfqiB7wE4ovWC6C8z6vJUkY5UWi+rPrLGfHojr0+AsxP3uzDM/Fg==","signatures":[{"sig":"MEUCIQDmw3weNYO4EeIB2abnZ4S2cnxWvbevC9uitpX6ymx2TwIgG2hedDDpu4mwLdhKUf/651q6GOLjff0rPzduy4t1Xzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizva5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCfw//fC00fab50FOD3W6JGz6O1hicUNBtsONQvr8/yXEPWELHRb86\r\ncjyYXDnr+/1eIzEaTeNI/cICKrI3Sw+ejRqn5MmghDK9lB2s0NpIZAP8ZVbb\r\nF7naJy3vw4bTxkhru8i2wZI86lOUB6NCQ+n3B8aBgzag/HmLckp7wtMPAzQo\r\n/RHTb42e7MCZBIqR7O8IAVo8w2FAr1rdMrKmi+Zya7ClKp5NhrMlRMiLWx7G\r\nLEEMgiDQamSwTPKM2LmO1BuaKBszgB0dJzwDPvkNoF/vaVmR0ShE3aK7Otws\r\nRLcHAwBkLI49s8huEOQY4i3yL2ISrsihtos/g1MkGe5YWrgLc6B+nHCB3UVh\r\nCN/seIeok2eM3cxwbaxaaLQ0+Ufp7LYWtO5R1PEbHkW0dP32aYsBgf+1HUhm\r\nqNdkjwmjQszYTujfmFkkmYIw5m42nUX8ksqSAjNRrkZObCmEFKxSe0qXYx6H\r\nX9i3lIt5zqCWQ4j/oiTtRhKO7OLCEqHK4aMWNViJF+mUvRq2y8TwZvUk3Fwu\r\n74fLurwADdwsO8TqLevMTUJxRiTxsTTC3nUtNg2oxOWMvCtl5A7k5UTxhbKS\r\nh9H0Vhg+3mYjUd9CyT4k8jDY6iuTq7bdyYiiHUcCs71RyWgs2LenOXaXNI2W\r\nvGmdhse6+9w2HdIVTJVp46dPNcZmHZLVLmQ=\r\n=+fLt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"fb3c09325d7bf58aed13c6d0fb1f72b92ff0ef3a","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202261316456","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202261316456","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-202261316456"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202261316456_1657730745332_0.2173655583914238","host":"s3://npm-registry-packages"}},"0.0.0-dev-202261317818":{"name":"@chakra-ui/system","version":"0.0.0-dev-202261317818","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-202261317818","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f334d71ef4db5482ea5f0f23a7bdc02f374bb137","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-202261317818.tgz","fileCount":27,"integrity":"sha512-yIbuWy7xg3MExDEEKcr6PR8HG3NP3Y/2qbgXRmEGTxLiUpGz7uKtI+GQnUTh3IHuH0gyMydREWkj1arUfjstgg==","signatures":[{"sig":"MEUCIHY5vFrTaoejLU2VjjXtqqzgqXAuNUi1M/GzjNkust1/AiEAnZ6RSihAgBByBEkWCMJwp5rRinkqrphq6zWiQ9oMnn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57933,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizvwtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUqxAAihBjuxuTzVZ2jQCrDzaX+z6BfbVHOSf9ixvZoIpL3MUdaHgL\r\n0ijjgwCHQlPwHeww4842jNFg7jjIp3iJ80GNZsBgKUYqwiqISktTpCWQloZW\r\ndod41PWEah6kT4I+1tfjj2e6EshNvycqtyvPxj6wAza8RERw3net/kKjwSkZ\r\nvP8DzFVUZzpA55NVjEyrTvL0NFGJcZcIyOIXhFIDhf4RaT76QotfZNZNq4c+\r\nW5Md15ACqgDJt7Z1uoEZatPbp6EEKBik6CIOYeCZmawPxyUDRiaFX1mAgX7o\r\nkz6Eadvti3bLinBVEvOEHBvvMPf+vNwRGgByG8R62yZVvW8JeMM5/jLUNM2v\r\nsR23q2JzMYIhkcb4LzgSdm/oySJwqESFI5XMgwN+7cpmV2x0P4JMjM0rXwV1\r\njt2GgmPBoT4on5GWNGWtmrD1Vbhgjzhd1Zrwr9qTGttk9uQIi5QtIjwoeKPy\r\ndXkmdkjc8Zxfs8D0rf8Z3rsMM2OHw2GVARiZmMqqoSTb9p+SZ8aqUBhO7T3R\r\nbhbdxLG78Q9IQc/H2exFeLBGjZz7iQeWWdn4CIJIvSV5Tpn+CV16CDgdlozF\r\nkp3cV1ub76ZzeWFGbmLKBUfBRcPsFjA/PYK0U9Wozvt6CjDV9dgvNl4tkrtv\r\nivLtMSHwE6CGFv9c8VDIc+Z7ElF82+ArwBk=\r\n=ujj9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","gitHead":"4beff94be65026ddb1d8c06c9e96f9eae195f352","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-202261317818","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-202261317818","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"0.0.0-dev-202261317818"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-202261317818_1657732140860_0.014944651496143768","host":"s3://npm-registry-packages"}},"2.2.2":{"name":"@chakra-ui/system","version":"2.2.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"255ebfc81eaaea6c2a7249ad0889c03b8cc99a81","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.2.tgz","fileCount":27,"integrity":"sha512-lo7QZSGNhw0HhvVYGRdP5cCllM6j5UL0S1syYu0gHhqNVu5qUrdpxpGsYqYK0MP7T16YReUoolPdz5UNVxVuLg==","signatures":[{"sig":"MEYCIQDqAKSmIALpB7aR9FxA9WQVqKam0RA0RIjlcXaHsCfTiAIhAPS02JTG6Q2/0yJRvTZcyU27cd3yz5BSXfTrwq0zDu+X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":57865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizxJ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3CRAAoEf19LcGNy7Tqljm0oq8ygh+CbnzqwTmgtwn8lLwvQiLmRss\r\ntg/tVkyWJrfHn0E/em+voVYXd9oCNhtHBht3WU99w7y3Sxu/LxvRfv9bDLh2\r\n10Qyj07wnkcVU9FCK5dLBR32ecxjmk4hwzn8pTZoSrIq/ug96Vox7BSpW7F4\r\nW+kDAKWrKmiBqi12GC9wVh1EDYqzR4Jp0trl/V+ifr1KfINALiPcn+FZrMcr\r\nVeA9LxfEuwCdLrt5GNPobqUKIQBJzgGaYMHZ6dSyJB7G2Hkt5DRqmXxvCiGy\r\ngE7LoOw3p1XOEOqXDYyG5bojbDXtJkQRdn8Ya0RwULwNh7EVpwb3bBe6bMwN\r\n5K7JeE+/7NSur/4jbwCftMRjpMgbjBBP1QqMp5+4zzLxaXv+RG5NSVMP+A1r\r\nRSSuOMc7/Ukq5gGkJuTLlKII2EZfMkIjm5dd4JgymoLXRAyp4x9Z68nDmZsR\r\n3axdLJ+RPqsf1BJeecaK16zq0nNdDYHzCLL9bUzwcZPlrndGFKgFlp9NJi8C\r\nAJirnYtIC7N231BTMYKfdbCpwgjFnX9eDznueOL7F9eyox4Xe5tGw7PkvttS\r\nl6g2uBTfj46mMN3q+rgCb4dkFTkyPRPUwACdgcqOjjllQTcYeLsIXH+W56hz\r\nFbMw4sBWU/4amXbuXzB3fuhAsq2qs2uVick=\r\n=14bU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/chakra-ui-system.cjs.js","types":"dist/chakra-ui-system.cjs.d.ts","module":"dist/chakra-ui-system.esm.js","gitHead":"5e6a402ac446e4ec252c1fded4fafb2a5a8e9970","_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.4","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.2","@chakra-ui/react-utils":"2.0.1","@chakra-ui/styled-system":"2.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.2_1657737854689_0.8228776245982681","host":"s3://npm-registry-packages"}},"2.2.3":{"name":"@chakra-ui/system","version":"2.2.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"83c7327b582f7045e20268357ebabc006dfe34ed","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.3.tgz","fileCount":3,"integrity":"sha512-BgqXO4L7an0Kw+gKgjM+Moi7li8FrwMYwxMU+vMwxvklYRjHJ1RXvgKs8vdxwuEhWXoCynqYbi6K1ZGam84mBw==","signatures":[{"sig":"MEUCIFt68J4AKcPXByMxd7V0LtDrPhR57E7g6BnJkzLdOV5KAiEA8Ni0JtQg+0IW4EpkuLDOc9GnAu8D7cxJdk3w13PY7fU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi3iXfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjdw//UUS4t9Jg2A1LHx0bsullzTwUNBIRynWw36l9gNBVD8n6XjXT\r\nHfseXzEIefmvmk6esIN1PIZCIbPqroju4vHx0E8OA6B2YbFCP3qvqSc2sglv\r\nL8DES3E7ZYKhGF+aYI41c0Mcf6DbDbhW6tdad9vwq0pNoIRvNUNoUSg+UmMp\r\npiyopmvYx8Ontzg7WULu8ohvXVv7G3t+8IWI4i2Oq6QiUGkM0jwdfFmflyUV\r\nwHU73gMQQ8oV4dFNK2hLEa6ZV/Ld875X+D10T5rVsw4052b3ADLjbD/gbNvh\r\n7nATsGWRq6/xIvCp9nuCjsrV5L66k5HdtpqgjhyqAm8Pa4+6YdLnTr2GbUdH\r\naahmjMmxvb6b6YzzvCf9aAX5ByD9boQMUGPHG0FwcaNWjYHiQzIpmKWSQWy4\r\nn9hmbq9wDTWKA0tZs/Hqq7uGJEZpXFokkcCDTWpiXXB8ox9aixEUqo40UfvV\r\ndPe9kFqciFo+awAJsnkBpt/YYtsctPNsfG2gIvzp76zWzXKVGS9L8HYT1Opl\r\nWUqoJmRnRLZMCTNhSxXYbWn0B+6QS+Ob5+QRS6IAOVhV/+JHlLIU03KV0IE4\r\nUF9EP1MUi/KLctL750Nhwl7W69ykqxNhP1hGsga2bRl6t2D74doJttdrxU1B\r\nmXT5rOFRjJWnK1lNCYH0z3ZCFyLE4Ss2T2A=\r\n=NSGS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","_from":"file:chakra-ui-system-2.2.3.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"tsup src/ --format=esm,cjs --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src/ --format=esm,cjs"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5669ccf4dc5c3e429959b4e1dec1799a/chakra-ui-system-2.2.3.tgz","_integrity":"sha512-BgqXO4L7an0Kw+gKgjM+Moi7li8FrwMYwxMU+vMwxvklYRjHJ1RXvgKs8vdxwuEhWXoCynqYbi6K1ZGam84mBw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.5","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.3","@chakra-ui/react-utils":"2.0.2","@chakra-ui/styled-system":"2.2.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.4"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.3_1658725854991_0.6732777686151026","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804193103":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220804193103","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220804193103","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"051f5dd533c99fe2b9863bd5541d589f452cb8e6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220804193103.tgz","fileCount":6,"integrity":"sha512-7X5gPlIA7KY1cx9ixGiMz+eHk1evNOV5StmzkuCO5B1ya3Tl70Xa1llSGMZEvmMwSMVqAs43txss5dKQXuRmEA==","signatures":[{"sig":"MEUCIDTEmIZXspDmTpp44i/4pYsC9ol7AXFMgStWTAhqnCOqAiEAp6zPGxo368hP0aLsEzqfs9g0yxI8WdQeNrx/uPIAyaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7B78ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfpRAAjLYnMgBvjcSnDT0Nu/2wuiIb2gkqzgoYbmr5n5Vk1MXlwo8y\r\npLdpDyHIpBxPZVx3OGbz6iOPZW41jHyMceRTHriGBMrPp+qCVCOo5D1CkdzW\r\nB3eOM3A2jMiRvcoEu+FtQJE2rOJq02XiGg1uXYTIV3Wu1I+DfsL5HBE4daih\r\nD7owPVVhDjGhpOPlia/a11NjLbeIjPJWFpapnc3kso3j4JS8d+8WSSUf8N+2\r\nwxZFLuMw/CXFpC8W/u1aijTLVEsfL1Zk8mqqGgncEXKUV7HNgkfYzfuCIbok\r\nnm79znGwwO//4IKuArVFK0Zw3EnOjVteU0ryc8hua+QLH97juaufxnbWhZ9/\r\nRSS8RjILRYKI67m/6UXm3/HNXF2MKHL4AgR4iu955KbMHuXDnq+YAO1Zc4IK\r\nfnpwRjSjF+VGirwvNe0qPU91QJQqqzkIkwDm5s6IO6q939TTDJ3WJP70isRQ\r\nW8hZo99mQ1s3CiRRXVI1n/MZ/rAY4uxqRBGgytEUsl/FWQ2VQv7YlYA9jrZR\r\nyus9Lj7KptW3hUxGz6xC/zeGagpNi5Y34AyPGkSZyw1FH8znEeoiOBXFkwda\r\nICiapYmigiSIjYPTDEpoZHGe6q+knmGO0A/ly8GSTbYVi7bW/+exNddePcsc\r\n3niuZgtJOqgZo1JhUvITGRFBp3KNbIV3ptc=\r\n=eB5O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220804193103.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/private/var/folders/fh/7kklt1bx7595wvjxfmcnvkqh0000gn/T/2c082248efd2c0e19d1c2b4ae4f986e3/chakra-ui-system-0.0.0-dev-20220804193103.tgz","_integrity":"sha512-7X5gPlIA7KY1cx9ixGiMz+eHk1evNOV5StmzkuCO5B1ya3Tl70Xa1llSGMZEvmMwSMVqAs43txss5dKQXuRmEA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220804193103","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220804193103","@chakra-ui/react-utils":"0.0.0-dev-20220804193103","@chakra-ui/styled-system":"0.0.0-dev-20220804193103"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220804193103"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220804193103_1659641595798_0.4941922279560269","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804193815":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220804193815","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220804193815","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8fc2c4f80097de5a9cc7d7e82fbb7470989487ef","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220804193815.tgz","fileCount":6,"integrity":"sha512-e+fZmOUSW4TdJGkyeDUnYDlmert1dOJhvfJEptj8F40Oybrr6TNLBDnOSSAySHzU+TerOay4kLN4OscYF6r28g==","signatures":[{"sig":"MEUCIQCbzju1fJR2D2z0zjuD/b5pPD1/82JOIbGtlD/3N57+HQIgZbp8bflcMB0W+vsbXKhoY9kLcH+Q/sMZG/vO6jkPpbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7CBXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6QxAAlh5rDFVM3flhs+hskRPZ9AVllM0G0k062QRvFjSTMQu7l2F7\r\nVl3HV+h7sJibITU7yokFmzRx18uLENJGOJTDE97RyMHrrW/qb1uHG84e06zm\r\nm2QztyTZUR+jOjof/+5tQPp+4PcQEz0p4P68jc79aEuQg1QSIjSDzZjrAmZM\r\nEoB0pYhb9Xf/KzbbCeg/loCs6vf1+dA2tSddaIFJwFQWSgvdKp3vuO/vivS4\r\ncMTuce5e/pMYzBSqj+f2sJb9q1wKQyKQa960E8rHe0gTk8iLMpziRcxtC7sP\r\nB6jF7pmA0zWfrrD9iLU3KCRqj1hkEeU/VkgPsM1Gs2lGWfIPweTcsjP+dLqR\r\nW/uiIcQifufOnJFv1Gehl7uBqAYLFziN2vOAYzxsVAG81Mcpm+4TRhQzVyQM\r\nbz7EZOZ5jMriQBRrsq9twY7FRxOnI6FkeqLspsTJeQJ/TML9XLr7Whqboe6y\r\nrOqJjh2n4FzBheAZ3ZFGv0y6Vscm0C0mGJ/S8/E1QIkAd4CqbyA6dk2XkuGz\r\n/qpxiFYyunG/29Bcaj1swY1qLwoVb4JRrfO1fzJkzC9+TbPaLx+97IY1QGlA\r\n3iHaeVa5qvymYiL/dU/xTfTiMCvtf15+Rf4dlpnQsmBDyCh9mOZvGWCePRsn\r\n7BMNuXINoJHVYkbE7jIB9yySgkheL5jKM8U=\r\n=KTaN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220804193815.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/private/var/folders/fh/7kklt1bx7595wvjxfmcnvkqh0000gn/T/a1ebe8c7a24b2c5da24d82f0aad59fc1/chakra-ui-system-0.0.0-dev-20220804193815.tgz","_integrity":"sha512-e+fZmOUSW4TdJGkyeDUnYDlmert1dOJhvfJEptj8F40Oybrr6TNLBDnOSSAySHzU+TerOay4kLN4OscYF6r28g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220804193815","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220804193815","@chakra-ui/react-utils":"0.0.0-dev-20220804193815","@chakra-ui/styled-system":"0.0.0-dev-20220804193815"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220804193815"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220804193815_1659641942824_0.8231182205111462","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804194739":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220804194739","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220804194739","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6301398dc45fc63b3ce2c821fc01b461176676e9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220804194739.tgz","fileCount":3,"integrity":"sha512-+O+Z5+NiHCfNjr4aYB8j9cRn3nLfwjA2V2t9Sey97t2uo4gjaBDBT5gEfl75WwMxsNUXAtmomwP66iSrAe2enQ==","signatures":[{"sig":"MEYCIQCn2vuc7cnXqOhfJjpSWmeRnLcaTiUtTyFBVjBK5e6aeQIhAMsrwvuBSWDU8QD/FsHk1N13Hz5tDhNTbysoB/m5/qh9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7CK2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVdA//YfuunxZJLhTjEZMIs2OS7NjxIOBYfCAx8eZ3SiGVu+ajd1AW\r\nAPhtDzBKCnqPYKXlecM+bxrNZe3woD5hpjx1Liv9TMiliSq2YzKIJD37PIRi\r\nistK0dTUC4FUatyEfBwkw1qu/Ji/gOAKowMXl1nfgINLfWPZnF21Rh3a2xNX\r\nFypGqIbh4C4B1MBLdIe/O2a3QbmcrNK54TAt/J3Pidufjy7Q+SjVZtkv5+ms\r\n8CZMM3YDZXLjlwAk1zD2BVrpU4A3+IEbmqyJuzfp9mygKpEvQ2c/4zC8IkPD\r\nAYTkvYdkdmlwTWmUj0DVADnxoes0cZINgIPDWVfy6dCMyngSKDazywCSeEQy\r\nDtDFmaki0mTytNbHSv8s7tzdWFGzH6mZA4dmJ6hMDOyTajse4ef6+SVLocbZ\r\n+v1UzCjl+E9GLtBwp99gtPZ79xl3ixO0xdGIY0mQL5yqhKueJ59ulyGHWPyw\r\nzJkEnugN3xpnB8wMlogrVw4K+IVrM9JhvesCWCxn6dNA9IHkyIjg8ij02lY1\r\nNxWng8Ic/iOaZkhMkeSJSXssRoe5Y5H/xgHawU9fqMget+hLnn8vXkF5x7Xj\r\nf6dbLZ17rjIzmUxQhZjVfA3tnrKoYzJJv4Wgzgly3AMp5HwZQI5EumZvuCpm\r\nSGtjsYoQRcRlDAD1FdcbzUdXAFdsVFj7YzY=\r\n=sePR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220804194739.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/26d7155cc625dac5de4ac816de78a411/chakra-ui-system-0.0.0-dev-20220804194739.tgz","_integrity":"sha512-+O+Z5+NiHCfNjr4aYB8j9cRn3nLfwjA2V2t9Sey97t2uo4gjaBDBT5gEfl75WwMxsNUXAtmomwP66iSrAe2enQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220804194739","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220804194739","@chakra-ui/react-utils":"0.0.0-dev-20220804194739","@chakra-ui/styled-system":"0.0.0-dev-20220804194739"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220804194739"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220804194739_1659642550358_0.6418541137509859","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220804200605":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220804200605","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220804200605","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a4e5bf7abdfd60d1afec8741092494cd83ebd2e4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220804200605.tgz","fileCount":3,"integrity":"sha512-I8C/0FJS3O08NHrFD/RLLZ2T2oDrGyzwO/bjzBF1/x8yhdkW1flegbrVZOvzoDuHe0gtm2U/TI4VtNDscZcxfg==","signatures":[{"sig":"MEUCIGLGJCDLOIP7NArzHA0mLobV5zRJbSKLg/RXtt1X1CsyAiEAu9QS9Yz/f/lY90MAQfiBN2a9dUVuuKV6qRcadLryGyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7CcLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsCQ//YkApoV3qwAJkdzzbUox/3Z7MoMIrwTrCEnGa3v8x6IKz9TQI\r\nF2fBu7hLMNwt8rKdafXuSbMVT/wfo3UdTi/caxI+UuS60YDXLSxphXksEF5+\r\nJUMlGX/cwW2fgdHCLb7q0F7nxrgXbCsZR0+ep2jYastio5yhrRaCaGeNOrIg\r\nkOW9umQs7xQlJfHwt/55qUYTmVqqYDOG2DyNkV0dR5CgCQo9QEw60Q7+XWY7\r\nP/gxYQyGoqLc6Cbp2ju8evyOBFBNotK5udDdR0BXNOWtcO89DmJ7O0IyRSmu\r\nCD3GeNAwUu709xAzIgqWBQj9h6HbIfMlI25A3KPSDUC0wpnKG4OR4igJ3IUg\r\n/hu/dyDGbnNqq0ALtYEo38np8nPrua5bCGaeffTLm2TSCCvnFJx46PDgarbt\r\nAqXff2AtNXYlZi2f63BsPp7D/CS/B//XwQNxYX7mb26cqSqQNRfAVWlzwSw4\r\nadvd+iR7vP62A5/2ycOzDTn49AyAX9lyFf6zQkVNWRWs5VOVKeOE6Gj5sUOS\r\nE0cwthFZKhlZm2jzXSVogORLcl5zpJpsuWjyVJn3ovn3Hh2GgWDsfs7Bjk6v\r\n/tuGOts+mDNMxdWaPdSb8SoSxdX+wGFDE3gN2pkKzxUJyZh8jK6Hqh/AASiz\r\n7Myxa9b5UkE2wIWceq2yszej+SCoyM/HbJQ=\r\n=clhB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220804200605.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f91de9941752ef1a63003aca56b3d55e/chakra-ui-system-0.0.0-dev-20220804200605.tgz","_integrity":"sha512-I8C/0FJS3O08NHrFD/RLLZ2T2oDrGyzwO/bjzBF1/x8yhdkW1flegbrVZOvzoDuHe0gtm2U/TI4VtNDscZcxfg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220804200605","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220804200605","@chakra-ui/react-utils":"0.0.0-dev-20220804200605","@chakra-ui/styled-system":"0.0.0-dev-20220804200605"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220804200605"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220804200605_1659643659122_0.6298997231975298","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220805062318":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220805062318","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220805062318","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"87758e32f5f56be4dc4a09c8a500c7a0ec32abe1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220805062318.tgz","fileCount":3,"integrity":"sha512-4dKck0xKkkjUwTsT++uGBrFKHblHqPCMEP05D2fTv0VN0iJF/2LYzkq1Uc03z4A5zo3GlntbN6aS0npu+d90yQ==","signatures":[{"sig":"MEYCIQCHyQrvoIXPlF38a+u/mkIq+MG2PiAO9eO2D6cFH4NGkAIhAM+YNMBH3353ycd1n5DdXzddQczwGVubYmBklc5Gn/7f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7LerACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB9w/9G85wzogtgu3giauz6mCL6s/lcN995dBrtHNb/J2hJqmlGXgU\r\n2s2kMk2/pXkIrqKhSaVI+y4QGmaGNsbvMuxFPv8zxcC+QxeRr9FCaAXqfsmw\r\nMjCeT0i2scoLe6771Ltxh/qeQCDmdLp7LGQQSAIceMxjAlaHr6bqMApbgg2x\r\nP1pE9XTl0WexPvFIXD5PcoP2BJJbI0DX87BT7WGMiepomJGb8Xos4+5OrvTF\r\nS5z48Y8ljgWT3DVO0l3ZPiR/2k5ZeYcuFE0uueu2s7oMd1GrMB2hQAtijrUK\r\nNg9+9f/GzhFjweM01oBIv7rc+KPSsY/VG3YzdvT+Q5+OtJEiizeRY3vIZUDa\r\nilMejrV+Zw6vKLarHRrCUw+BsGIkGAOagV/R4lqJ+dQqb4Cx6mzZpuXfbT+8\r\nGnDc8+JZyFLlKl+w/fmqwujoCnE+5YXefouYjNDKCq1YxfUIlZOO6/LOPr6/\r\n2gJg5osD8D9fG0DMOfCBX+EIF8Fjvvw7nUHZuMhhles78a2hWeGFu8ygUmZD\r\niI2s/y0xeuGOf5Tb9F5sKlQC2Z3XN24zwucCXM7WL0vzok31+8sdeKXXyeq+\r\nmCUZuBCqLIn3PVus3ZScxOeNbDb3tBJmsBRWFv1EVBKos/QXAy7ocDeEr4jB\r\nDWTKqkN8oWbBYhshJs+UK8lbHiFg27m3cGE=\r\n=5Q+g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220805062318.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/eeb13ac4ba85e1aab5f38ef3c9a58d19/chakra-ui-system-0.0.0-dev-20220805062318.tgz","_integrity":"sha512-4dKck0xKkkjUwTsT++uGBrFKHblHqPCMEP05D2fTv0VN0iJF/2LYzkq1Uc03z4A5zo3GlntbN6aS0npu+d90yQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220805062318","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220805062318","@chakra-ui/react-utils":"0.0.0-dev-20220805062318","@chakra-ui/styled-system":"0.0.0-dev-20220805062318"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220805062318"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220805062318_1659680682836_0.8002625524734699","host":"s3://npm-registry-packages"}},"2.2.4":{"name":"@chakra-ui/system","version":"2.2.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.4","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fdd399a180584eb1ed81f98623f68cff04cae100","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.4.tgz","fileCount":6,"integrity":"sha512-KAqnxW0MaiVYd28SJKYJ6x4qzlzEJZKOKZk/QtUb6UKPBWluusWVVRfXQc9KDhKwy3r0DLWP9pzfnDrp+D3Hpg==","signatures":[{"sig":"MEUCIQCwUSCjBWm3rYK37OA+9Q707L+27CYcgFTqyMSspfa/QAIgEpmoY66Y955fWWa9SdClBCnT3sXRWjumGqdDLCSMewQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7O0/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2bQ//QYvxZ8BR+IoWTDfXUVblHorVFkInpamFs9x0GLxRl56UUaeW\r\nhYN2G08kckPF3E9Vqpyp8nFnXRWK3XZtDZ/hsWeM97/I8Z6bF5DmLwP5Kxa1\r\nW1irbtqLOR6Dbey4GdAM1aVkJkNrkcxaE8/S0WLU4hC60quGgoMfeurwUiQM\r\nrE+KcOtrLKQVcMmtHJRYoXwc09AHcUCQ3Jscyy+6s2XWjwRksMevxRax+YLo\r\nu1QgVNCT/6U5VkdgoJldew0/pBVvdFeEzBDEFJ+TSNQEJgz0O/Q65kBTWKGf\r\nsZ0j27W7NeO4OuATF72f7jy5z4HaS9vurWQu4ndSpRU8Ds5xgfPCIpjI1aa9\r\ncvxOZHdY86U88LSayV2McDX5YoSn+CK/25RX8r9F/DXSnWmYXWNqYaxshgtj\r\nX0VagCn9z/eFyXXpRWkzQUdSnHJ0RihhSNi76dYHA3s09oC+1LjzKoSqw4r9\r\nBxQw486n9Pm4Jw7v05mHhNZDSNfuzZ7w1AlUvoCyz+q1o4MkjKAVeEK0I9Qe\r\nvlPdJTOnPGVym7ZbfudV7uUXH9mgwHtAiIahZv7AsJckiJee/5g1Rx/0zXAA\r\nEeeK8pcPet4bi6LxkJ5eyqwdzvl47wufCjIkezssmlUALiNSE5wrrQP2HuPZ\r\nXw9qCc9jy3pQ3BNmgEF7q2qkftNE6680UIg=\r\n=U6uf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.4.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/private/var/folders/fh/7kklt1bx7595wvjxfmcnvkqh0000gn/T/66046115550f573228a56f4f2f0f0f8f/chakra-ui-system-2.2.4.tgz","_integrity":"sha512-KAqnxW0MaiVYd28SJKYJ6x4qzlzEJZKOKZk/QtUb6UKPBWluusWVVRfXQc9KDhKwy3r0DLWP9pzfnDrp+D3Hpg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.4","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"2.2.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.4_1659694399276_0.6704031633943357","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220808075419":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220808075419","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220808075419","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6635ee5c58058c1a090c35f4052dd7e62f9aa43d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220808075419.tgz","fileCount":3,"integrity":"sha512-7DyRnQPDh+ID5/2LrdfuO3v/13Y4I4dsE14/6dViJ2ixwFsSr1NRBv1/rjQ2ZpX9FS2HxM57JSFgqYHzo439Cw==","signatures":[{"sig":"MEUCIQDFWeDH12ImxfEXsRVI4qGoy/liUL9s80zGd+mDfX9NSgIgZMK/s0Bpar8lfC6FSyBF3mkEQWGuUaFNt89dnU0q5FA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8MFRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/Dg/+IM+wAZZz91vUiGiKLP3cJfbBtFlcFT4r8t/D/FFyqO8wN78r\r\nCSdQA8y697e0VBpyBdn3OW4NXeum4W5r8sVjd2ihTxjSxEmQStBJr25O12I0\r\nrxPdAgbg0Dta12Iik8S/63fiLpBEhnzC9rkRXp73/JSZNeBTYBPJr8acM+yB\r\nbXCY9FIFfvO+vkjOEVSBj1J+Lk8vXu6UVD/lcnOTsThPTvi+HD6tzuEVCeFh\r\nlqJGrVrYIXQLLS1POluvRQ+AVKyTzvcug4kbWxHkORoMw5oeQEQZ+TXVfgi5\r\nYpBv7gZGWgQztnpVSaeH6/42rvM3c2BmEOWKcGb6NPGqN2cX3gaOs1cBRDev\r\n4SchdBIV3sQO6E+0h+0IX3MgLcOFdhWyUb8b5O480zAS0w+08iTZzFh3vOKU\r\ndhs1+dlId82iCO6uSzC48yDpJLLMJ2aybpfTaNZA33LeMMqzQVt3I3l9znE8\r\nYNqUW8Sjk/0lD5QXyRJ7bheXv4DvdZcye/l/gF7jzuyAR4w5i37JclZBGMwl\r\nHPS7Bcvv32Vh9CRvivY7VqV2E2jWR4/ZM5wEXW+ipRJ0o7ALRaxJKK5d5z1j\r\nlAjWfL55TI/C/YwW6Z0yePKMuHbYE+4w5j8ZgpRIdcJVLgoqTST3wSIr3kNG\r\n+0gm/zyj74KXxpKlA+jPQ6OqV19fH4cZtRI=\r\n=XmZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220808075419.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2fee0a8aa3766e9a919ad62d11fb99cd/chakra-ui-system-0.0.0-dev-20220808075419.tgz","_integrity":"sha512-7DyRnQPDh+ID5/2LrdfuO3v/13Y4I4dsE14/6dViJ2ixwFsSr1NRBv1/rjQ2ZpX9FS2HxM57JSFgqYHzo439Cw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220808075419","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"0.0.0-dev-20220808075419"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220808075419"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220808075419_1659945297245_0.02295334542827132","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220808090501":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220808090501","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220808090501","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a35bb187ce546d44677e5a0138a3dc71ec86900d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220808090501.tgz","fileCount":3,"integrity":"sha512-tXc2511/Hre6f3hNRbDayOUdv0+y6k4C7iN3CZfe+Ij9AI3rnOBn20QYQ9+GN1WL/DOdOj/6PIhhKWumyibDGQ==","signatures":[{"sig":"MEYCIQD/yKKngFIZFI54B69rKizxtuSeC8iPOraPDem5m/fawAIhAIAZUPIOc64g0a87fLf2zGig91vK1SNaIjN5zx/cFLyO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8NHcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeKQ//ZYKw99N5sQ3mhRE+cEI09eDjD8Z+7mr0KBUCDhYJICW3ZVtb\r\nr1UnzQcXqBXwx2ViK+yaMPhZCG4vdornWFQ2UnwMg5dGefCzOhL2oZRRKteI\r\n3yC/RXqu23QbpaRP9zxRzBv3LPQ52cFyI/Bd0v0FRWqUPb/0XJFRTPKTkY+x\r\n8L7asK0KZaKYgvu7rxzbCaEeMlQqJTcZQ5xn3+eyyCqd/DjnKgXaB5UN0iPO\r\nk94+1IPJwtDzwwJzvrwF+VmSSSe7MNYaODQHYo0/8XoNKQJbhULbKVijOCZ4\r\nxDjysbcXhe2pddjRiXY0s3JsEV5UlqLUTdjsq5XPM3KIHCSiJeyug6dOe/B6\r\noLr3jFv7lg6V7T0uikgGngjDmcNtVvwLQRskQ2OF026PEZVzSnbf8hLAnf1f\r\nEfuLpzx8ynQH9FOc1DRLAXR9SGNLbgw0isDo4BiWL2j4Spu/EV6e44Np8ps5\r\nytE36WYHUJjL0Fj1Et+TYJYkKZO3WfKUicYOY035/23bttfUDP5NiclHFdQ8\r\ncoppWnI2Q2+xtcdXbCeDNwerhfd3IBoemC6IYSbzZVWfE/cQopEhjoKQpUM9\r\noPVaOeOFR/VTLMVAweA+4P7E5jwIBCmiPttfbnVN8t/b2bvfang5CTgJGEsl\r\nFs8Xmhy44Mj6GOxE3XLRIgUhMv3ORi+/mwg=\r\n=wLeC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220808090501.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e0bb1a3792484c6edae0d0b2ecb4d1a3/chakra-ui-system-0.0.0-dev-20220808090501.tgz","_integrity":"sha512-tXc2511/Hre6f3hNRbDayOUdv0+y6k4C7iN3CZfe+Ij9AI3rnOBn20QYQ9+GN1WL/DOdOj/6PIhhKWumyibDGQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220808090501","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"0.0.0-dev-20220808090501"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220808090501"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220808090501_1659949531798_0.6662596055071117","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220810053106":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220810053106","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220810053106","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4212956fd43e2c2afc4d1a81f21ec11a4336ea54","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220810053106.tgz","fileCount":3,"integrity":"sha512-vVKtmZP5rqWHYV0ktO0QMJ9fsmQMx4+Erm8Wpa2KFb2WCiBNIRmTwWy2rieyW2pJdH+XCWoA5K9QkWGmKch4kQ==","signatures":[{"sig":"MEYCIQDNYx1Xw5SQTGaRWuuC1xeSG+/Z/pYzJyZwBBog9CEhnQIhAKHJWl3AYnMF1tVz1Po7O5jTBbAy7+fVuR5++ug+6jxO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi80K3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogCw//TfJ5AIuWXlsBD5UuKPS6jPBN8cs+TBCeCjvLonE6m/sRQqLg\r\nTi2YXCy56QwW1aNKHsiKWj9qNgby4+8KxSflXtJ7RiOaXZNmMI71TDo8XJwn\r\nhUxN8cqAx+iKGXxHm4opj8QlhbCxxUU6FIlrLfunjQqVR8bEY2JgryTK1aLP\r\nZRtNGqVxv3Wd3rrR9UBlXXwox5TOUNzREQ81IhhlVMqmNg30FsCmDVWw2bM3\r\nMT2aMB+eG2NqZBKPX2ce6JtZMbOBnRJPA2Erhd5eR8bGnkrzp9hdaE8iMYQQ\r\nebe2BiAS+KI+ukVYgcJwnQzzE8SA6gv/tKrSkz/dOs06lvRftogh3pJim8YL\r\nt+4gbHFZrs+EkJQLHbTofBye6sLDvT2MxgM701qEi28SZ1m2uXhoy/bsbHRI\r\n51Z6yOH5c3imzg5x5X+EY0CUCyouhAhEubJhXI9vEvkqHN/1Rvqex+bdniZV\r\nA3Sr2ajuqz4yZQH67TrE7SZ6oWyUIoAtv+EJt/ZuMR+DOnZNZGiNBm1Jb/E4\r\nzonUdc+MbGPQQzNhEXEECJnkBtptkRAlqqTnRSTrETICwoKE6w9IN18Ac857\r\n+s7ULFRTJPl9N4RFXkom3DuklrxYZyCzOshZQEA48ZKfd5hkF6CaU19gfIhJ\r\nu+TniZcwln4knRr3TdxJXdIfOybCyPLpBL8=\r\n=UOdY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220810053106.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e003fd318058f1b8b056909023a90c19/chakra-ui-system-0.0.0-dev-20220810053106.tgz","_integrity":"sha512-vVKtmZP5rqWHYV0ktO0QMJ9fsmQMx4+Erm8Wpa2KFb2WCiBNIRmTwWy2rieyW2pJdH+XCWoA5K9QkWGmKch4kQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220810053106","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"0.0.0-dev-20220810053106"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220810053106"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220810053106_1660109495373_0.3954922780771777","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220810112922":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220810112922","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220810112922","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"60ce1f67103c96f6e915165aa51b8b208db0e35d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220810112922.tgz","fileCount":3,"integrity":"sha512-6tlQlYMRrk6Z/ULFS7B7BxL7DeXPn3KyOmo34bfdIJfCdRbbtZREH5JE8AezSanTkI9RZbt71lnZgd0Pu9edJw==","signatures":[{"sig":"MEUCIQDI2AP/2vlDuIdHkGHspnDATdWsKzZWtilRSIqfWy3l/gIgAnFxLvXBMyS6aRIfn0BSIYiW2NMfkezG+LbaUBnK3Xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi85bFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1tg//SqpgJ14IWI7MVLOvhRWZx0ra82pgESKgEP6O40ZY7NGVhQua\r\ncWTlvaYaRYw/GOYA6sn6S3F6eOvp8lYdBJxqRoDKsLVBK29RtPyeImGZ2rLz\r\nSKnsH7QYZQXR5tN7zHx+HO786f6SZuX5+7j+5B7Ww2rmpt0kluMQoJF3R8TJ\r\n2ACFYkLgRb2QA63pLSma4rS90qxPT6F5uW7byitkJBZrEV4D1LjXa0al6mk8\r\nt/a/sExWHJQT0Tz+S/Ss3DL2Y3+NDTvZdjgPnLbYHSyRJBNHHQyhzGHKsQ2W\r\notZh6FqXfGj95nuFWHrBf/OKQa5r79nPW3jMCJVLkK9/iTEy5UJqKH73aNBy\r\nKJwLg5Lw6NWxm4dOMcaJMTrBYoCIkqLZM43n2q38qZtZKJR+2DiY0U7TFRqN\r\nkJ0kgLvR3fOBMJ+3SVhyQyLo2soNJaie0eVwRsFK+EcOzrHyEiCTEojhjBoX\r\nTgv53x3gcJBVoIuRfrH4AsQpdrJrV9tubYifyAO3zEJBZ66xrdL73otUCtU3\r\n65d4iuOXf7Mr8UanZnpH6oW6dCYxvWwqRkAk6yHhIhr35BFs76hsRvGU7TFe\r\nZI/7ChNXaXX8/uV9eFzQ0UXUK0RdMd9+tKf5jRv8ujxEermOV+OSbhGc+gqz\r\n9nOwr609NesKVzmFrOtr2c0jGO6NZWPFh7I=\r\n=fUYJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220810112922.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7cb0027d16951f3bf7eefc5297412ff9/chakra-ui-system-0.0.0-dev-20220810112922.tgz","_integrity":"sha512-6tlQlYMRrk6Z/ULFS7B7BxL7DeXPn3KyOmo34bfdIJfCdRbbtZREH5JE8AezSanTkI9RZbt71lnZgd0Pu9edJw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220810112922","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"0.0.0-dev-20220810112922"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220810112922"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220810112922_1660131013429_0.5664678466306847","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220810121727":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220810121727","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220810121727","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c8614b9359f3c99982b373b3e2a3292ab20eb8b0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220810121727.tgz","fileCount":3,"integrity":"sha512-DKO55J0ksZ50gkW4DDNY93o5O/5Gj15A+TPfUTKGC7gK+3i1IrTE6nRnEaIWQUIjpgV1LDTS/so6f2Gs8VpyUg==","signatures":[{"sig":"MEUCIQDtaYM9RXjjV9du2tTgrDavpJjBH9RkZc9pNV1ho8pNbgIgC91oP6y+jjOf2Z+OVE4+hZ2RrVi39R9wjuRuY0eB2a8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi86ISACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpc2A//WDbu9lVAwFfwP9Bt8sDZWs2sQjXhCnEPkYgmzInVa0+sPROx\r\nGtDYAOrImzEPiCG2o8bcmArlQq0OZBojqxnenNL0/7cDMedDwOqTCA7oZ/vo\r\nHGHxC6d7DSBXLpcDWWoCg6pYyCbd4LESwR37yuBSxtF/PFxeWEDtA7c14HnJ\r\nllgPNlVntO8Y3uAuzwmat4ZDvcHpiTNvw8dkCdExrbRgg+ovVU8t1Ho5cFe0\r\nkpgLddpOlJnoYyJyNnQElpdqH0LjlN3AuhALWMD2jj29eKsi6EjP7WemombJ\r\nx9hr6S7l165MWRDsvl4C2By19BcTsC4kWdRh0s8adqYevkvxuW5EhuX8JyPj\r\nRGHMOoQ+/+niN7naB1CAXQrj+lWNRtWHrAQ9Ii1OQY72gVWXLgU9J0zKS9iJ\r\nNgBdhPNj+AN6zngUpWe3ulWIHsCNtckQdgNRQdQx+VAcDeng1q88aAQ415dn\r\nkxOks1ShKv5wBWSAIMTpNntnDGCpWcCYs9/tCDBBMCUlcuVHNz4g4nxikddI\r\n7/QCYPBO6ebxetbhbWAfox9yki4adbontihiS42Lp3VjpKbf9iJkUfN5HlMH\r\nZeTsX1I6m+nXk6YIHrLxrBMMnS2K/5422+0clSea1CmqUSAYL0Gb6O14VEVR\r\nZoZP7bJ0XaW2RENHe4m+islGoKDmn+oh5Dw=\r\n=bhJQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220810121727.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c731959a5bef83876acc6022911671c6/chakra-ui-system-0.0.0-dev-20220810121727.tgz","_integrity":"sha512-DKO55J0ksZ50gkW4DDNY93o5O/5Gj15A+TPfUTKGC7gK+3i1IrTE6nRnEaIWQUIjpgV1LDTS/so6f2Gs8VpyUg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220810121727","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"0.0.0-dev-20220810121727"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220810121727"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220810121727_1660133906005_0.07788816305183532","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220810122556":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220810122556","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220810122556","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"93d71206c3b13b28fc3d91898913b5b4ffd1116b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220810122556.tgz","fileCount":3,"integrity":"sha512-3Stq73eeoveHKTtEVyX6DYb51G/B1+G7HoOV3VwNIX/Uu0hKqzvZVIqSklOMpwy+hjCqFuhDuX8OnawEAIBUfw==","signatures":[{"sig":"MEUCIG50wZPkk10OUzZO1nmlYFhvn0ocDLiXZ7T1L4GgMxGbAiEAgT+eLJX0ukpcSp3BGP1ZcHEypZiSX05hk+HxOHg5Fko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi86QJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp57RAAod5Lc1+/GeYJzPhgc842/1x3qKcTyA26EcIa5nw6WiYMJwQu\r\n2/MF9udDb3Zp1Mq2n9xaAC3qg5GXnKwkgWd3rYMl+lTLWebCt2CslFXOtQ1B\r\nqvcCg6VTgc8gQCiPh8AFTSFdSrSjqLQdPcrbyogsjBCf22SoHIYzpGHhIOGI\r\n0UogGP93kw9cGqzyPAyJJeu6uOgzREMUxSv2MyIRErqGioE36TTSWtnbQdCy\r\nSsJNYG53mOuDxbzVfUYoQcLAe3kKzZadgF4nStZxF5RM8VUEAu9RY8pbKnQ1\r\nlA13OGvyZJ2c++gc2HZueH4KPyNuiuAKe25HhIFTq8jJaCXQNn1tWTh0nJvT\r\n9bEw9WYOZkPVs/vn+yAv0T4jzzTVHNDiXRpl3icFCDzJJCshnuFY59yIx8HW\r\nbPBAv7BEKFXN8Hm6i2JYSGFGUyA9YPoplR2eJnBfJ29OegtMX4h3FKEr95P3\r\neMhX3LaKxJM8YSGHNnqKV8f60+a1KPjlUNIYJA1xeUbt6mJHutQ7pDLxwZ73\r\nQmUjW8kUQvgbFPQFrrCvPKvGb+3qrqYYjC7EhQGa3CRs1LW8pkbAsuj28owZ\r\nSh4o1Q6zOl2Ot6DiBOgJ8LL72DirPzZQ3Q0bsAFlJvYnloZNijFd2UuncnYz\r\nDkkDF5BSw6hJ06BCzNkpOHBjoC0plJDPpb0=\r\n=Svzb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220810122556.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d26576ea977a06bc5a1848f8e12e71d4/chakra-ui-system-0.0.0-dev-20220810122556.tgz","_integrity":"sha512-3Stq73eeoveHKTtEVyX6DYb51G/B1+G7HoOV3VwNIX/Uu0hKqzvZVIqSklOMpwy+hjCqFuhDuX8OnawEAIBUfw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220810122556","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"0.0.0-dev-20220810122556"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220810122556"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220810122556_1660134409225_0.5379616040906476","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220810124358":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220810124358","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220810124358","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b7a058fbba521db598d564a9ec730031388b672b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220810124358.tgz","fileCount":3,"integrity":"sha512-SR0kS/RFcinOTkDxeNw+fRM2tz6WlmjRusy3RWCZ5XiGU/Lke/0vFKgTUE4RwguCjsEoY/0iE0B75PiI6K7GEQ==","signatures":[{"sig":"MEUCIApRwyAOcZKkbiN6YaehRgyOdHCk8s4ciDs4BIrFei3OAiEAwSStnkamUzHc4qfYMIjbuByCPTnzM3Ya49PdislQCgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi86hXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Eg/+KQZEXpJPRglT+8a7koK6pv2wbNEfxcy3L6SFswWnbJ2TNLVo\r\nWzKt/r/fTEMX0zbvMyPK022jHenMabfFtOZIMilqBCqULCUEs5Yn4vwaParc\r\nElrXqV4r6dqDpXQK86Pn4HdwiY+CviDck/vP6P7sTm3SWz1fel5I3nvb3Kqm\r\nmqSHMXobG+BC1OA1Ah8nv43r7vERzU+h7bhmQG9hZaQuPjwSyelechR/DpYm\r\nGama09Har7v0R16LC/o1AleJI45vSN8M2/YHG2kqpV7eIQW8Cn1w2YxrW4Mn\r\n+dw5671CV3UImju3aqG4p6qBKNiw6GJSotio+ZZk5UxKOLh02mQDdpVAz+rW\r\nGopU80xwBgnibB2SAjU2hTWvm6Ru0t2vnt7p44Cv5/ccuTAGd5Clk5LVHLN7\r\npo4UmIDpfcLqXP/6JZD1Clxh4Y9eeU0Ss5mOwbqF15nUgP7gTEC5cd27myJ8\r\ni4HVHxofP56XDaxeQZcuasNf3mQA58AEbKQDtI3skFv+XcC0lJ9A/9mv91ms\r\n2KCVkWLAE8rCk/hsfTmVx3saUunDR4jtFB1BTOZDDkD/bGAiy39oE2wvlmsQ\r\nzb9hXeyGR7oB8TJuqrGz2G/RLK9+G0USWHVdtpjCEO2FZt8+5qU27qCCCGIA\r\nbmUeSdYDRlST4NjJweL90Hei/e/dxq6+mrw=\r\n=qJbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220810124358.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/47e37d4dfbbebf098340a9be21cf569e/chakra-ui-system-0.0.0-dev-20220810124358.tgz","_integrity":"sha512-SR0kS/RFcinOTkDxeNw+fRM2tz6WlmjRusy3RWCZ5XiGU/Lke/0vFKgTUE4RwguCjsEoY/0iE0B75PiI6K7GEQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220810124358","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"0.0.0-dev-20220810124358"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220810124358"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220810124358_1660135511661_0.4484170519930828","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220810132240":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220810132240","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220810132240","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"57cb5ea7e96813420b991aed0a2b53e426fe19da","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220810132240.tgz","fileCount":3,"integrity":"sha512-rN/kBKZms0qsdf4TzxYb2u5mhIcTd068hgWsDy/45e4F7aFbaLrGv+nN5IK4aExOwmsTnb/52XqpPo8b81nTmg==","signatures":[{"sig":"MEUCIQCf55aZnwLSSmHWXRlfw+sdaOpNGnFk6A/TAzVTt9ieIAIgaoFR2itC2XzYJDSeRWBioJ3Y7Gb9F2PTjWrCfYUyeo8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi87FWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo80g//ViUi6UcaNaU52sl2nGcb24vAGrzXhg3Wx8+/uOKQECDO4FFD\r\nQ0ubhE0ls/hYrguNiABLemWvVP0rU0l4cK0u8hlx/eXLg2OmXLHLM3yAs8Vc\r\n3D69G15FPKM/2Xyytv5WH6T3t0FI+vsKoOdfStmFGX7E6C6fSRTxjtA/DuTd\r\n9X+lhpqzlVaPO1dfQxfgMaQPofFBAr7F/oQVeSZbGWwAKe9GMs569MFzK+Pw\r\nnfmsjJPIMlSxE/xTmdKonlQuWNOuOO+AMWeU4szbZeOJHtPAWfvjzqtZoTYK\r\n0dWua8RAlolCQ84TVfQ+Ut6eZQ+BoavWMoQlTnXgwoV57dwowNDPTxl8MnIS\r\nAAJBCREphTgKqJYrUFRvrp2cmy17NpLIjiwMOsOM4n6gNu6Chg3U5BydVf4U\r\nsn2fkYDGVQJNtRP28JgMM1i1nLPZGhHbLec5qFxgQAiE0+9ciXG3Wvh6gv6i\r\neSDS4er9OfMZlv3GFkeaRCr3r1tw2f3w02JYX5gyvvpk0KQgSFoK1e1AzppV\r\nls039W1KGfvY3zWJqB62b9EeUj835LmPLGkZwnmO3ENLm9GmZ4VbBiOcf1gN\r\nO8xFqLi1wt683bqLWAa2i/jf5ASJtOc4N8QoDmEBnGh4ZO+rHkdxwIp1B3Qa\r\n13y4fCtwdXSydJDhT/+VYsdjVvoqbRXhlHY=\r\n=arxL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220810132240.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/819b663241ac363a35da4424e4fabe44/chakra-ui-system-0.0.0-dev-20220810132240.tgz","_integrity":"sha512-rN/kBKZms0qsdf4TzxYb2u5mhIcTd068hgWsDy/45e4F7aFbaLrGv+nN5IK4aExOwmsTnb/52XqpPo8b81nTmg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.6","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220810132240","@chakra-ui/react-utils":"2.0.3","@chakra-ui/styled-system":"0.0.0-dev-20220810132240"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220810132240"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220810132240_1660137814272_0.8164048248281628","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811084042":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220811084042","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220811084042","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c842ed9ef554f9531971e12e66ce70587aa8f3ad","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220811084042.tgz","fileCount":3,"integrity":"sha512-EBkbYCA4b86bEHDx0JJ6a7kMgDFTJK6VzG10WFyPPt6KqgtxvIYNe2QY2Pkivcfl0V6ZM3kj1ZC381DQGHfq2A==","signatures":[{"sig":"MEYCIQDVAsd34hzWih+aLuIFTbwOGxxdiriVkk5UOTbBjDEUegIhAOqz3BLZKVuGUuyhybvoAzS6gmGNoks5xWwVqkyD6cOl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9MDXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA0xAAkFHOxCuCrmMa4bzWTjK0AT4Nj/RrQigNzvIdrfKlIoFYsddb\r\nCwl4EpIVM84sth1IpK/IYVs4s3l4kqa4JSMnVwRU0yh+JW7fronzDQ2Y9ixn\r\nUEn9vuuEpckY/Dbem6txNigVwMwBdxHpSnE4Vw7e+MZV66Xe7YcE9wskr1rk\r\nyGl57zG6Xb/DwJt9sqRFnmhVpPRgDAC7MaUE7y+5tccymYYliLNYJF6lKVHT\r\nXmAAlCunDMgnmtDPwpp+ALpKp8YOlMZS+K2LIhVmPNAGs94u0lx+tk3ri+u0\r\nanMvqIdNwtCIwRa71f0dLtaAioXoknWT7eRd6a4CFTZWmRG6SZaRoiWQyYGV\r\n81YNY3Vno1ruPRCLzy2lDABpd7BrV/XxbRJkrA8UHON4yp2H7kKE6CXcVcY9\r\nCcPCB6G7X5zG0kRMMyjZauGG6NJ4GtFRTbXcYlvL1h4HD/cgTvR5tcK695Tr\r\nYEtaK0XbEF1wfapj5F8yvCE9rUOOjlpyvLfOvTzsx81v6N+vIp0u6/QpXPKs\r\njIU3NLyJPaVvh+1fRXpFzkgvzRlE7xp6vQrF0x6CUMe4+k+PIXkLWhVtIeIA\r\nL+Xd8SMOPCvGCHhimFyZlg/KIo1cPbfEdZDVXQ9oCyzdys0jQPDYWV3E3JzC\r\n9FakBndjRYHaFCi92fR2WKHVcG+tD58WIg8=\r\n=e/4I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220811084042.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b814b2b0b0d215da4bc0a39e6244a4a4/chakra-ui-system-0.0.0-dev-20220811084042.tgz","_integrity":"sha512-EBkbYCA4b86bEHDx0JJ6a7kMgDFTJK6VzG10WFyPPt6KqgtxvIYNe2QY2Pkivcfl0V6ZM3kj1ZC381DQGHfq2A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220811084042","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220811084042","@chakra-ui/react-utils":"0.0.0-dev-20220811084042","@chakra-ui/styled-system":"0.0.0-dev-20220811084042"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220811084042"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220811084042_1660207319100_0.8559557461196563","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811093515":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220811093515","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220811093515","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"741c5492a76b96f7b34d46b8ea48e54a15ca7bfa","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220811093515.tgz","fileCount":3,"integrity":"sha512-vJRLWnZYNF4JeAAfX8en72sEqRAGBpMxB1pM96FOBtqXQ4wnXzUTjyIyoJWSaqSmxFHZXRgLTrIGHzf1snwdIw==","signatures":[{"sig":"MEUCIAcGnZrG9fdXk4BHqsQkdg5d2lIMdxiscbTKpNSoPlD4AiEA6ja7Dkw0yO60jXKy0pBCvu/tJPFKcJG3XS/zpJUVPa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9M2ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomaQ//TsXa6ApfhKb/ekU7OAN7FQxE5RVmTT7sTBojBu/TgOcf/Qrq\r\ni9oZLumoyFlxRP9WuW3WlhlE9728xqFd135DHtqbOL99mg9JGJZz06t7ZjlW\r\nAjk56cCeLrfwwntZ9DoC/UY+wW2KDirX7MQpRJmGpcanYy3hMM0n5DgX7CAj\r\n5oqfkb4tx5kP9V2r1Lho5LhAXTdgT6ztEomE6SP3TBzDgaxTiVn5YIMBP0yO\r\nY3RC2TlJxzq4nvPAgZO05UIuz9HP7WeOBAFdmFey3BiXibBwezcJzGoj2bzW\r\n4jHlsPMTZknIITclzOyVtrZ3572ZoxCmdE9KU/7lhBTaEUU0ZhCxhM/jqt7J\r\ngATTnESbsOgOppSzNCeBcPd0t3ZdDHEHXXfAJahaYGRyyOmQINypwKB6mUGl\r\nc3ROzHJiCpT5/WEiJ9JphvXmy6csFiP1kBpAjnZiJ8tVa1YKCUt8mGl7mEkh\r\nK7NWEcp4XCwIDe5bhjyZ5PJdH4T878OGYHmRQ6MkZntYD3ace14GbvUfrtL5\r\nMNSrq37aQbq6+dPQFELXec07i2+M7uggHsKGelcYG0cZ4ZECDV5VeMhKTSWd\r\nBouEju6Q0o/azN0xyf+gvL5l7IIobVoc9Fr5xId8NKL3E8h9QOMxMMtk2jX1\r\n/hTeEZI0yDRWtAzQkI5L/9TVdmQg2MC3LTg=\r\n=b63o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220811093515.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6a6d19446e13d3b081e7d876846f7b28/chakra-ui-system-0.0.0-dev-20220811093515.tgz","_integrity":"sha512-vJRLWnZYNF4JeAAfX8en72sEqRAGBpMxB1pM96FOBtqXQ4wnXzUTjyIyoJWSaqSmxFHZXRgLTrIGHzf1snwdIw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220811093515","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220811093515","@chakra-ui/react-utils":"0.0.0-dev-20220811093515","@chakra-ui/styled-system":"0.0.0-dev-20220811093515"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220811093515"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220811093515_1660210585049_0.409943737461937","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220811160709":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220811160709","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220811160709","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"dffd8e530f7ea710e98452fef70788db712d6d77","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220811160709.tgz","fileCount":3,"integrity":"sha512-bC54/ublg88rMSqnw92o8WdGV3qUvL+uV2yjzL5FUFCiZkUPy/vcDlJJDetJXw/KwRNYQR9XUZzlbTZ0eT0YQQ==","signatures":[{"sig":"MEQCIQDO27o28LnUguBaDXvXWEICnQhxhJIx+yDv1DYHSGYIngIffKvdA9tBBfiES0LS1uJfEg3Pz97vzBXseot37fh1mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9SmAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI0w/7BwfJkOMnJzM4fLurOUzC6XEx3nrbzJeqnVazEqwoMBoAWF5Q\r\n5dDwCjmfZZXCvutFig5+5xK1SsAeZ7PlfMYMXKcggUhBh19Jd/OzZ1pzmUT6\r\nwZsDS2KJmbNoQj5Gu8pd2rEckK+7Q/BGS3XFyTOSLm5YUaeJAvVTc72/+e5o\r\n5ZhB2tbIKHlYPxZZE+5QXo75m6xSJhm38wcgk3MZ0hqrsILN8A8Zbui8o4Ny\r\nGbewIhAaEJY293Amm3OsVa8dvk/wf+R2oqaZbIAjG48tuJL140KU0uBQgbgJ\r\nXqTwufduljsg1qpg+zF+jkW00iKcuGdm4fS26vpdXNRTQWKjLEk1jmFgqppD\r\ncIaQynGeX4i4Lge1LcNL6s7fv7b+WkcAJgAZfXORrbp92WCwJuNrYXUS4z/s\r\nzHLbn8vxXYMMnp9SEej1kE8o14qI8lVyj0dkg5HyFogLXb98dCS23mE3TRA/\r\nxiJKpFNVe7rO9cgxhwjS9oRwJOp2Ic9JUxGPkdTUrpXK71YtYZfZBivFqg4c\r\nqTOeUs8opMNzojwh2xJR2WbwINAhLwor5ClDiKgssIzU2nRF9U2rxEA80m2i\r\nDFgXjKBlM+13GqFCev/KAo2ftCgfJLxaqixBO1Dps0soBzMoi6E0YUYNwX6X\r\nkuwnKKHGck13gavOU/QySGzVZL02MSb+7Uc=\r\n=jzlL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220811160709.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3c7d4bdaf62de24965e83d473d7409e9/chakra-ui-system-0.0.0-dev-20220811160709.tgz","_integrity":"sha512-bC54/ublg88rMSqnw92o8WdGV3qUvL+uV2yjzL5FUFCiZkUPy/vcDlJJDetJXw/KwRNYQR9XUZzlbTZ0eT0YQQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220811160709","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220811160709","@chakra-ui/react-utils":"0.0.0-dev-20220811160709","@chakra-ui/styled-system":"0.0.0-dev-20220811160709"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220811160709"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220811160709_1660234112714_0.7883519256029654","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220812060931":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220812060931","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220812060931","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"583dc0e9eba680c9573061e1c3be0dbd813af2f4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220812060931.tgz","fileCount":3,"integrity":"sha512-Chqdg/IBaVRXYhJ1XG9e5+tEK+wgEs4EmgLyO+QT2gPsied4q9N5f0q79Riy9ASuP1tR/zd0u0PQR0gmp3nBKA==","signatures":[{"sig":"MEQCIAwvyec1krYdmrWiLgxjJbdeTpPhHi78MeNBSId/iO6BAiAj+Mhay4ugLRLiry4Z/A/QG2gtn7HWd3Jo/mZv2ur8pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9e7pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphTRAAk49+ksFf31kcX0bEWA8nJ8TWYYRUSXDOqNzbkhJD7r75yFcx\r\nOEbf4Isq8GrNqbNdbwDHJwOm8Ksu/IVObzeWKFZnQ7tR9sBIzOKX9jTG6aI8\r\nr752DwVK9jE4N5AzRlcG4qwM15aCjQI+LUPr+ol7w3hYfh2kwvpw4v7o+yAz\r\nVF2Z6bA87ofahg1V1ZlFLgVQZApfDnji0IgQWC0KFx0sjj3Y3HrzMO4rSqfK\r\nHEiNYXhbKHRM3xE4lfX2RZoDy9g7XzNnIguaS+jv8n1NXBYx2J/JEqy3NPjb\r\n9+khKZ9aSPg8O9yvHzUXkJvbFP5OOS/5oYTtFy+ZbYkP/TtEQNuPHzuwjC3m\r\n3UgsrsOJVwKkY5yYkmY0BCMnCy+3xWyixuczxOpbsNrmKNaxIgJjEzfdZmnV\r\n3euFAuYZBF6ZeoG2NimtyvNUnRBlR/TUb1LwhA/sWoVyRDaIWRdR7chCuJQ/\r\nIGgRyXdyPh5gauUCaa7RYlqneAis2VBvz7dQKUI8v+qQKTkL/ejVmbLnQ8yD\r\n8znDxzJyweTKuu7sKu4XS+yNnOUj3+V3O972s/Z03PbeKy2SYcvMwvvq1s4D\r\nURkSDhxbc5tOEEVZpyHLtZbrb7yNvarZwnHYIObfwO3jxTYRy8NKvMd096Rq\r\ntwfygMqqtCNZNzaC3btxzSzp6SEZSrhCFXw=\r\n=3sOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220812060931.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/99e43a1f129928bb50c307d07de7655a/chakra-ui-system-0.0.0-dev-20220812060931.tgz","_integrity":"sha512-Chqdg/IBaVRXYhJ1XG9e5+tEK+wgEs4EmgLyO+QT2gPsied4q9N5f0q79Riy9ASuP1tR/zd0u0PQR0gmp3nBKA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220812060931","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220812060931","@chakra-ui/react-utils":"0.0.0-dev-20220812060931","@chakra-ui/styled-system":"0.0.0-dev-20220812060931"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220812060931"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220812060931_1660284649665_0.3137661407129815","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813051625":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220813051625","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220813051625","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9e0bcf8ecba7bd2fbd4ded9836ed095b449d73d6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220813051625.tgz","fileCount":3,"integrity":"sha512-71EEJd7ogK/JptIW7Qj15bTdcQKYr04qZBOkz8xzgXAaTB9HYDElOZ55DT3ogjiIFSEbKJ236d3XZTldMGSjWQ==","signatures":[{"sig":"MEUCIQD8FZzQX74Iwxg2V5UhPw5t9X+YkMw64vL1ZOaGgxHSZgIgQcv69W3YaN7zgNgWFt/1mFKSivfNpZacLmF46VW5J6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zP2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPAA//WnD9lBgNvrjQUk/lSOUnr9RVWmx5wKhsENn0uQzfRd5ivTXu\r\ngbNxrnbBxCZls6zkf0gaiNVxh5Mr32SRVzZfD5Tcq6Utn1w4lPEWVQ+77ru8\r\nsah2peUiOkV1QluHvIoZPA8O9q9AxyQv0IL5D3a5koBGFKXNRUda2OUvYb9g\r\nJ40Vhonfc1U7HEt5eO15i176Rq70BZNKTlgE5cRiZM1sOeEqbj7H45tX/7yP\r\n6iD4T8nY0Nim4o3LgIALpivyPAnH2DhwB1zQvxL9f95NU4lqV8tA37z52QGl\r\n1zbxfQ/l3mmXOIaI7gz8+SkQexyM0h4yUMdkhdkU2whjsPKTSId7+4W8ufzI\r\nzJm9mbPcEoZIOlsyEUfT20WLcLCPCV8+mNqJ8rdpWgGBoB+qDkY0SpFOZKaq\r\nqoC09xYh5ErwLDfjFy8w8LWEH/lakCGCMRVtZFHRCNXYo8HoCuHYPSRoyx8Q\r\nr/B5BzN+ZOQMVpb58HBbW9gALa0WqUgznNuVGPMR+m77EWCciaXu/Et7/r+a\r\nxub8umsbxQaOuz9kPj1KS2tHIK5oveknlSLLGQrLZbP4i/cTjZf7QmPRMRl6\r\nBCg4U+L62NCGCvRbfQrJ7EqraCiXabYctF5fpwyEs9fdjanpIdiG50EOSlDX\r\ndv/zhUXk8cro6Um9w2Lpj036Zk29CmsxQnw=\r\n=5z78\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220813051625.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b5dbaaa9fc84af7a1f6a2e85dbdccdc1/chakra-ui-system-0.0.0-dev-20220813051625.tgz","_integrity":"sha512-71EEJd7ogK/JptIW7Qj15bTdcQKYr04qZBOkz8xzgXAaTB9HYDElOZ55DT3ogjiIFSEbKJ236d3XZTldMGSjWQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220813051625","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220813051625","@chakra-ui/react-utils":"0.0.0-dev-20220813051625","@chakra-ui/styled-system":"0.0.0-dev-20220813051625"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220813051625"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220813051625_1660367862300_0.9715804268316284","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813052715":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220813052715","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220813052715","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7e7560f1bde5f7de72386115a6e3b214354bb2a6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220813052715.tgz","fileCount":3,"integrity":"sha512-DDzzwd3TiIC30HXaEekulhlUzzMUW3rHJ96v7nc2VsT+9Ufqj7ZiGz/G5xbLhpBROMGJfdDAMNdVN/Dc2nRI3w==","signatures":[{"sig":"MEQCIEQfAO6NQ4KHtWSGpGAtCqHKFOGfErcePzY19QgnzpLcAiBUzvqIHqjv/drLeporaxcRVCFLicP0/QXQJKGMU0u0tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zaBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6bw/7BoBVHfrxVTToQKQCTsT4QNw0jqbpww2JcnqLkBDCvHKBj3FM\r\neVb89yp+6yUdvIovgp/nyVGtRqgiJIcVBldmGq0tYcbkkgV3JlkWV3UjLsAh\r\ntRcLvjO++x1akKPFG3W7phqt8FF/GcKtHZBLthNRoRI5rhvL23gcGcq3N30g\r\nedWajoFDyln/9EzTr/vZCJLXSbCYlSlLvvNnEVFacB/nYH9q3yEzw/XitHgi\r\nERCOBsFmPV2siewBijf3AswSfY0yyLbKP1czaLaEM9FXaBAffN1i7lt7c0KE\r\nPz7RnHLLKdBVdnm25BJKd1CtBiHqF8DLhmJunC1PB9f7sSbqQNMznmxkT4gG\r\n1rQupv/6h1Nof+RTpJIfGoOFBqV1hkEen8XyI5kSOJosTtSP9Ezt+kdUp07y\r\nbavJPECx+EU9j9mwEqUr4MQ91YtAeEav29vOV30OJAHPmBRoHnVZlIfzI1I9\r\n3P9jCF/gXijMpQQujhXMK5Zv5hCciX0rBfGYLYYzclcPa+lBrlbblPtrxgMp\r\ny744GnaMwNt3IjGEL5GrUY2j2yi9Mm0DUsEBzfr9px7XM800Ze6FlUcBxqT1\r\ngUt5PbbTuAUB9JuYfr8TaI7izl3w58Lozb4EpBXwKuYgjXs9GJ7Jfce+LEak\r\nECyxKR+34+GROvIsXr1ZNfOocFWEAh6vG18=\r\n=iVn0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220813052715.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/93c0d27b2c7cd58b1c553ed1091a19c1/chakra-ui-system-0.0.0-dev-20220813052715.tgz","_integrity":"sha512-DDzzwd3TiIC30HXaEekulhlUzzMUW3rHJ96v7nc2VsT+9Ufqj7ZiGz/G5xbLhpBROMGJfdDAMNdVN/Dc2nRI3w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220813052715","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220813052715","@chakra-ui/react-utils":"0.0.0-dev-20220813052715","@chakra-ui/styled-system":"0.0.0-dev-20220813052715"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220813052715"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220813052715_1660368513238_0.21352171515434337","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813053727":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220813053727","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220813053727","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5358059a5fbafdebdf6fd2b43cdcb1d180c6f26d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220813053727.tgz","fileCount":3,"integrity":"sha512-Wzlfnu7p55lykMGBnWc0wbjDZ64gsiQA87J6EUalfw0xbfI++XjWfkuLSyFB0GQGOq/Wre+RzPkj19Y2xOz8AQ==","signatures":[{"sig":"MEYCIQDKjIyvuLVA6MNqKdiSKGF9h0OOrgztProstNOgaZHSJgIhAOPm8suJB1zO0OK6mW9b/noOoCf9MC3J5WYDadoIhwnZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9zjvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiPA/+Iz+3d3LqXPEQyFEFdI2bbc59DiJyrZiQk9+ckjnP0DqNm8dl\r\n2OYW6EU8kr10UCgQwluk1Unu7I0tE2Y+kbuXSCFelagqBiN+TgqBxYwX1iQp\r\nZcjGDS9Rt58mw0KsQpYJkGvNngRjHeuCaHHbLMD75sBvookna+f35RjyEYPU\r\n7kMDH7doqCnckUCb2v4eExco2DnkkEskaHGm3rc/KoFj2BS+4AZ8Umho2omy\r\nu0sHeGHyMaoyLrH1T/Db99ygRRfUESDJZcRwG88wdWpHVRPL/YM2PcekDhHx\r\nGSmaT7TE2MU+k7/z+rOd2caAjEl7/rt3LysVT/k69BSkBzFXCG6sxGa3XhPr\r\neGDSFIKUeuUORJCyUCJkdPxSBHSdH2wyo7mZJsd7jvkHSJVSoWwSUDw9c2Ye\r\nW9G+m2NEdkXLQTrDT3rDO+zLQjhXQBL2YN8DUjeHyOmZ8BDLVaekMuMVAx0D\r\nOxoOmoaMqeDf/Pc3JLyGrbx9ZJmeIHQL8viBVcWjV3LHxkKweAC2oQxTSWkq\r\n5lCpcPzmqsjzux8utSbZ9vbo+FMtZN/7hPNLtS1AuJ9xkbyhzebDX/5+TGsI\r\nfmOxhAFvzhWmY4cp7/vJQ5lN1mQ4fYI4to762GLZ2MrNCP7hgKvfWBYlafei\r\ncKzi8aj4vRODPArMfP3P6WPjTSbDcaKKUoI=\r\n=4pEl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220813053727.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9ef4b2da7152bec691abbdea26eb5400/chakra-ui-system-0.0.0-dev-20220813053727.tgz","_integrity":"sha512-Wzlfnu7p55lykMGBnWc0wbjDZ64gsiQA87J6EUalfw0xbfI++XjWfkuLSyFB0GQGOq/Wre+RzPkj19Y2xOz8AQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220813053727","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220813053727","@chakra-ui/react-utils":"0.0.0-dev-20220813053727","@chakra-ui/styled-system":"0.0.0-dev-20220813053727"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220813053727"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220813053727_1660369135232_0.11876279588514227","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813055957":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220813055957","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220813055957","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"536d45614f1d50469a9cfe7d2d7bb8c3eed5734b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220813055957.tgz","fileCount":3,"integrity":"sha512-BeMe0fpVD9/prlnQd8Z4BHydj8NPEswZ7CsriikjxDWfRC9CyE64bLelbKnorjXKuAdsU0g/HwggvYLACRHFZg==","signatures":[{"sig":"MEYCIQCF6zqbWnK4dxHpzTJY4bVnku8P9dwWF3MwxNTz5+XpXQIhAIch5BvzPXXDq6twYqQ0+Ha44/MA9Vwv2T1CyDZKwWL2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9z4qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqCA/+KRfaG0IVRaZE8YspXoC3K+8rvZuGyKNFpzIgqVARiPQomxaP\r\nxdb/a6V3fWiQEg3prwuUqDn2cg9WjaCQx6LoWqaShRIYXmw5VrvDP4fp4Qk/\r\nQ8ZH9ifY4H8Hz+MA9IG9VIkbnAWWAuR2GMVEOKlK1lVuijpGYzrfCQDhscXq\r\nh0bVNTV/glVU0kV4A7INuQeP1QC09lQ5q3bKE3o+HdYcZ+YGyiSb90vmJFZC\r\nRkO7xuaEMIGICTTTbKmWzDPVId5lQfMIiYQrbH6RuGTmoqDMfUKPkUfzO/u2\r\nvA94e+1xT5V0URpic5O+OTiN/vfhGmz5H8JkJfIotCb7UZSiH/9Lcnq50EkN\r\n/Veeoe5cr1MzTv5GJCpWhH5sc+sR3WW84nxAnbtsbTGiw1fAq+K+bUginkYP\r\n52Toyq3sDhmrck3UAnSMUvGmdKPrCGLonp7Sw6JpkVgvRAGb/7sr1ruG6OER\r\ntzou52y/DfsSiWgB6WBp0POLlyIFnAyTza5p24AKrCPWr5WJ4OhpRtD21+rt\r\nBH8v6VaYDLUd7/l/H4vVOGuoeAYePKuURjQARzEjxsFEdBvzY/0YzHq0e6ha\r\nPagDLAwLRscMVeM+PKFdv84l/PK4KlIcNHtZykeNtM5G02cYpOxT55d9jjqw\r\nNP1dFB71DRWwgky6t5Ez7phzGizeZZ6Tw6w=\r\n=3jRv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220813055957.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6dab6a87f5f0094deef13f484779a415/chakra-ui-system-0.0.0-dev-20220813055957.tgz","_integrity":"sha512-BeMe0fpVD9/prlnQd8Z4BHydj8NPEswZ7CsriikjxDWfRC9CyE64bLelbKnorjXKuAdsU0g/HwggvYLACRHFZg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220813055957","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220813055957","@chakra-ui/react-utils":"0.0.0-dev-20220813055957","@chakra-ui/styled-system":"0.0.0-dev-20220813055957"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220813055957"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220813055957_1660370474583_0.43966201579475617","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813063717":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220813063717","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220813063717","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"332721e36d4676fb3fbcfb7826ae8bb50d4c21bf","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220813063717.tgz","fileCount":3,"integrity":"sha512-H4ZCQJKRxvWXF2iC8ftuwuh2ZKhhapcL76AKMEKq5nrL0NfbyESNoS8ExfjqvfPJzDBj0pDMb014v07BDmlhYA==","signatures":[{"sig":"MEQCIA0oB6ZYbH9PgVJYpAsnHr7OCrCVvngECemd/GE+gUkVAiB+hHrwvQRAxz1j+8dWOcUcPVp5xzXlGDc36TDREw6hJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi90bjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpibw//e6Uui09L+/tGH6SPkI1iEF3tTHSIF8IEPNu7aAhA2yez8Qtm\r\nYGA3RPQagf9OOX8z5wiXgZV5aAhaUbpSkDOmW0qbo5Ia6xB3TVtIYWMLRVPe\r\nCzDmwrg5DA8cFbu5w7erE957xTpMUpL0TxaMTKEt3kOXYopg71UEFfbZvaGA\r\nOrXzq1IEw+aUDJydKZLe1YnTCRmsO+I7N4BAmxx/xTzJBugueElgVZN8+owJ\r\nZ/otzPLT2yY4/wwhdwcXn7LHtZyWgwiP+Gg6cV0Mp47YPbS44cJq+weyh/o0\r\nTK9JYGBxOe9K+QcPV7x49URLEGFn8rybuyiH3L0my1rYNfDZtkf1L1jKfN0+\r\nJIRinyv64NHVAOIF53P5UL3VhilTzs66MdCk+yuvRLH/VEUmI4BqhL1bn0aP\r\naliIvsw6fDtCH7K9J0H4UVBO+stj7wS4gsBWd4nSouhecKyh1+as9DdhFbAs\r\nmh0f6P/UayTU1/Y3KTmmt4pDgg3wmo4YU2mEAKD7Dc8MSAG97Ky+dfPGFDHn\r\napRFeFCZ4lh57ZTWrAk7Qf1fQN/PKt2clUsdfD62aVf9NGxKfzfOWYh5zzIj\r\nmY+8Ki5US4ktcCnP0KDpxleBwxlOquHtCoghSUQEfT2K2z4A7Lw8ioCntRAT\r\nP/mBWJaiRACHGr6+EoTT2HswvGV9izV5G0E=\r\n=7roa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220813063717.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d2da5b5479717a6eb52f94f0021e83cf/chakra-ui-system-0.0.0-dev-20220813063717.tgz","_integrity":"sha512-H4ZCQJKRxvWXF2iC8ftuwuh2ZKhhapcL76AKMEKq5nrL0NfbyESNoS8ExfjqvfPJzDBj0pDMb014v07BDmlhYA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220813063717","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220813063717","@chakra-ui/react-utils":"0.0.0-dev-20220813063717","@chakra-ui/styled-system":"0.0.0-dev-20220813063717"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220813063717"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220813063717_1660372707475_0.19221230505052844","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813070741":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220813070741","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220813070741","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"33a1db6e8bafba931e88329c643142365a3b6703","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220813070741.tgz","fileCount":3,"integrity":"sha512-aOeLkDdEoMW1rFCcItUZp2nPLH3DMbUyHOhBLFMSpbw7ArLvHau1woib6vss2D2jOQHz0aIeqMknr92HjuVlZA==","signatures":[{"sig":"MEYCIQD/iZD+LDQY3sSvil+V6vzeyBSvbRK554y5Bc9h97TgDgIhAJSJK/deyraHRhpObDp9gS42BWGWTtLAfBmswTZYnb/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi904GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZbw//dVSx14ur0Ua8Thu9ucx3YIoon05qHfZjG0Ly1DyG06PPdTkH\r\n2GqiwQqEMdwe40CNnrRFy2/MChNTkjbZP7qEDTpppXTygkqXbhgD5kUEbhma\r\nPk5T7kfnWsYCI3ShJBwM9r5kh8WGLXLGQ5dwP9bLI/B3wF2xs+fi+raGZCrh\r\nkEO9X+suQ4bPcZQ+U1NQMSQkKmsZDxZgE3cMh1fFMW/A4kya4eAfVfFJYo92\r\nHzAUGGUyKHDDTjGTdBFGUmTMbhUfBReMVR1CwxhLyxl6nCLRTZQGUDrFi1uJ\r\n/WQOnmenlLrGKhq/vzFu89RRuNwL2EvHvimb29/o2P1tPPJDK3yYP/VZsDxL\r\noklJA0dqpFrSDaGpzheC+ff/Gtf+b0XK9AXifVBjP1eTsEoOs2fI/JwlfiD3\r\n9elUj0BGBnxsfOoAdNmWNT1ABvD1bKY4XjiOcPUxfBdVuPPrGQteudFANEpu\r\nia89xNCypLQdfkdcHNUXCjfX5YYPYGcacTiSZyFwjkwgNNM1gRHdR+Ogsf+b\r\niwEg5fJWjKpU8JvFeVGY3ReZi/tlVkE6RMbPdBknS25UFE6byUrDWGB+gFnW\r\nBS2iojflmaiM5dLV1dC7EDd4GBvp1dzTUr5zRsyPFqtl3nNHe62p5j8/RKei\r\nm3Lb/Tl7BNdikZMXDdiihoUzw+dWNZIkyLU=\r\n=bS8O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220813070741.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8254fd27950c3d4df7ec035de02f7b0f/chakra-ui-system-0.0.0-dev-20220813070741.tgz","_integrity":"sha512-aOeLkDdEoMW1rFCcItUZp2nPLH3DMbUyHOhBLFMSpbw7ArLvHau1woib6vss2D2jOQHz0aIeqMknr92HjuVlZA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220813070741","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220813070741","@chakra-ui/react-utils":"0.0.0-dev-20220813070741","@chakra-ui/styled-system":"0.0.0-dev-20220813070741"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220813070741"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220813070741_1660374534333_0.6887641598719658","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220813083358":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220813083358","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220813083358","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2e52e38cb32bf67bfd42ca11766ff57554841003","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220813083358.tgz","fileCount":3,"integrity":"sha512-+h/wm1qqmH8nx4KcUb+KBdSd54CcrBQuV5IwkLGnJcvH2QzwzrpNH5NAGD0CPfE60pXtUgK80EtQ9naigJzyWA==","signatures":[{"sig":"MEUCIGDyQljl9USeAV1x4sMMW1cNRTkp4659TeWsTZrXEfrNAiEA0lh96xNBHiFqMEm7Op0maodHU1IkMmVmEfFO0ljGxBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92JCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3dw/9HcLHT0JZMHmpBqoJhPTmZXotC4/QdE9TFL11q0MbGpXrLl+D\r\ntin2EviqC2POWmcvd5kRMQBkMv2g1BBMJ7kIbbeAv7EU8wxRUj5+yoMeeRHT\r\nR2/UGgzLzR6bUjByfPJisB8oTmat6gfIteXxHA8RaRFE1wVCk1sDJ/7vm58N\r\n/EGXgLDZ8bfWfd9R0YR52iTmiAbMhePLWJNDsLuPq08nRulaQAUndJR3U+D2\r\nK/fd6ZoCwIk/NNjD/brJcfihzSWrY3h9U+t7yHm38IqaujFUXqL58gNJPkgy\r\n6Q9NIu94FxNWVE3jd4bprkn30267IEPaEtw2HEjOD5pi2obY/+QqifExDCvi\r\n//xYhgY/nOvTS8C8HbmZq/ThmfKXAlg4JgEJ+IJWWZ46dy1tUMeX6wL8VhnR\r\nCW+1EF3a2NsbtQBzgQ5XrRzL1sbCuOd29cRvBRuNe8sdsaYt2DmuJTMwHP71\r\ngPm2VqtfFjLrGJHeBzf2wzy652SqcafZxRHTme67+rOMfdoDX9XbBW4zm4Au\r\nhP63QMpB/I/fYBev7yQOFEGP1khoHBsHagDrEtMvgQaImYrHLUvDgu4rp4Se\r\n4M5FVomVnrZQru/Ha0LU9IYx2y8V5ljeE94A6zdfBqYWETYzbrjpdGc0X9kd\r\nA0uYn/XXe0XZJLFlYgGEozBIiw68kytDOP0=\r\n=ttfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220813083358.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/288527cd15dff938f9bf9dd0f37e8af9/chakra-ui-system-0.0.0-dev-20220813083358.tgz","_integrity":"sha512-+h/wm1qqmH8nx4KcUb+KBdSd54CcrBQuV5IwkLGnJcvH2QzwzrpNH5NAGD0CPfE60pXtUgK80EtQ9naigJzyWA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220813083358","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220813083358","@chakra-ui/react-utils":"0.0.0-dev-20220813083358","@chakra-ui/styled-system":"0.0.0-dev-20220813083358"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220813083358"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220813083358_1660379713815_0.4183839039100996","host":"s3://npm-registry-packages"}},"2.2.5":{"name":"@chakra-ui/system","version":"2.2.5","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.5","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3e3e2ab1ae615c00f0ef591c37a8d490d3eff139","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.5.tgz","fileCount":3,"integrity":"sha512-lPcLfzCgiFX/rE4DP+6bTisH5qo/e6HwYfA/pFItD/Y/QYm5IwrHORPHS98+qgoR+8KpyxHv77C5cw14ott1rw==","signatures":[{"sig":"MEQCIGlE7Qq7YfujaukkuF/FLG7ErA0/6aG+7HxCtm4A2YftAiAG4Kb3BcQO6Ze+RFtGiZU4l60fdZW5AwvL1rg8tvBO6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi94H1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoObA/+MMlgB1cNpGxDC8zI5USIiWk87q73nkbozPXFRbh8txVgfXAE\r\noRSWecDOdXYW0PktTg6V/k/uLaWZ20Q+98UygRBUwkz/OIEEvVNLZgF8vbOi\r\n5CDb7l2Qde73cjl/yWF2WNoD8A6o7VZzYTS9opEczGBISmuzxW8SRwSZnyay\r\nAZHiTeruddq1Rx07mtcboQYYfld2j19RlovtesngnsGARrP6FkcMnRsBZsz7\r\ng1Zd6+4rxLs/DOBfuHtmoJJLTfqS368Zd63XJ3RkLWyOLZrBWp2BClzRg3A3\r\ntMshXOd79F0BTYgDdgGf6srplk/qpWKN0kl5u8C74T1QDI3+zF9+uW/7xIxQ\r\n7nGRTjSD3WU4Co0D5q0/YzI6KJQHiau9CiM9pK2j96TcxYkQMxl0nAOLtk1C\r\nWE7pW7KawvhOrnSCkOWhEOE+A+f2r6Ze6pHEecsAT0HZOg8fjsLHolj9Jqyy\r\nn40RG9o7ZU9b8AOqsxP/pUsqf5EXunq7HDTsvQ9hxS/kCyVFaphoJaUbExUc\r\nWEpgTvW7526TkDT7HWZeJ13LneCxEIaTwoVsWXL3nCqr9opvaNtm9P7TM1Mv\r\nl7AR79uWLEnRS9EDyg9AvB+IqZvy+yfebZe39Nn9zpxLAXYugpm750HFAeyD\r\naKNF3BxawsPLCywSjXQnG1kpSA8yb4Nisok=\r\n=+lKN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.5.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/cabbdb34b7baa57f263b70aaf3212377/chakra-ui-system-2.2.5.tgz","_integrity":"sha512-lPcLfzCgiFX/rE4DP+6bTisH5qo/e6HwYfA/pFItD/Y/QYm5IwrHORPHS98+qgoR+8KpyxHv77C5cw14ott1rw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.7","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.5","@chakra-ui/react-utils":"2.0.4","@chakra-ui/styled-system":"2.2.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.6"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.5_1660387828834_0.5987224324006639","host":"s3://npm-registry-packages"}},"2.2.6":{"name":"@chakra-ui/system","version":"2.2.6","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.6","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"09824efd43d7568a5a34e40908bf2ad0e0f8d27f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.6.tgz","fileCount":6,"integrity":"sha512-I5q38ObqCrGXmLsxkc56F+1RONbpIIFJvOgq1upXMPOJWHqkzmdqaoJtpANhoE2LvB0GH/gRniiWN17WBCsOIQ==","signatures":[{"sig":"MEYCIQCvxZibsyduY6Ca8V94FjrQXVBMwJxYi9NNYrlK3NnCwAIhANoHtUPI8ebuGYmQclAsz+1OVlGmSt6qZovvi4t3ev/C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+KAPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKZQ//UDmxtX6l+S9USHS/S9AtVz5YZZWVSgRp+H02tE5W+OgmjSvP\r\nYzQBDv27y7gBJVvcHc4IYc4Ar819gVv68tYx8aMnS4y66qTwY6fa/qPehLpL\r\nZWhO+kOBw0Kxah9c2eOQh00f5fAGFqMFuah48KpBUJhpM9a8Lo1WYJ0K/xf9\r\nelPYXuBlpWBBcqHhc1Su4UpN8McTCl3LDMxbXuAFKi+3ufO2eL+bE3NmsS5K\r\nwKV9z5hWa+ZbOF5RB7pCu8GfU9XrNCAt2lX4G1GsfXKfVvatDsWGY6o2aYdD\r\n9Smmngq1yuPexmnMmH+1S17ac4EaUCqoPmox7ScyfOFQWhUOrw+qeTdsZTLg\r\nrLoQUzakEf8ebQ1FZ6bA/EgwFV9gRmtdmG3jsubZTZWr8wqkjkJgTdTv/qOb\r\nDHpqLvxSpZLWRt4jR+34SIBZIVLLuNEO1nxhlSLKJba/4Ixjjus7KB+z3uKj\r\njS9XLqSrMqR4ZuhVMSjVa/4d/b7NtwHvbvTg4VXq3kNICK6ljWQUsLTMXfWM\r\nzk77Zmwy3No/mhhTMVW6/KbcGsAMXKJUYNtqgggWv6m5lmOJk8klghc4cSwY\r\noRhSjC9jVSEEezJhBisohAZiiJj+YzfcsrHMv9UkCPTtent08e5xcnp7golU\r\nFdTlBngMkuIFf8F8YWDiSs5yNC9X8MZFBsc=\r\n=1Q44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.6.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/private/var/folders/fh/7kklt1bx7595wvjxfmcnvkqh0000gn/T/868b168e641f8340f1a2e8a520fc2b2b/chakra-ui-system-2.2.6.tgz","_integrity":"sha512-I5q38ObqCrGXmLsxkc56F+1RONbpIIFJvOgq1upXMPOJWHqkzmdqaoJtpANhoE2LvB0GH/gRniiWN17WBCsOIQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.6","@chakra-ui/react-utils":"2.0.5","@chakra-ui/styled-system":"2.2.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.7"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.6_1660461070855_0.6242365674021328","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819115812":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220819115812","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220819115812","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ca40a8d31e74673a96e2a3341fcfdb5692ffa8a1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220819115812.tgz","fileCount":6,"integrity":"sha512-xioRd5riIhRJn8PGT5MeYQvH6RYmmypgoefWJPzvqHJwO3TkT1AUexZPGUwOTerXn1rBpA/Wu8LMRor0ejVYgg==","signatures":[{"sig":"MEYCIQDZdck6SWVnz+v5W9mjL5cc/mekjG6yIVhovA0UNJX31QIhAJoU1DAa66lrgaSGGwQ+HS3+WuBw9zZpiJx7lAvwI62A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/3sYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLlRAAgV3VWKaFNIm/W6MSija8qIEqqXEDkNu/uCfeLjogDHUioT9y\r\nucoUK5Gm0BPoTjazSM0nltd381cZPRBHEA9glSvMqKPOL8YdyPAncrXCgTDA\r\nxQm4IrBo11lCXgi0typl9Vp6muptHYvpAXHeBqgsDTrNt0djX3XYQEJTsnK6\r\nW3YiwwvQWo67MOsF/f2u9vTqrO5xQ0zBkiQKXec4nve2JEkO9EZ4xu3fwCtU\r\nyHEvhZvc5vwVUO88SkEvU8/dZJrrNFN2mFWc3qdxXdZdrrLCyaQG/O1eqi6F\r\n28Nk/+SJCVTgCjrVAynU1B7IzyP+UZgYbzgtsTjHQF4PMGF+cTh/C9UUHay+\r\nUv1/GFJ2t47nYGwnoxq/LT21U8Ygti3jPP/s6O2hrkKZL9d2hq+WkZxKAvV9\r\nHTIq/V8gZwY7/DDrBiCXfNqYhuikSdzSE6Lwa0QxGngAwm4VIi3XiWEqg+0W\r\nfcvdrcQzs2SYHRBaMiKOnXllcwNLLyUHzFFDULpqQvZHpyE6Cn7nn1f6EyhJ\r\nMpU4+P6C24lw6lgpD9lHfioALYeJIWYDIzJj88UkjAi5v/hcXy6HJaVQW8kd\r\nGR5HRFZBL0SgH5kfoKOry2lRtUiI1DayraGH9R3ByKKQSQgQRA/BV3JyPlYA\r\nsw1u5l28V4n4rZB+6YoeDJnxP3KS3IggNYo=\r\n=WZt3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220819115812.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/55de7b41584bb51a8cc05038f1a93618/chakra-ui-system-0.0.0-dev-20220819115812.tgz","_integrity":"sha512-xioRd5riIhRJn8PGT5MeYQvH6RYmmypgoefWJPzvqHJwO3TkT1AUexZPGUwOTerXn1rBpA/Wu8LMRor0ejVYgg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220819115812","@chakra-ui/react-utils":"2.0.5","@chakra-ui/styled-system":"2.2.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.7"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220819115812_1660910360107_0.5440772320703022","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819125800":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220819125800","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220819125800","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9273da35f832c17b77b0b61b6acea3ec4d980d55","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220819125800.tgz","fileCount":6,"integrity":"sha512-CBqJue4fBI1Whc9ypXgcsRdZElsd741AHhawW/mYu4r6m+VzLj22WttSNaE38OPVPk5nuDLiWzRd9XAOFJ1DEQ==","signatures":[{"sig":"MEUCIQClAKdNHiojWiZynAci/8VXeaVige0dSXkV5/TJKmBLsgIgMjut3SXSSLbgtmDdMaKBRTFGSy4hauUZ20mr4xPXfpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/4kkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrebQ/8C2um/9o1THIe2ViRTytdPuRXh8mu/tsdXn5Ht6dAD4DCyJfn\r\nqnLrnZfdPxs6aTcldcK7VeJTaRgXbD2peDDUUddf0pfBinOFr/9Les8+R9R2\r\nGnbeTlXJGeoJmZpwLGCvNAFB7Lgt3cGzrhEKY0Cjl66OYaG2EufTlWAwH6fF\r\nJqf4ngZR1KGeBeEmaG5tyv9Y8BEzPQPhvgbyg556U/z29ogfT3kxXTLrLBZL\r\nB6eNnnpNjKQngZn6yqC+YXooZlqSof5FvVFnYUTb3+Mg8TWgRmcVg9G/G4U5\r\nEUvpA1tJgJJMZ9pLfgqKaChi25oRluOjWbEtpH2eINMydzw2Gvb9yLnHbrJN\r\n1Ha8kDo/hqAlqXxh8eVGbA2PRHmfchsUV7nZ2P7ONQABKdHq7HGy1hqOEVwl\r\nQkeKcd6q2eJShDcZEbOzfgHuDN6aI+5QajR0WV5e0eZzwmXOZMijhRsULss+\r\nnLi6sM8PNVXqNCPa4mbHnHAsAACCQYwoGphW16YRgxaUJKxqPb/cHFId3BGH\r\n2CPBGT09DPUTMl+AkpleGBFtnI0YVN0VCoHJZTDUMO23TiG8ECiIN772E6wI\r\nnh7wrovvGPFWnC2/PUq6oGI/udjyfpr+5UT9AS6hTYkj9gomcOFVhczVufn8\r\nMqqMuXtWm500M11BmSsTNn7vwdv72U6YjdM=\r\n=8Y3r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220819125800.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4e8365010e858cb0d2dd5db5a0112ce5/chakra-ui-system-0.0.0-dev-20220819125800.tgz","_integrity":"sha512-CBqJue4fBI1Whc9ypXgcsRdZElsd741AHhawW/mYu4r6m+VzLj22WttSNaE38OPVPk5nuDLiWzRd9XAOFJ1DEQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220819125800","@chakra-ui/react-utils":"2.0.5","@chakra-ui/styled-system":"2.2.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.7"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220819125800_1660913956145_0.6680094838849222","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819132034":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220819132034","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220819132034","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"043c28953937cbc5a2983d29b2d8c5d9a2472c58","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220819132034.tgz","fileCount":6,"integrity":"sha512-YeTT8B/59Iif0auJnjELRlKNbs5+7AuuA5k8UUiLDGicJlFVbw8Y/dUo0YA0HZkrO4vwTxwwrWj+X6C9QeKcww==","signatures":[{"sig":"MEYCIQDAIiWvKUpFGipQNYY+7dlrKMSC338BWAbmZX6iwSB/iQIhAIQwzczajQDDl2x/COAqXersMrc+GMnJd+6UEnxZOVxt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/45iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKPQ/+LSmdbuA/fFcO2qwLUeGN8PBZK+clPnj4OzaxMk/H3SsnQ7bn\r\niGrWiDWamyYrwWlQiDczoWcJB1UZnRHimxtXbFPwV3VTen+oOPDCe6/HTOhw\r\ncoK9XbttPT8KfxObJruhU5zkcNp+vkccOFiJA5suoiTMJzyOY3VPOYuUZyPO\r\nt9vRce9TweHy/otUC5NeoU0iCYZXa37rKIKTBxd32+6PW7fN1dxGUAEeuXh+\r\nDbPpHQE5abyAEEc7DcU4fkXXYQ8Lf3jZkqRyjcA9CAyCa40zBWOQeqcunykz\r\n+SM53aU+zUkLKhP8+MN7rDN1PW6EoZgoM2BgwOSM9tvTHvE9t9ETF/bFqf9w\r\nAqsfBzAPnksED0KRn2U6CmDt5y9ud3zLXrCbw8ngrUurLZkuzDkJ0invYr3V\r\nHOtr2mGjuj+64KF/VhFUS5QkNyRkekVXJTqSaMJFFJOld4kDAXPRhJMMst/Z\r\n8IfuainV/5uJWqPko7qaa6vk87PXpMImnYPTDMO5grd5Vu6F0wjrCpLbWcH7\r\n8vrnhgbgOtavJ4/6AdlMQLC/bV8dn3zePImrXV+RVZcLmvHmQ8g14C4Tw5Om\r\nhxtpkWaDkd81phGRepdFNuxeas5BImhLdZ080/RNYlAZx2uY28eVXSA4w0Br\r\n3CL0T8ZG+K+xNq4/zZ4Lrm0hXQwmq3Ushmw=\r\n=xT1T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220819132034.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/61d8239fe062058a5d9b74ee805ca733/chakra-ui-system-0.0.0-dev-20220819132034.tgz","_integrity":"sha512-YeTT8B/59Iif0auJnjELRlKNbs5+7AuuA5k8UUiLDGicJlFVbw8Y/dUo0YA0HZkrO4vwTxwwrWj+X6C9QeKcww==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220819132034","@chakra-ui/react-utils":"2.0.5","@chakra-ui/styled-system":"2.2.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.7"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220819132034_1660915297846_0.8982375312184145","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819142048":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220819142048","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220819142048","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a6062ed8e52c0a0d1d70d0cbda83a372e05f4691","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220819142048.tgz","fileCount":6,"integrity":"sha512-dWeply00hf4JpGK/EprxpQdGoeOYu3+bbdza8bMJ9b5gOQ6ueaVDbK6QLUI7m52wCdMms6BAgM2ytyZ+p7rgjg==","signatures":[{"sig":"MEUCIQDPVlGL1GnrkbW2uAc7c4pHpSZapY1RlBQITL1dCQDGJwIgZVct+9jh9jrZzF1m6xHe5NxwNIYNBnykil9kMFiBhV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/5x6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+pA//Tak/XiQCb7aHc4ssZK+v2Qq9UaiJbR3zzH5dLHBPcm9EUfvE\r\n7LzkUC9UKOtlqolcz7PCkqxbKhsn8vb0VLVpKs8Vj7pA26xiTQH8OKlTeECG\r\nnT0z3AzIhXwMN3SvjcSBwaZbkuj9jPfOMfFEQTJu423yzMzRj+NbV3ovaQW4\r\nHx2H7aFM0TGU6NtlI0AKMJckBZEYOM+F5mTBBZL5AZcwU/AG6qRLjiAHaX56\r\nIAs2N5Flckc3QyOXI8qV3F0ySSzM1cFji3I8vJBsDYZQt8jAxY/6grIjbxVI\r\n25r634FHXO9TvHd/Eu8eICIXT9UkRhgqXCWKww4LTVXYWc6BORNTUWQwePk+\r\nfU5SJwsRkY7IN/yxZQ+tnXPtASoYhDYZH1oZ52OheMqU3Jl7n+30BHgNW86M\r\n3czA9gad/ao2dRWLueW1gbSjwskb6ndP/i39xUwwl8T8QqlKAqmjbw5/3/01\r\n5pm5qqJi2qBg3i3efLNHXcNdQs9qMaEY3VuqH75PsNEXD019sKKuCVHXpmI3\r\nHoXdkCBhsz5OnU7nnz49ZKVlECw0RWlF3KpseCT5PgXZ3m0uDrTqYQ1E/Nuu\r\nMTaKw6wu6yaJ6yff9wyDfehHcW+r2DuKKLUcqQikJTy3NkEzQXM/UuJFWPsF\r\nFR7y0QaaY6j/rKiZQ4sNHrR/QQdb2cH5pb0=\r\n=DnIW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220819142048.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8ad1c3acc621d53dd92f49380f6c77de/chakra-ui-system-0.0.0-dev-20220819142048.tgz","_integrity":"sha512-dWeply00hf4JpGK/EprxpQdGoeOYu3+bbdza8bMJ9b5gOQ6ueaVDbK6QLUI7m52wCdMms6BAgM2ytyZ+p7rgjg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220819142048","@chakra-ui/react-utils":"2.0.5","@chakra-ui/styled-system":"2.2.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.7"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220819142048_1660918906265_0.679547738164187","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819143632":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220819143632","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220819143632","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c356c4937f412f45bfc3061ae682c360de3407f1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220819143632.tgz","fileCount":6,"integrity":"sha512-DlXqj48tgG/OGY4MTkKUTB5L72HNbgDth68fwKD0QBEx+gdkCJY0o0QkaSX235VGzuTsbNebEkCdv6nAJH07ZQ==","signatures":[{"sig":"MEQCIG9P8akFk+nSfxWCbht2jLeAktrgEefR/+HYnckZP/zIAiBhDgqGt8HN+YRrLXrwW96TMRkFgoRONpLuf92crfYOrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/6A0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJKQ/7BDUjdC+h1zly7akMH5OWvt2q45fHY4hq03F1fbmmxvfsdrb6\r\n9I0of0wpKfK15eCc0IFTU4W3f434Q6sP7hTL9Ww3XqQwXBqnS4s3Cz3Dt4JC\r\nGkczZb1oksPRsrsa5RPVag5a3jqYU92i6hfKG7j3BHFLgN2vfTntWI11yNyP\r\nzX+LyyH/wSYPpGLlEqVXEeQF868uzPpqNIV3rxkZ3kd6HhKlRhx/bdBNZ/RO\r\nSoENXtN2vL3zvkR8C2/IEc1RA+CehObemUFdnjWVevmGT0VyUtn6KZFMeRQu\r\nqy+uc1ufvHrI1nogYzVYsZdihgq7Ne6OPg2JIbnATLOXb6H9OG5Kxeix9lY1\r\n3fjX9EOGeYIuxWaEvM8Jgso0p1zk44mdxfnAfD44076tvBSKHP/Aj/clm+Yl\r\nlrZs9A17whdhG65AR3hcDXaFdzupPcok8xfiK+foqT0LVAH4w1OVvdlVKMg9\r\nOD6MLys3xv3WuC6GNkYKGibgQplcBDMagB4bv7yS4sQZM1bg7692Pcd8Nrbo\r\nLC7ma0Zxjt0IpwgM0BSmg8hr9zDNCQQl7AgrgPCCRBGnac3WA1SxOh4fAP4X\r\nV1/iUOuE9cQ6DBIkW3Cdv/pWo9Azdu9vfmZnNiKx8hDz6q775K0hvly7zTtQ\r\ni4rmUsmCS52dwTmntr60NDaq6uWCS5zquSg=\r\n=laSo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220819143632.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b827b71106ebf8ab9bce9650cdaa157b/chakra-ui-system-0.0.0-dev-20220819143632.tgz","_integrity":"sha512-DlXqj48tgG/OGY4MTkKUTB5L72HNbgDth68fwKD0QBEx+gdkCJY0o0QkaSX235VGzuTsbNebEkCdv6nAJH07ZQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220819143632","@chakra-ui/react-utils":"2.0.5","@chakra-ui/styled-system":"2.2.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.7"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220819143632_1660919860409_0.42537489896082037","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220819191103":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220819191103","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220819191103","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"051313bd67016963ff4c7ba707b74f6a6bf4cbc0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220819191103.tgz","fileCount":6,"integrity":"sha512-D3dhCCJYJJDIm6/L9M/mop5R7kLxdfemi7M5+ECm63C5P/S4+jIX044wPTksbGfnC43eF7chmUL9nwkLjM3WVg==","signatures":[{"sig":"MEYCIQDc0WPWu1O3rGdMGptMgxrgsP6dwxlgMJa5DG09YdjaagIhALFJrdCfjcaVNqlUOGnBWKqAucJPUH7iEk0aTYiurCvv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/+CMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo93Q/+P9RK0vtx8rYaay0+1zWHQl8Sg4orsM/C3n8tVQoNeC6YhYQI\r\nZ5xz0PS9sLj93+GGGkFwIQn8rRd/Jc68MzCGp2s8nvb6gJq/Or+sfcy7YJ/z\r\n5bzkmhWgTx1rqyXpFuifpHAjumfNumziA1X3gibW7+pi9J/Bt93pStUZRgzm\r\nrKzm5hgdq/WSYFM+g24SLCNaTrz7nfWeNDzzLo+ZTnJOYuAfJBe4eoC/0S8i\r\nTZGuqY58wDROLiUUZjqBSBquve7yVPadjSKoOXUMBuFU797UAwhe1VbSken2\r\nbxClX9GauJZgEWnsMIlGzNh3kEzDyPHUeDO5FLdWc89ShSfps2D27uQ7tHfn\r\nIy3RpC2MtRnxNFYeX92n2N+guOHPOdsl6QB14w9LUOySCslNcxw78+bH8Vza\r\nXPjXFQdFzmZa3YQv4DzM2i3yj41Hi26EdeLPNyK7RsRRKCcgVCH/QIzhNqyl\r\n7wmbxSJ3f5MBK2VltqdvTXIAsPv1qxi3RdTcfCtV4b75efMmDglQByPXs5DC\r\n+KknvC+64mjxcztpYLnXC/bYc7Bc9YYFwjZo5x/L8uLIz8yJYxwBfrTVNAUa\r\nqcLO1yl3uLBAVr8e7VTKxZ1PJuR/UI28YjbX3O0uj/C/Xm57p4rDK6sMoCJq\r\n3ydLToh9VUi4vVB3Zimg6OISIjYM7GUvdys=\r\n=sprb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220819191103.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2bc0e164998f71e7c677680d491082d2/chakra-ui-system-0.0.0-dev-20220819191103.tgz","_integrity":"sha512-D3dhCCJYJJDIm6/L9M/mop5R7kLxdfemi7M5+ECm63C5P/S4+jIX044wPTksbGfnC43eF7chmUL9nwkLjM3WVg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220819191103","@chakra-ui/react-utils":"2.0.5","@chakra-ui/styled-system":"2.2.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.7"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220819191103_1660936332208_0.5345258551083798","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820120308":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820120308","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820120308","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d5ac33da4b0519c2d86421b13d5c391fb5e9dec0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820120308.tgz","fileCount":6,"integrity":"sha512-ZQPo3pVYGN2g/S+mI42axePUf4dZQSUW6hMlcT/2PsrzT2+yRlT4yoFUEo7VKQISPUCAJ8TmDNZDZRSJcxjxeg==","signatures":[{"sig":"MEYCIQC3AnBtt9bekdb8AAvrguVJkl101BYoPLtGeHbW1VaHGAIhAIFFLQhJPI7c7OkIvIUe3dgvbWAAW3rG+Pdqc6iXdaBn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAM22ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoeng/+PVVm5xzKS+oQC6w7RFPw2XRhGBCdHxHVo6wFzhV29unVoYI5\r\nsYOiDxPoCUL5MkcgO/r7lWSGy17hDwwb7LDpUma5RpSbjBZs4gaDtdhvS9Go\r\niJi4AGAIThwbxHGrudHvk2YeQgD8B3PrexEzSCoNpgg4wlT+sJ3mG/UwBeVp\r\nTHuhmsyar/cTgSoEUfpSznCymjgxDx0qijceQwQqjBkmrRyuDBHj2Dg3jyCc\r\nfzIqRPNPxFHsQkYOKUs2BNET0nPwKi8vpUpptzEZOCBG+BHEn7w4FXQeGFsX\r\ncY3dEh7etlRRgMrk5Oo0Gk2z2Ng2wjMMLFCalA3I2NNliC7Tb93RIZbn6Wwm\r\n+yHIUsD0lbVq+ooQV0z3qGA2SbcjMCq7PT7IwidlGngTYq8sJ4eHtfdj+5If\r\nfgXlwWDr3DRjV3spvodeHTLct4GePKzvrX3pgJho2qdgl/4XBiLkr849AW0j\r\neLcnzT4z4vW2TQO1E+vOKzPVw+4ZZYFfEMRL6yKxIQyguZnHBkuWI3typj4G\r\nKhxeMJno2hH7/XfsMTAuQjtsL/jFiEIn0ONCfF00CfzppzlTakIBiORboh3I\r\nsmykvWwDLr9CIWEFL8Dn4XPbDNUt3jUbPFdDjLRtEV7NhaJVR1WbCMx3yM5R\r\nGZR6Kwk8sc6MY1h9cNPddq3PFXJjWD9BAU4=\r\n=OiTm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820120308.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7902c9c058ab66cf6d1889b4d403fe3e/chakra-ui-system-0.0.0-dev-20220820120308.tgz","_integrity":"sha512-ZQPo3pVYGN2g/S+mI42axePUf4dZQSUW6hMlcT/2PsrzT2+yRlT4yoFUEo7VKQISPUCAJ8TmDNZDZRSJcxjxeg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.8","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820120308","@chakra-ui/react-utils":"2.0.5","@chakra-ui/styled-system":"2.2.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.7"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820120308_1660997045947_0.6851860609623921","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820124231":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820124231","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820124231","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"09a7345e8323dcb3e81985a292491814d2d9785d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820124231.tgz","fileCount":6,"integrity":"sha512-IVZlqEcUqw35Y18qLvh/47YpEn/Dfr/HTag7KdQxUl0ukG67HOfPV65+AbGYPQWn/jKcSTCQsZyNgRKGfwhNTQ==","signatures":[{"sig":"MEUCIQCwEVQrRinXr41mMoPSf/ruTLi/ROFogXDX4IcweJRV/gIgO+b+04Z0SmbmfARhg2Nu2r3W05vo41Cy6PcvLKz68lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjANcUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUQA/+I2xIYFWtIqwlfNxhihZ+akkIn9PUkwJq2Aw6/yeBAw7pe9u8\r\nLt9ce5wN6YXtqSOQ+HwEi588AcZXe6JZlNdC+06k/L/bioCoQ+oScM8gg9qw\r\nRukFcTFhht9BggeR54ksPLkYFjfzDQFh/+1fxmVbQ7aD0WGXXetHvHGpmBuE\r\nhQ79bOV0sKNOmXigK+c0yoynEH09LBPPYRCZyjIoSF2e76zWp9fp9oOSbvzQ\r\nzJUstfVcW0iGkF+x6/B68+mxErD7MfHqQRC4PGZZeo5zF0ujotQwW2JpMcZE\r\nOsN9rs03Z/YR3kl9GNsGwZ3vvZbYFi1O8ZkbPXHNwYSEsEjzijrc4Um4oi7h\r\n/mSYBs1HbWilUIAt0R7wD1jGzf2WYJVWvA5rVQTYQyFnVJ4IB+E5kXL56iSF\r\nv3BnYPgxlYsVfl5AaV/I+UvWcP8J0C455lHzGiyNSk0u1usWtg04ecmcXou4\r\nAT4GR8yRHtZVu3tkzkj8WhIHNTMSG+WoyZjUI9fFO+/SGk3c0nbSbs0uyPf6\r\nx7mjir8rcqADW/EpJ/UtUxHc5ug3vttuuHvx02Jl3gm89BI0LoEcbMrRqFxh\r\nuCk4kR1J+fYQdLbvZRhF8JES3a6i3bdtBSe8wJHhZTQNRzDkCiEZs899GfnR\r\nKxq/o3RKOuPfizZch3hu3K4EpCjnvjgC5JA=\r\n=8h6g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820124231.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b0817664973f41a8fc79be0424610396/chakra-ui-system-0.0.0-dev-20220820124231.tgz","_integrity":"sha512-IVZlqEcUqw35Y18qLvh/47YpEn/Dfr/HTag7KdQxUl0ukG67HOfPV65+AbGYPQWn/jKcSTCQsZyNgRKGfwhNTQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220820124231","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820124231","@chakra-ui/react-utils":"0.0.0-dev-20220820124231","@chakra-ui/styled-system":"0.0.0-dev-20220820124231"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220820124231"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820124231_1660999444185_0.261329198482692","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820152257":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820152257","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820152257","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fe965672b1119e81107af435031635ff8453fa42","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820152257.tgz","fileCount":6,"integrity":"sha512-m19mUXNzVi+yQAhI0Vb+n3ZtFouvkHFITAg5yBGB+bijvCbtbr3vheFJu5F0C9m1EYrYPdp/UncV7URtJ3W9TQ==","signatures":[{"sig":"MEUCIQDEceMVbhbASDR1RFv9SNX7XIfv1ua75Fc0iIaQlslUtAIgCAES8urtznhdQXGm5/+EAzmXcKct3b67RsnsW4HD17M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAPyyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1mg/+PTyP93w04OfGthRSOUw8kqfYCpMqJB721P3+uCHyNZh6JCuU\r\n9JOzEqfWaDoU64FeSTsXIL0g4tcx1A+LSKafpY7ZjWZ/vyU2xYxMr9dbi4qi\r\nXazvlsPeEIFtwz7k22dpBYg/Ts1L8Zv8sN9vTBnO1jv3CgZLozmeSvhMhyXA\r\nE31rl3/k4nzP8HIJHxyIMsZ5NPXZKMlTWPJJcmBihIWZpgiGHk+5hzcMHH0L\r\nWxchdhKfQrF/u/Kgg6svZdXkSm5cFpXYT8LC1TxnwsASKQPf3oPlCrP5CNnS\r\nbwy9fVW7C/BIKmHxaJ5EONAMa3wEZ7n24P8COtIm6uv4g62DuNfAb1R8U701\r\naXXnGS5RctQmyjBa4ic52HkhhukeCR5MRMJl217cURYlx79L/HRGDm+TnT6s\r\nsUIQe7/oCPvIJmAgRFaSqhJs2dQ6I6hsAYOsH3BmAcmxC4ceVGOYehndOGNa\r\nhoSts3W+uLVpPYWa1kUg9UgQ0G/2ux/IAn7hZ9M9OsP9au9mwzvy3bB05x3o\r\nw/+i8t97zNgWsR9qjgSEFEAE2uja9DLJMWeb95i//nQDcTH6bvzNB06MmSnJ\r\nWYcSu43Xx4HjxsVO6zqyAJqjhRNnLEOfhNfCi4WQqU9GbzgFIsZtOgXmY4k6\r\n0oXqcpfSEEwkUe47Qs2F4jepYgDNiEkLDoc=\r\n=/y9s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820152257.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6a34e20b0b61cf63a9dcdd0a200707b3/chakra-ui-system-0.0.0-dev-20220820152257.tgz","_integrity":"sha512-m19mUXNzVi+yQAhI0Vb+n3ZtFouvkHFITAg5yBGB+bijvCbtbr3vheFJu5F0C9m1EYrYPdp/UncV7URtJ3W9TQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220820152257","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820152257","@chakra-ui/react-utils":"0.0.0-dev-20220820152257","@chakra-ui/styled-system":"0.0.0-dev-20220820152257"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220820152257"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820152257_1661009074256_0.2049494446822162","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820165925":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820165925","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820165925","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"867dda3e97d0e77ccd282efdb0fc069ac583a46c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820165925.tgz","fileCount":6,"integrity":"sha512-Tbm8onwh6Gv1NAQBnHrIWWBpA/xcEwy+Bs0ngcSepfOdikwNasuy80VyLOxaxfy6+VSAvDVcbRY1yx4l7Nhw9w==","signatures":[{"sig":"MEQCIGUfGddjZ/I05TOk8jz5chya4SovqkqFMIqBR6vPD/bAAiBoyIi57EMPGRSOgkTCEmWsYYkhY+VyVN1khVcNRcQOtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARM9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAyQ//f/YfZ79AoK4OaRKdotordPpc7ffzsePvyqRRAoJlVEJlIdJP\r\nOMPUNenJdMrNTTQrnlh0HNojdVnAPTzo7OrRYbdAHw8y7miW1JRpxkFTKVfW\r\nWT9zK1x8L6qw284bf6qUN0U2MFNj8zc2UJDb+hdZgQpdTiZDsMyzl2ml+HLx\r\nxy1/1omjjfDF2CRAN7onuLfIArYTruh/4mf70l2JaVyua+41gN0I743+POMC\r\nNOt5wUCdj+FjsZGoKdgAv8fyDI2At7bsg34l0ZCkIHV8F98VT3mkepnROuy6\r\n1V/NK/8LgE4rKnrQzXWBwjj5NEwgYpJSCqBaUtNIBTx6HKmLtvAZNqfxkEJh\r\n/9ayEPun2NirLBlxClyc+qzGcX0RuvZpZIKIbR48wMkyW4MXrn8tXXO/xMc4\r\np12d6MrtuZQ5ssa4IahKn2DubFNgdEKG6mV078DS9U4iZXubVpJt5mmnfM34\r\nht1cLZ66dYyL9ZfiKRgDMbRh/HtizyVJJ6No7d0OgvQZUBUImb79yoccYC3/\r\npyg4WvFVR6YD7gG2zjznxtfTFt2kd6lLB08PToMGxub8TKUgEn1r6QMh0b4o\r\nJ5LmKf6Ygrd9wYKfEtDTBXr2K4U4s5NpIuD1Cju2UsZwczUEyXUyMkPcvPNG\r\nbOk7dvxYpOKWJkxDiEy95lm/90YTVEgHq34=\r\n=U2Pd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820165925.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a9e2dc92e00a4d88550068a425f8c7cb/chakra-ui-system-0.0.0-dev-20220820165925.tgz","_integrity":"sha512-Tbm8onwh6Gv1NAQBnHrIWWBpA/xcEwy+Bs0ngcSepfOdikwNasuy80VyLOxaxfy6+VSAvDVcbRY1yx4l7Nhw9w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220820165925","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820165925","@chakra-ui/react-utils":"0.0.0-dev-20220820165925","@chakra-ui/styled-system":"0.0.0-dev-20220820165925"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220820165925"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820165925_1661014845490_0.41084539478686644","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820172220":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820172220","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820172220","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6b03568f9ee114c505dd6a450a0ce4be08f0d323","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820172220.tgz","fileCount":6,"integrity":"sha512-f3Kkehro4atZm2s2u70bXVWBjCyllTcFSHLXTl/M35UTYOp9vphmCX2kdtSuPnk0oc4e6qcEbc9rKKCUV31YZw==","signatures":[{"sig":"MEYCIQDUuFfSONnx7BeGxedmcUnnqr7ujVWAyiOPgnRHMQddBAIhAPnpkGPOadSwrQySNBdmV+nMB1H+VG5wH/BRAcupgUi9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARikACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2HBAAnZ7tIdAHiQ0kNtu2s2alw35m8Auwbe0RgP7nfW+5Cnl3m4ui\r\nZ4hJpNtzKfzl6C3C5mDru1z+Cb+KSmgpcexQpdejvU0/cg4kNvqIU0+36keO\r\nhu7OMbCtpG25VLdLItUwkLGTbWuHH8hgh47xqXBYPLnOoPqKGrVR9efBTgt3\r\nu6D7y4+W79wWIXXPAlp7l+oQV7jgi9BNVZwkwMlliUZkTxbgYtIr1tNOUfDl\r\nP/k8JuUUC8l1dEPUQrH6M6WyVVa3e5Vk3CPG7k1m/Fkc9x651JvWzYPVtw/c\r\nPZJ2J2Dg0z+izPepCuDFLmQ7rpxLnGxNWfv567uMe7D76sMnXOWJcKI3D+VY\r\nPGHDs4glt88Yiff2GsXKGGYOOgTGZ+JYvqX83geFbf7sFe3oDD9QYiVERFvu\r\nX96yDXUhumWBRy+k4aKHHbq5BN5GncheifH4aRBbbSkRB17GP3ZsI4WatH/z\r\nMIWqVYZKIDrUXTzjNV4ySyo5xGrvDm3S803Gp5Nxof8ExjvVLlHboRnmWZ9d\r\nI0WaJpSvWx7Pb6mqw6J82OWqlNaTrtZIPGOTl9nRz4JA5Zwo8MiZe4n4Fad9\r\n4z0VGJcNBrjXNCi5b5FAIHBamYCbZ50omYeFgaBJg0m4AzqfV6zJ9j9ob2R6\r\nkm1gqpLuohklbFm9caU2g0O21OrMsJ1wXHM=\r\n=V+yw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820172220.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/91c3c1e2c87ca526cc77feac2db6c9a8/chakra-ui-system-0.0.0-dev-20220820172220.tgz","_integrity":"sha512-f3Kkehro4atZm2s2u70bXVWBjCyllTcFSHLXTl/M35UTYOp9vphmCX2kdtSuPnk0oc4e6qcEbc9rKKCUV31YZw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220820172220","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820172220","@chakra-ui/react-utils":"0.0.0-dev-20220820172220","@chakra-ui/styled-system":"0.0.0-dev-20220820172220"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220820172220"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820172220_1661016228219_0.18240859658416397","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820173639":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820173639","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820173639","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2c79fcf5a26ba0f607f7433ba8b7db7dd99edb7e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820173639.tgz","fileCount":6,"integrity":"sha512-AYtSQRINjWZvMx0wlKP5DG/Qzcgumz7FWmCq7MofpjWetwgBhXkrYElXRIii5VPWh2tRhpFocw9ogTtWFO00Yw==","signatures":[{"sig":"MEUCIFETDdk/QM0gqSYW/o9UBLCaou3841jl0/Fw7ZB4dxRxAiEAuYu+CG0+Yl7JZQfbQx0RKr4iYUYPCRrmlfV2zx5Nzlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjARv1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTew//ez2wySRCXqilKyZn1S6CNiEr5yzjvhqs+u7wlTLF+/mD/P3Q\r\n/oSrsac1Cn59//DLv5OAsCOym4RNmzbACQMzhOhKbysmN7SsJ9z+/jW0p6Vh\r\ntPW7t5pC47lWDjlCVFN8LdogR6IgiM2pdq1xVGqwHj8ORjbPCB3bNML+9Bbp\r\nbdbsvaBBhrTTmpu48W81yUBRIxZQ8h+Xt1gWwz4GL9Ip9a9/taTKg/dRj/xo\r\nMuMKa1K5hC2SWFZWLcsL++o7QdcVCztV679f5rv/2+YybDUYJkIsgTWRZbSx\r\njgpTKz5tw/QEqrybTLzlTuSpzBpesloNY9LHesLNLTRzO8lBoMGw58YPja9Y\r\njgQZwQU9JS4SKxkqjoBa1XnmAU5zjjz3Xheon9ZmpET3g0X4/U47IHU+r0RF\r\nSGD3hMEV5r5glqk+5AEHRRPFHFCm0ThA52vNnYI+olc2h83nCKnP8TM5Lz9o\r\nBhY8BuKqpFA/AdvbrmNBKxTizSq6KtX6RVvWeSUKVfHSQl494ZnXQXsdZj8C\r\nZu4np4NJPKLVNGuxp7lnNKyaVAxhtD/pviwJKwLJoES7z9EAoH4AHjtgwedp\r\nxraIt7A8TCe4IPYnh8zgqLAmb57vpogGH7lv3+ZeUHqXd/lQEYibfQElvMzS\r\nav78R1JOVhDQNLfGqnsuH2OVhU0aJhKWljY=\r\n=J4JY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820173639.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d9e74f4a89d0ad3103b46171672003a2/chakra-ui-system-0.0.0-dev-20220820173639.tgz","_integrity":"sha512-AYtSQRINjWZvMx0wlKP5DG/Qzcgumz7FWmCq7MofpjWetwgBhXkrYElXRIii5VPWh2tRhpFocw9ogTtWFO00Yw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220820173639","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820173639","@chakra-ui/react-utils":"0.0.0-dev-20220820173639","@chakra-ui/styled-system":"0.0.0-dev-20220820173639"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220820173639"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820173639_1661017077504_0.631018857112144","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820185458":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820185458","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820185458","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"dfe80c43edb85dc892641a1f9d5c50e01d551b4a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820185458.tgz","fileCount":6,"integrity":"sha512-qvrPt3n8XCu1hmAMhXKkalRGYLgyB/TRHutp+HgIdcdNKcWhdBoR7zps/DuTfDLGzbvIvl2eHZ8DZDIMVpM6Nw==","signatures":[{"sig":"MEYCIQCP3bTzflKmzWqkVdxC6VEAHTIdNwkTDWIlht1OyZqcowIhANHbGDNXYsW49ph+uaUdB5KhryOomSmRM+AGxvRp6Ybs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAS5TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3GRAAl1Le+O97ty4AfpX/qeshMy44fcb3axU892Tr4hFFDcTXrekK\r\nEQUUrptrvW0OooHZvEuGIaxlr+TF8WnXHTkE1/NtxY8TJunsm3O8jYy6O8p0\r\nzodUL9iYcQaMpPlgbavaHZ6vYA6dYfLEEyoslYLteD3yyvW5oiaDJr+eIFGY\r\nbhI576OewmAWvaQ0cwjyjG+9uXZhD6ydlfe8192tPHy+4H47D9lSG53oED2K\r\naYURs7slWKeIvQkQAl8ohE19RdT85xZtGzvpI5t28EJb25+VblurvFoRLSiD\r\nQM6ULhxPl+S3k8JSycaxA5f3cNcvokW55LqkwzEBIlZHUsC1J6OtsSEVUaUO\r\nb8I0cBGUEicNukLkMFWw5v7UHov1YnYpPd4B+ckPwcKCfxACPSOtnhMzE/eH\r\nyC3eSSOIxkwnORJxGrlSOLtUy0rmf2n5omoCrBu60E80XKkXK/wUSKvwutEr\r\naxGJJPKJrxxik35Mf5SpdEJG4hHfzfp18UIaHqnjYeW+h+Ln7YXj4XeU46El\r\ns7auhZer7YjqT5SRO+9QdOHT3+xB3SIP3R5iDFXEDF1xkBb+85eb8ou0OH4G\r\ncT8NJpiquCzstZRZQ5iE1T+n7TIuN1gZj4rqSaWsrIEeM5TNUa1wBvjyQ7Ul\r\n+IGfd3u32dOhsUdRWp/tJZGWfjBXN9WIiOo=\r\n=vav0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820185458.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ed9933c8181aeb4252b92c6709e8dc71/chakra-ui-system-0.0.0-dev-20220820185458.tgz","_integrity":"sha512-qvrPt3n8XCu1hmAMhXKkalRGYLgyB/TRHutp+HgIdcdNKcWhdBoR7zps/DuTfDLGzbvIvl2eHZ8DZDIMVpM6Nw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220820185458","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820185458","@chakra-ui/react-utils":"0.0.0-dev-20220820185458","@chakra-ui/styled-system":"0.0.0-dev-20220820185458"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220820185458"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820185458_1661021778923_0.6210162548360263","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820193723":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820193723","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820193723","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"10449b514c2e2d38d8ccd28abb473931634beb69","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820193723.tgz","fileCount":6,"integrity":"sha512-GBfoDwZ92e4Mf3Oq0ohU5wWood99iqT/sLzk6WfQUJfGs+y+7JK+cGBIfsqE8l7kZwAiDRAbuCrPSbJxnEFliw==","signatures":[{"sig":"MEYCIQC7eABS3S2Vu8FiUrB9yWueA4NI4mzMZgiE+643XnXC2wIhAN18YmbZOfntZWhYj1p41qCe+NgQZBJRlDYBdO8odkwy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAThDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpEQ/8CN2LrowO9bbT2EvB89zfvooXfBNAKafQwUNR9Bu88yf6+OWe\r\n7l0xr31VECdk4uiSs+jI4kfwR4Zn3kiBrbVPX0Qi4APlxyINMijdEuHyqFi+\r\nfGOyigOWx6i/biv7JbFwVts5EjuJLSz+8kIMF53E54O+OWmtZ7eW3LF5pVW6\r\nbn2oXqcsc8svwEKCR4aoD4lotmWAbvPqlxmUZcudMqDzoV5RGbmtQxoU0fIf\r\nvwn4dCDmaGv9EGJsTNNDKxbRf1J7BBT733D5WDO3uzkAkOsitl7CKC6GIqlP\r\nkTMd/NJ0RWF9WMPPi93RqsRiyNgDr7PpiH4FKURZADTQiK3sfzEWLlJYGkc2\r\nw8ciKJ/5s7QYJBmyFIkhqN7sxm0b5mZjLEaiwUbaLL051/QpKuJlDKu1GmeU\r\nD8r1Yde9ELmrVgqzdxskKIsgKkEUD9DkTXTnjQ8YHFgcXt//KhO7jxeMwy6C\r\nzJc6g7JWf5O0mYfqHpxsM3rtKg5UCePHkF8iR1gN1tqyq3wFDq0D40St5Jdn\r\nFMMgqG3r0Nv3HQnDc/95EKvN8H3KzxZxgTy2odJELYXLNP208oof7QCSLXmJ\r\nsJiRY0LzM1FbEq0JWEYcemOym+cEJqDd9GHyPPrb5cMZkHHqn4/zlCbPiys8\r\nq9BuiPuptQzyv0kdY7ICe1tVT5Qh6larGAE=\r\n=c5/+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820193723.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/cfe10b12cd4baa230e045b99f79100f3/chakra-ui-system-0.0.0-dev-20220820193723.tgz","_integrity":"sha512-GBfoDwZ92e4Mf3Oq0ohU5wWood99iqT/sLzk6WfQUJfGs+y+7JK+cGBIfsqE8l7kZwAiDRAbuCrPSbJxnEFliw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220820193723","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820193723","@chakra-ui/react-utils":"0.0.0-dev-20220820193723","@chakra-ui/styled-system":"0.0.0-dev-20220820193723"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220820193723"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820193723_1661024323750_0.5320091927200981","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220820195548":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220820195548","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220820195548","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5692ac706ddf8da92c02c1805eb3d4de3c0227fd","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220820195548.tgz","fileCount":6,"integrity":"sha512-d3xQjI+D1G2AVCCMI3Ww+fQOCRsajUQyA7Tx6+l/7IliRYaPF3gsmzmSWxjAvLeVDqq4HP6SjpdYtW23MdiPIw==","signatures":[{"sig":"MEYCIQCsncTs3Uk4j4vsXunrGtVSRT0AIFfZiJFNKKMjBybtwAIhALkOwIvpm3FS4i4UaM8zM/PliFp6SienTmocxc3Bdrz2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjATyVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpePg//f9VhJRQ7lFetrFLTSNwtUdzOysHyEStk4TbtarpmaqT5PZCc\r\nFU4DpY6VAVNVEwjZQgB9JxMLkHfRwKEUG6PYL6JpYM312lQZMNSUiITQZgjZ\r\nx3hjl6ioTSOWmytTZMOJWpQHf+HXHKkSUYSmfCbxkWFzlYYpWf5e9gP4AuAB\r\ni8zBLxFWHwerDb7C53xrRRY5WzuYNgnMcNSqJb0FGoyPG9BDMYnEIP4gouDs\r\nlp5pX5JAWF68QRCmCi+HiiC/5hASV/Zc2w3pBGzZswtOqNA4vXJu0KkJsahH\r\n+HqILFllwn6HdhMzB8q0d5im7SKTTbFHYK5JcW0TqZNeKb9psmZX/JTLD31R\r\nnpyUnnmeGBrKUJLOQQyAZ5l9cmLZGnd7+zOtJROFkC1mYoeFL5LwLQ/pWSzl\r\nIr1VabCXIi5gUoJ9+tIVLyt6F73FyHYo1Db3W2F2tKmsIGAW+wIMiOl5v+Tq\r\nalZH6sbHxjbbbxduTP2M/BST3ktF2hQfeLsT4/l/RKGPxN3PE46x5WzU9B5b\r\nC+BjbvXh3qeGXQUsTIavtZ2tLag83CU47jvEW66bXLE8KlRDSgBWeUuXM+N9\r\nC1QAn8PSG5tQ2BfOyEEzUOfMV3mHFuewuMgIVdvOgB1FanFUgFbt7JeXdqjM\r\ngmtSN31AhrW7zOa5ySjQmBzszNYpKjG19Cg=\r\n=/VxE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220820195548.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0700e4080e398f2d1c9756d83813b9b2/chakra-ui-system-0.0.0-dev-20220820195548.tgz","_integrity":"sha512-d3xQjI+D1G2AVCCMI3Ww+fQOCRsajUQyA7Tx6+l/7IliRYaPF3gsmzmSWxjAvLeVDqq4HP6SjpdYtW23MdiPIw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220820195548","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220820195548","@chakra-ui/react-utils":"0.0.0-dev-20220820195548","@chakra-ui/styled-system":"0.0.0-dev-20220820195548"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220820195548"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220820195548_1661025429087_0.38503455558183197","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822051456":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220822051456","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220822051456","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7ac0b7d1d950dd2ed7c7ad5ffc068f781764a9ed","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220822051456.tgz","fileCount":6,"integrity":"sha512-Q7pIro34wolowBX821p9aUeVyzBo5wAs7OhK+OFV+tJDEvKbxqYa4weTphb/4OD6+QUtqsTfIXcHoE5PuDLVpA==","signatures":[{"sig":"MEQCIAwLAHoC/j7Fadk+W1TWsMk/E7HWvsCHcyn1jDS3/aKDAiASDSV6AL+pWnsMXj3yf3upfRNYnmXoQ1u4q4miwXCmpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxEnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Bg/+NyTYOPkkP8dpvRlwlc7aGDUtJLg+eFs5TEGalQmYGvX1gxKp\r\nEAd/vWLL0HraF8vcejJ2+vu/K1NGzTI7aXdls87mD4z4zPz75fDQCdh/4hFt\r\nOTXA3AZHMX0QM+1Xcjn969+zgW1L9KSvIHb1CjFZeNHuWQ5QwB1pCKVZuMFs\r\n7SZzxx4fb0O2AEGy8cJQqbo8o2bWKe5/zdPft/+dX/Y0LsRFbcqBgH7z+u03\r\nUpoKnyoiFug07zL7Zy+L0GFmro5W1fGlIRuaHCTEZupO3uaTjSD2alpGff2A\r\nYvmK878Ub+ZZfEYgrhqwJyoj+dXLV0T3NCJYdBSuG7STGSVLGYTxQP1ahRRi\r\n7eENQIy9TifH956CRXdhrbTwvLrMG0uZ0NvF9B0uOeWoIeXF148ctc9bethq\r\n1uMkdrs8QCfUMgRi1mIYLg3qVQqm2CaUooutlHW0J07JetJinrB1GLIU5w7w\r\n5H4aRBcY5Lx9ZCF3fGU02JhMwR0ixT/xS/kLVQjWO9iYqpDJOQrdtjx6ftzQ\r\ngedalFsiZpGNYG490qeNLbMooQhwnWxcnZNl6sVUIhsLPU9JnrVuUjae9luu\r\n+GFfXqtuJpbOmL3IOUWKUUzKoi4s4Kjoj36THqiGAA0Noaa5cPIatJuW8m/Y\r\nfDWdrdlu4kA0datRjXnLyOYAjhVbFaECays=\r\n=zktB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220822051456.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/dc20bf75a80bfe747f6e1f96746f3fcd/chakra-ui-system-0.0.0-dev-20220822051456.tgz","_integrity":"sha512-Q7pIro34wolowBX821p9aUeVyzBo5wAs7OhK+OFV+tJDEvKbxqYa4weTphb/4OD6+QUtqsTfIXcHoE5PuDLVpA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220822051456","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220822051456","@chakra-ui/react-utils":"0.0.0-dev-20220822051456","@chakra-ui/styled-system":"0.0.0-dev-20220822051456"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220822051456"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220822051456_1661145383144_0.4834394935900137","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822054045":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220822054045","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220822054045","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"578bfc374faabb1430caf31c2ed16fb1901e8ef0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220822054045.tgz","fileCount":6,"integrity":"sha512-3yD3xurQnpu8iXieIX0vXHai//xgpjhmeUfl8ugZJt9lOKHjQGgyoxsUQi4KzDqdYyqz8snHiKvO1M6prf3O4g==","signatures":[{"sig":"MEQCIEoK0375b1M8us/GzjsjcQ/Bg14yrS6u2LatynPzGodPAiBdLUT/MYr6VEC2h8zk+lRYfHdASb2U04NMsiCntB6OsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxcvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMMQ//YalmoE0qE618XJjSzmA+bpg5GGAeFcoG3lNV1MLJ9YHPvl3p\r\nDo5Mc4onId9zs8gW1TUcVuks8WBZxn2hyGjfRP1bHjR4Joe10QOZzA1RSmZj\r\nfK/t05aNCVcQInYRsRwMOnHyR0l3m4YGlaEjO/A1ZMGjghv7fDdQiYZFCIzw\r\nHdZ4yILXsicRf2P50vCNqIR6A+KXjC2W2vYk+Ad9catPowD8FF68ht6qeHUn\r\njMJmQRRZj8HdOM/CL6IIKLoO+vcLj89jdb6F0OByqjOc/8V8qOOX9JYYytcZ\r\ndcBWT3PRbvcD8CK/7fY0cvYhcmTsGWTnYfb7Y/UENsLJZKtaI3NJ+GgQ2jPn\r\nzZOIa7yp++Zjc99BuizdM6MV1DQdFNnt3r825GLL7QNef/6oFxgt/e63Vs7G\r\n44+WoJBg8uMs7eglxKfehC9i4CD3vyPNZKtLwfSsAhrcR6+ImhPuBreApuTX\r\nxGJGmWMjMn3vzalx6pMfqZAE0O0euhTTneOhrSHXxSxJVBj3UUG7b8ozuogh\r\nOYjPVGxkqjvckxybfHyD2TBUKkUeRH/U753MeYXlutXd6GW3e72Q+YBt93mK\r\n/ALDU3xeQ0u0/RK8iO/fAW8vNv1ChMnN/2oFj6UlW2iq73oZvEBt5SxRnb15\r\nJ+sqP3bfB6oAHvO0FUtGc54xo2hjbCLENyA=\r\n=NJPL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220822054045.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3d307e144b9aeba19fb97214725a9ce7/chakra-ui-system-0.0.0-dev-20220822054045.tgz","_integrity":"sha512-3yD3xurQnpu8iXieIX0vXHai//xgpjhmeUfl8ugZJt9lOKHjQGgyoxsUQi4KzDqdYyqz8snHiKvO1M6prf3O4g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220822054045","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220822054045","@chakra-ui/react-utils":"0.0.0-dev-20220822054045","@chakra-ui/styled-system":"0.0.0-dev-20220822054045"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220822054045"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220822054045_1661146927518_0.394569845048375","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822055339":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220822055339","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220822055339","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f4b0eb982edc795eae8760614e3cacbead89f52c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220822055339.tgz","fileCount":6,"integrity":"sha512-URObr6R4ZwR1z66j9C450fgo1hXjdnYta07rjSUJpUYSEMVXGdziUpmBfyk6GkXqETupi7JJl4hlBzQ/XZzCQg==","signatures":[{"sig":"MEUCIDEs2roHYUkniCBmnvmEEugye1o+8l2ye9SGR/10J/esAiEAlAfhRfJGrQ2VMXkp52S/hpzhvpjZLZ6HIwFENJZA3Jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAxpLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrryA//XmF1vsNuUHXdttjFoIY67Ziga1F9yOjCQqMM/a9b/T3Cl7au\r\nTwqz8tKgRUIwE9H+lf0gO2D3ARMHfIbL0w91Z5lcY3zR0wZnP5NnEuvjxQHK\r\nm9F4PYuwRQbiU4NUt/FePuLPNL8ZAogt5VSP1ABW97a9gH6PZQQCXK2Os5SS\r\n+N9ASam+0u9YOAPSWGnGQWOjnNPC4etYXWAxT7zEb8JOeW2/F+bQ6msbgQnb\r\ne2X1BQ7mWS6ep1yOvb3KJYE0cQUvYVpgMMApiQ3BKQKhUp8LilLUAptQaeUy\r\nuw8q/9UMrKJPfsgSpMMP2sWKtGx2jeZtpvK2x2c23ZfN3bmQlRJHPFAhrtvg\r\n8XDVhRxIvh/uXeECTNV8q5bren4CIIouxqaNPTG901E0XwBTF3kfQTsBb2oJ\r\nRkCZKXwuIKHFIneqisBRheEkGRzAMywYadpED0d0Z4JdAJNvuLPsZkIlOu04\r\nNmkZdDIrrwUwgAZenD7EFaos+3zCBuBxuj/dg1YCHHNtXAhOuAM3kle0zbax\r\nb5BLJ/z5gZUvfVtlMmaRr24MVFhE5TK071jWU5QGoGaaBlxgoaWkJqZay3Rw\r\nnZTHlt3BODJG7ui97UG5wCY5Tf+lyqHvrObR3kGuCDPR6RJxdPpi7EYbWcTL\r\nrOhvyIZ0Rj2EBm1M5EiyJiJLAvlnoCnjLp4=\r\n=accF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220822055339.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e557ae6aa5b2c7963fcd02d84b99af5e/chakra-ui-system-0.0.0-dev-20220822055339.tgz","_integrity":"sha512-URObr6R4ZwR1z66j9C450fgo1hXjdnYta07rjSUJpUYSEMVXGdziUpmBfyk6GkXqETupi7JJl4hlBzQ/XZzCQg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220822055339","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220822055339","@chakra-ui/react-utils":"0.0.0-dev-20220822055339","@chakra-ui/styled-system":"0.0.0-dev-20220822055339"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220822055339"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220822055339_1661147723090_0.0976878538096071","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822103611":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220822103611","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220822103611","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9a8a9a21a71cf83f5b5383afd4c1a5f20fca43cd","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220822103611.tgz","fileCount":6,"integrity":"sha512-hGz7TtLpCi2INC+dpMO9xWY+mwQXhinJhxTxuEhcAXNZAACx5jIu3uBau4xBAVGYv+mqEr3cxc/WNEwrv86rMA==","signatures":[{"sig":"MEQCID7NZbr14JFfhG/OCHnd/VMOYDiGMYc3oaDO046yBcZxAiA92WU6NSs/zYLwrkE9lFrXlLg/LNdKAcctJABgeSOFDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA1x6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWaRAAgn3BlV5HoDFCTHr4Ckk/QqjXM/6dNAoLZK6ryKwnVqEJZJKk\r\nD8IOVnrlT/TdBUsx7ebq0gEkaYml17qDXecDiubjl3X7MgKekIDS8z63q67F\r\nRy6jkUDHeUf/nn+bahWcvQjQodWyeKa8Vh2sSV3tDOSDeRgZKvGao4dQYFYM\r\nkF/5hspg5jEFFFDLgbDj38B04ceP7NWMOsWtNqEK9znVvr8YQ0yaxKrYg+dD\r\nRs0OOTBSV3SmzRvL1QwP8+VDjyAEKVnzmpDusn/wbYAN+8I/lQ7VksHp6Au8\r\nW5hmoKF1ncP1GiQANDO1vdYy1wbMwGt9vwBYtkLsgHdAIQgsuP+lqfDmplT1\r\n9Q9VBFBbBkWZImzqK3aqd3jD1gdIyY8edsqB3Mea45NtSmleFG6/GzbyXSDp\r\nH/Dh7gK1Fc8qXWmT6hQ510Ab+fIwbzjGtggWfcLo8NdJxRe37f7OI8vnDVgl\r\nS6XgCakOdJA1XlMmj55zR/5a3Jkiv5GzvP7Q0/mZBzXMJ4JFkFRTA53Hw7FN\r\n6rPdqoeaVy/+PC0m5bJHl8s6QHouyWu2bxRn+9/wpC8osIbW6Z0xi6XE8wgy\r\n+qABbPsmFZAczMqs405V23I6ML1mWZ4DU4v9m0XTe5D+hQrqdj5kUHn0fRTI\r\nJMOWtgHhLHjrHDMOigu5qhDwtsrftrDNwUU=\r\n=qAPt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220822103611.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/13985c85b4e16eba7a427877680f9912/chakra-ui-system-0.0.0-dev-20220822103611.tgz","_integrity":"sha512-hGz7TtLpCi2INC+dpMO9xWY+mwQXhinJhxTxuEhcAXNZAACx5jIu3uBau4xBAVGYv+mqEr3cxc/WNEwrv86rMA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220822103611","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220822103611","@chakra-ui/react-utils":"0.0.0-dev-20220822103611","@chakra-ui/styled-system":"0.0.0-dev-20220822103611"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220822103611"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220822103611_1661164665970_0.02714586286119358","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220822184448":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220822184448","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220822184448","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0d3217011de407bd3486eaea8076ce08c7f70f0a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220822184448.tgz","fileCount":6,"integrity":"sha512-8mDL0PPeAs1SXQueo7oao6hpec1rh8V1at2KX6sEnX1w7sCQvykCx4+YUQB0njD71ZOwGs75aPb8zbPPeGuQog==","signatures":[{"sig":"MEQCICxpFdPVxadPdr7/tzB5ifE1zPpEuGJrjxLX3ExercZEAiBU1vem3refg5Y5JW0z+4s1aMBGrNLWVuCUr48xfLwVzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA88FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaBw/+K+3vLJr27etDgibRQIcBs1kHqVEBCpJbl5FyvhemavsxlmI2\r\nUn2kfyoInXm/zSXOizhE32KNZgTRmu48IFfd7xT2EGa4oENDLJ3iCx49BX/Q\r\nIIjk1OPSEMbdyzcN1oJb5MPs2yQbdmS93Vk66zjXXxLq9alcuSFsIxvAs/tv\r\nsKZTa4rH967vi8ObPkoNlFe6Zj/86QrfaAJ3MmisCbf7TtVtURV2vHT4QGTL\r\nNTRIhCaLHV9U17y+CiRuHwI0yWiq0sl/LuWXjXxqHSIXWYFEkeJLhE5/mqXi\r\nWmwyWSIFuRry4/Vol8pItS1/SIazp40660oEtBhbfTUEfvMv57DGUk1k1wQQ\r\nuOrVuvKvqTxuqTIPwN84GGnpBmdfOafZ8uUhZDMxw2Z5eoSAJo4R4aXzv2ZM\r\nt3ysKeSQdMoyqX8PX931PMDq5Qx6wC+SYJA64qlYyzHF8gi+dxbGHPyZmrtI\r\n7qzR2lhQF92+2GPGyc3JYOqjo7Y6ORCa9mIRGiceuqKPjFfy2q6ctN7L2KIW\r\nvjzZHKmANRRKdmKS2U5JqVhWKfA1qURpmuHdGqbPoNev7c49THQu5mzGKXhZ\r\n9W4/052ecCm4zyFT7fEyBbnaiiZQT4WrH+5L+5kPUjT3hPl/nlMh3BjqkkNJ\r\n30SokvSoQQL6KsWcTUibe0tFSP8gE/xOYvk=\r\n=n41J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220822184448.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d28c951ac443f516560119ea95025d17/chakra-ui-system-0.0.0-dev-20220822184448.tgz","_integrity":"sha512-8mDL0PPeAs1SXQueo7oao6hpec1rh8V1at2KX6sEnX1w7sCQvykCx4+YUQB0njD71ZOwGs75aPb8zbPPeGuQog==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220822184448","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220822184448","@chakra-ui/react-utils":"0.0.0-dev-20220822184448","@chakra-ui/styled-system":"0.0.0-dev-20220822184448"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220822184448"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220822184448_1661193988991_0.13848603689293393","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823150801":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220823150801","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220823150801","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cd6efe37ef652c952ab52037203862244ccb5141","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220823150801.tgz","fileCount":6,"integrity":"sha512-giZAu0EQNmr+HXxkz/E2HQuT+3f+x2Lnl1pFIkPrzeHD76gjvBZVY/yi7wgF3lgT5m2y65dr3awpXmxppnrg+g==","signatures":[{"sig":"MEQCID+g+5hYcGGtaUPIS+qOF6ic/UgQQLwUMdfWucH7z5r7AiAG3jIeNrtMwim1+ZlUiVsMVnIpWxcSDNDxA7wYjQvi/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBO2lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo/Q/8D6xquN01wJrFduYbUmxwdp+gHdj0fdIS+NXaEyO5nmQI/IKF\r\n9yyG0KL9vxzaM4An+veVOE4zEE03/GBPk5X4HbMoxmG9tLHcmJsj1WolgNDq\r\nTprSfsPoNqbav/FvTMi3IkhaM31x6JNPoD0AzcoYx6+hphnkRe+mM/geL4UR\r\nULma0nTLSJ13Iy51pRVfcrxLAxsHZV1RDlk6Lckj/FRzJyKp3pY7eodR2p8G\r\n7/l6QM75d1dzqq6TpRsGyb9xq3w1L7WYAPgIOlJ4Si1xLl39wBpyXjowv7Qr\r\nQ/8oQS4Nt9y18e3KG/bLtq7pvXhJDhfG1SpAeunrnUMKRKo+1LeWiKcBqYpY\r\nZFCQL1mQfprFMa+Qqy0K4ZvdQZrd81cIi3qfI+AfcYpw5oA8K4xuHDZoIjNg\r\nAWBia6gZmyphSHwhAhAXpNz6ihVBZf1QRsNFUr5ZcMS2rAuxTjvFqSXHc8P1\r\nheDl3/AGnqCjZeZRSIs2Cxq8y6NmSKDMyf3GQs4x90YeqZzSHe4zRaEPktiM\r\nMrBoivUwSqqNMy/9UlgYluXWot7C5gAyFVzag9DnlHGcMWgUhcWM9OsQGd2T\r\nVswePydOqQ9A19xECi4qgHyfuf5iKLA1fkj/DLyJ+TrXtvIFU/ATrFAp13tg\r\n41mYApbXygqQ7vROYTja0lw8/9EVkPSah1M=\r\n=7z1t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220823150801.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8bbbf9c841f06b1fb20745980ae60871/chakra-ui-system-0.0.0-dev-20220823150801.tgz","_integrity":"sha512-giZAu0EQNmr+HXxkz/E2HQuT+3f+x2Lnl1pFIkPrzeHD76gjvBZVY/yi7wgF3lgT5m2y65dr3awpXmxppnrg+g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220823150801","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220823150801","@chakra-ui/react-utils":"0.0.0-dev-20220823150801","@chakra-ui/styled-system":"0.0.0-dev-20220823150801"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220823150801"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220823150801_1661267365421_0.1333442238554241","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823165602":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220823165602","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220823165602","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"455b0209236b7c54d64e65280863cda18ccb06c6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220823165602.tgz","fileCount":6,"integrity":"sha512-TefdSmvb5H7EABXI+wBw7xG3kKpwGrRtG73qcLUc4eLSYvmrWGdqqqvA9OOdXK2u+2tSSFUrKNdKdtcEFaOT9w==","signatures":[{"sig":"MEYCIQCwuR/EueroDG8COjgCTZYnfTSGphorCAVgfEmAjCJTPQIhAKKWh1yJDHqpXXES1+LuVm2fPClM6Ikw0gAYW/TWZBri","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBQb2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob6Q//QJ2NKG+LjxiWdKn56lSj+C/YUFKnCu9aDo8mdz8NDuNz0o7i\r\n9AkaK/mB5liHz2Ab2Tsx3wpHVlyH3PhFeIXSfZSUBdAos+rAXBSHTD4CXDLV\r\ndgwp4F8lmncMsAJIZ/GmOsIZFIpMRrDs9BPM234sBZYus4YmNZl4/mghpXYK\r\nscnvQGaFKn1W3VAIl3Onn9YY7bMJ1VkIBqQ6oBEOIoKuFoYd3MfqDqz17Rk5\r\nQQ6jFOlGGbLmLv/qZGgfgDTeaT9dust7ItdpTAYEBfgxZBPEJmRRfvC079qY\r\nbEO46Xk7jbCw8x5v15wqYyis6Nwua6M2N21FMVTdEUFcAuoWAY1sE+WpRT3a\r\nfqc/iSY39RsgGbyOURRtQSEP0XBVUGm9mClD0uG7h5dm9oXR0mwDFVxfotbl\r\nWOGI+WCXqSYHx8eEDxQZ6BNhk23ntCs+INsXiOvrpJ87W83E7f/hT149IhXf\r\nlul+0siSvzYnd4rGeHJrj+i21wxtljAeiJDMle1etnWEKejASip9NvYULki2\r\njtnbdsLK6504+EHtQzulmVSPjoJAoGlt+5JCifpXR0t5EzvZrvmMPSuAFqsd\r\nPfaHgR+4jild0Jfon8NnvqpiURUBv2Likr+5x4bl8kOkywwcjyYJ4b8te1h9\r\no/ut2ndj0ZjlOqZ9kGyJyWOZ36Wwv63QwiM=\r\n=xD9s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220823165602.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5cd4318d234e480e51c298f1e7bd2992/chakra-ui-system-0.0.0-dev-20220823165602.tgz","_integrity":"sha512-TefdSmvb5H7EABXI+wBw7xG3kKpwGrRtG73qcLUc4eLSYvmrWGdqqqvA9OOdXK2u+2tSSFUrKNdKdtcEFaOT9w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220823165602","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220823165602","@chakra-ui/react-utils":"0.0.0-dev-20220823165602","@chakra-ui/styled-system":"0.0.0-dev-20220823165602"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220823165602"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220823165602_1661273846137_0.8975221328233183","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823192757":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220823192757","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220823192757","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9025a9523d9e92c737a2b324d1d60ea676c10456","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220823192757.tgz","fileCount":6,"integrity":"sha512-qi3AdWcw+m9b/xXKClx/zQib8GvO64efHlQD+jePPBokhxXp6PTcTTYFIGVeAu6VwcFl4R6Spv7Te0QGkPIvoQ==","signatures":[{"sig":"MEQCIFkiryM/9HOQi+zvmZemN1l20enaUwXGs74sd6WZyLuRAiBADBsuJ3Im+xu2lPbUG3XPVWODhJnxlw3UvQrGSx9uQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBSqoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmocug//QbvoqnhLM4ciwl4tx/ddy6XGMLTAUdds45cGXfCC9AU5Fk80\r\nTAQgRr0QDcy8hSqJSlVwHfY32ksLIaGgmt7b0d8RlmKVs/ymaab1FDCrOL1P\r\noNTc73hxKXYJQnb5MNaFZ/VdfKtoYB5oOWaSP9RuvMJ/CRRlMj8zrqIUFv4t\r\nBcx4TeREh4s/OR44hkbwBI2W2RRoAQcD3wI3kqIbuNf8COO0wwrN2aFcWgke\r\nQb/qTWKCRCfkJ17lt9qx008YmEryBDN+jT3G1wctWgRZxpoq/erMZbKR5XNU\r\nVUpCjxt7QK8D25qRDU64h7AZ7pB2/z+1HQXRWKdtjnU/n4KerYcV+AQn6pgz\r\nMFtpobnr42tLK/WCC5x5vElnEytfihAx83/BDJ57TVUQEqHCFaKQqFsLCtAI\r\nX5RCAVtfw+NRRSBvccjzBC+3u7VKYyTkoJKFVMSFyZpv1tx0CXBpKbNsF9n7\r\nUabrIiNRWa6hwc80+jDPGJbXpg/08ohb95vip89NjaIs+Kv/2IzFbz+wkQNN\r\nnAbCOm1Vd8TNBj4G9owL3syf2Ie8wbKQK08I36ivSJHAOPAOslUPkNZmMHGF\r\nH+sX6nHiCvd5sRPuENb1IhbCki5ZnorsHmKQCF8HbR3hBZYQnsN3+btwezTU\r\nMt9GPHCjyTsxmrQFP/cb8hWZ7vrv3HdNPzQ=\r\n=+nRy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220823192757.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a78b60493b15a1bfe5f91ce59da16663/chakra-ui-system-0.0.0-dev-20220823192757.tgz","_integrity":"sha512-qi3AdWcw+m9b/xXKClx/zQib8GvO64efHlQD+jePPBokhxXp6PTcTTYFIGVeAu6VwcFl4R6Spv7Te0QGkPIvoQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220823192757","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220823192757","@chakra-ui/react-utils":"0.0.0-dev-20220823192757","@chakra-ui/styled-system":"0.0.0-dev-20220823192757"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220823192757"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220823192757_1661282984467_0.8241371082036926","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220823195046":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220823195046","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220823195046","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0f7bb2732896a6aad72d845576c7cf9dcb09876c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220823195046.tgz","fileCount":6,"integrity":"sha512-jM50xnVe4U61asZDRWbq+jg5m0N7gbN+Hf3G700ulCNcvNf45AKUOFutCvExkK0B2+AunFoUHqihTiOCEAGWzA==","signatures":[{"sig":"MEQCIHIigaPg2fnmRehsCxuma2Vn860vfSSsx1o+AqoGRVzcAiAV6YR7xqxIVWnsvEXDy+ub8dmt0+t39fqjZOWI80Gnug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBTARACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroGQ//RvLGvNj+oTFqPWzJ4V+ny5PCmt2O4Dx92uayMtcdU1i9j8ID\r\nzb7WuQE4IjcS7M4wB/kbLkbK109MSKwpPbQAwiWEJ7rdIjh8+yhzSdZVnkas\r\nEnt2p/9zrmvCcJd1b5XS0aTJcsPOdixPQjEDGVyrcjGGtVDKHy6pRitKD78C\r\nLSzmg5ocVlnpncJ2RTLgb/7FEIyV27otlJRJiFEg2pc5YxHe/3NlaTIY7Wk+\r\n/QPhwVWHJutQrv1cLgyusWsZCYJsj6QJAlA9ZatJFCkSoFMv7KcaJd7JeGdI\r\nxP+/5F9YDUP5lJ3VDIl0BHA2TVswcAkwWFmNdFdM5HYHauZTxvjgZ5KyY3Bo\r\n4oXTel2dN7ohqUONoJpjePsGUNHPTI+jcPA6UY3YUcisHiiJ41d5jR/1K0dq\r\nme8AIXS4eaIl5/O07XUqMWZeCot7mNz3AUGKDqzUzYVEG2FEzMWmfnMHcIHj\r\nRDW2+p9u44RnZjQ5kE6eGulME3oQIXRFY56/lCJqONYdvLWBkamz/NYI9edf\r\nPPPaaIvVNicVlhF853bIPechu8MAcmvSIBGqY2JjoGHuX4IUybuCpW+EuY9R\r\nLlJjT40AV+tQFt5UE1eqeKAjs7QomFbalsgz/PBGdYQySxsEAZkPKUJJRYdI\r\nm/898wSXHfMIeFyM1oE7FFBCfH2tn9k08+4=\r\n=AgUI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220823195046.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6e8e99fe690e87d08fd36b54c4a45293/chakra-ui-system-0.0.0-dev-20220823195046.tgz","_integrity":"sha512-jM50xnVe4U61asZDRWbq+jg5m0N7gbN+Hf3G700ulCNcvNf45AKUOFutCvExkK0B2+AunFoUHqihTiOCEAGWzA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220823195046","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220823195046","@chakra-ui/react-utils":"0.0.0-dev-20220823195046","@chakra-ui/styled-system":"0.0.0-dev-20220823195046"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220823195046"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220823195046_1661284369669_0.9297697735432773","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824074122":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220824074122","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220824074122","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"551873ad6269734de8cd3a61043272f24ab402ad","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220824074122.tgz","fileCount":6,"integrity":"sha512-lcNXfgpVEANdB53qHEFKczMSKLquKEezR+A39M/w+67zdFGnlnde1/4etOfnw+K5XbUg5F3q4R7trzCUCKmJmA==","signatures":[{"sig":"MEYCIQDqUsL08qHK7QrmUZF7XlaPT5WeFoKT3E7z+Kcd9F+WcgIhAOlOORzLI/ayoEVEHYnuW4PPGIOYduU2SFa3HBq1XbIl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBdZ0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrf+A//egj324g/WOc9RilpfXZ2G+NA02y59oM8J+VhOji4XD4WDw42\r\n3r+giHalvh1w9Kl+XgaCuaZXyeYmm8vZiE2ol+1e1XT0gMyXMSFDSe2opT2M\r\nmHjobUbdGNS3URAlCw9gqUxIA5X8pyEVJAbJF9Db4vmz0inhqfMo2fs8bu5Z\r\ncg/Yr2JDu1ZcLZ6oNlLQ20VNgIy13rj5rBCkT9cQKQbpnG/NLkarPcqYBmcS\r\nGpUMkkOM09R11VHQ8hyKjza97WEBQQ/nmmtaZHXCZyWhi8tDbaJmqV6YAEc0\r\nMkQ6VLgOqWv8ORFH8U9z54PkXJgW/thN9r0Ze9ICOXTeg6c+6U51wkfG6D0W\r\nwyVuCf6FdUp9PnJO9W8kn3r4jYJSyibq2f57Hm5KBjIRjP+ZgmCK1usw+amr\r\nb2Eg1JGZsZ5F9wvl/89rO5IWzUjjU/ZZfQ4Pf4nvlDMUxDPw5jSu+0qU6jd7\r\n6CYyNRoJ9yvVStdXyhM2H3fkwwkli2QkdMimpmRo8084O+PNoZhU+gPxkFBv\r\nyNaZIVydrmv/kFtUpxsWgh9yJgklpqAUl+VVJGpv5X8BuX0ZQHZoOU8EAckY\r\nZa68ZactOzhrIQZdm3Ijlh+QJ0zvJjv1l37riEmhpJ0q5aeu3pm5B/g1G6c1\r\nahFghQvZn6DRj9o7Jm04Rk/7gumMr4cAkpM=\r\n=3ZAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220824074122.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/64032a045a21d544bb08a4c1ca2d1ce6/chakra-ui-system-0.0.0-dev-20220824074122.tgz","_integrity":"sha512-lcNXfgpVEANdB53qHEFKczMSKLquKEezR+A39M/w+67zdFGnlnde1/4etOfnw+K5XbUg5F3q4R7trzCUCKmJmA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220824074122","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220824074122","@chakra-ui/react-utils":"0.0.0-dev-20220824074122","@chakra-ui/styled-system":"0.0.0-dev-20220824074122"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220824074122"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220824074122_1661326964443_0.5534361054064991","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824080240":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220824080240","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220824080240","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e9cdb2c236335f541b5d89e35af689c80d13a5e4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220824080240.tgz","fileCount":6,"integrity":"sha512-SzPrRP8VLmkpbo85EV8irHlklX/mwP5gczP/Pdjvu6zKm7rNMxZ8nSPiVy4eWKZpoDN5sV2hjh48pB5Ee8SCvw==","signatures":[{"sig":"MEUCIAuqr/9lyIX6DA1q5Vnza7z0Se7jLV/4YU20ZvyzglA6AiEA8iqJ2ZqLSKY7T/l0IxrgqLYyWi1uczjFwf/tJ/61WyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBdtyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Mg//cbN68CZ0s2CGj4SPF5dcwCnXvIJv0SZDnFj0kp/R6Jbw+JHC\r\nfsw1i+56sSiD3FBwylz6LaX+zOT97MiQ7y1AzRaCOaaYiupdFMI3W3C3tbjK\r\nVUFnixqPqaRX5zTaH3aMZJGRBwuhkB1ZCgl6CIVnusbQdpijIhU4QR2o+QUw\r\nSB1gfkvobc2cCdfUA5aaurlsC7wq4YqsGyNBDjHu45gibX029JviiN1vV3/b\r\n1EeG7JzOCLwdDCQyiCWzkKVfJnmNUmDXB0jaOXeFcW4Nzsaur7LzjVGKPgNb\r\ntaTW9oF9vecm+QSbYJw1kGR6DZffH+GljO0x8H+R/sGVDNK1BtaJhHO0hbgr\r\n0c5hEtiUD/L+jG7w19+rSej0nqry8pVGycW5pGaCKE0IiIASnZQ20WIgqZOD\r\naKjctTzmOiiV95ZEffMBOYaDWaytRP8YpxAPlh9iKt5aLimSG1CLaWLpv+v+\r\nNvrVqYHCVskGsP495QhEi8blc1hxxLOhtkFULs4SOCp9gIxJmR7C9YtJeS9h\r\n8SGnyLuzxSyGmg4/494IJKzEH9ke7XQINQVaXkLPAnN8VhdYBTXb3JLi2THH\r\nrYGPfLTaMFtyMcb2AnoRhcpCGNVYjENXQt79At0TnrT3lBm82TzzDRvWyfEl\r\nhLY83AifGCfNsVXYtqY403+J2680LJA47HU=\r\n=TcWe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220824080240.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9684d37b195507bbc3cdf175e763d6a0/chakra-ui-system-0.0.0-dev-20220824080240.tgz","_integrity":"sha512-SzPrRP8VLmkpbo85EV8irHlklX/mwP5gczP/Pdjvu6zKm7rNMxZ8nSPiVy4eWKZpoDN5sV2hjh48pB5Ee8SCvw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220824080240","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220824080240","@chakra-ui/react-utils":"0.0.0-dev-20220824080240","@chakra-ui/styled-system":"0.0.0-dev-20220824080240"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220824080240"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220824080240_1661328242579_0.01027652216158681","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824082222":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220824082222","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220824082222","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bac2fc8f31d5afae850051b9d624a79ecdbeb78d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220824082222.tgz","fileCount":6,"integrity":"sha512-VeXAOU83mt9nDYPWkowzPWInUmV+v5QfJ+ElrjalNLZUPr6HqmIAaTt8Um4E9dHCq4s/uR9mAK6c/4F5wB/+Pw==","signatures":[{"sig":"MEUCIQDvNQuaV4Vm5bsWFzKv4uV9DyrXVpl5MvfbstIbm8e5kgIgGGtXwEuQpzwHLziTIwDSLtEY8mHuP/PPNeyjwOrieQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBeA6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXsw/+NypAVfl1MYveyA8g8bPQe/maphBepvdln6XaZkdb/W/hemfH\r\ngH8l/8AIx2c0nzhrKVnlzWaRy7iG4b3k1owIn0bO45SOXsFTF+1XPh1Kxewr\r\noCa13+LDh6a1ea9cmBf15J7mVwRIAN5TFsDhtncgschSk/KSdBbP3iAxlcIt\r\nxEbbHJ8363qHoqmsPJEgclxeuk9NdKuzjWZFxh2yt2IXMWyqeGCM9dRycF/O\r\nUWaRBNAlUP5uHIHQvl3AVq2RxwWTHLO7xfQ3WBzJVYoESPNW/BP/QCvkEIgx\r\nxY9/bLJnLCnQd47nZJ8gQvOAq1qrvaU6+MBoyhmcJLXt8M+aef8l/Czxvbrh\r\nNO9hqK5Bq7sQZ2mAZt8ad1uwi/jASdrAJFVFudmZmUi+0HAIjkdpALGk2mAM\r\nT24Hv2sE38V8yUsnXDqLcAUaPoEXMvQSklgWKJu7kqADgKuspgIjX1J9lnLM\r\nA4tOLNXCgb+uJfW9QX/V71lAEmmh+QrCDOl2o3x6OieBSQHjR+EqVsI7gDfs\r\nkuKMTla8M/2GX5C9Ta6+iNUitA4AHin+DV3oaWjJp+1/5XOB4I5ux7+PD7yZ\r\nW1Y2UhYDkI2jaMg110rVH9re7Q0n1VIPeQbEP8dbiNOQ06w2oPDbMn1fyqdS\r\nMSZ71IE/YSapShgdVWgkwW+ZaRV5Rq/QVaU=\r\n=m87S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220824082222.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a6896495fe1c31a42474baec0e1c3109/chakra-ui-system-0.0.0-dev-20220824082222.tgz","_integrity":"sha512-VeXAOU83mt9nDYPWkowzPWInUmV+v5QfJ+ElrjalNLZUPr6HqmIAaTt8Um4E9dHCq4s/uR9mAK6c/4F5wB/+Pw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220824082222","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220824082222","@chakra-ui/react-utils":"0.0.0-dev-20220824082222","@chakra-ui/styled-system":"0.0.0-dev-20220824082222"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220824082222"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220824082222_1661329465852_0.4656978740881441","host":"s3://npm-registry-packages"}},"2.2.7":{"name":"@chakra-ui/system","version":"2.2.7","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.7","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ead90c3122f96dea9aa586cd50d70234a59aa21e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.7.tgz","fileCount":6,"integrity":"sha512-E6eVz6Ghzv5Gy9D3e/J5XWjYheHTCEuenQB4amuiXYAm7bgsjJJl0EHk8kHNW+Gjh4qj9f7F/9C7d/ZpaKpzZQ==","signatures":[{"sig":"MEUCIQCxNvEQkqqICS7KDq2e+sYuroI1j96uk2W3w6cDqs+YuQIgBx6tZ9WPOpEp87+mqhiGrRp9c0GyLSG/mMeebT39uvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBeWWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2vRAAoaE93y/fUfUeap+UrUb8wkPMibND+xJFYpK4y4Vi8Oq6v8vu\r\n1K6bgdcBjgedRXqARDQ18IK3pVqzPR+J8Zu3IAxa8G4Gyhtrcska4DUDbrsF\r\nrRmY1I0Q2UoNxdCd9pEGvW5WCUdTbgeahYwzOwRaJ/uOzJY7IpcrKQvvmhmc\r\nzv2w9DgvKrIPMSK7eb7TZt3ZscsbOuzZc5yw12OhYPByWlu4BkSmB6d3K/hv\r\ncOy7cPuSX6Mra8rWBmq5FY5aVA9gqEebpPF2u1aiiR9Fltw6TCayA/msToqu\r\nd5l277c1G5d2XVfBEKExvC/Esgw5vXXImhHDXajqOkgEQ+8KEX+G4x8lvjYG\r\nd4cHjuneCiYOoewSvvgFuAJ8fpNo/7dHhRumQiiVfYroWDFjyoXy4A0vMkel\r\nMQAwZC2eSTez1YibO9W5xJC1at/yvyJmgQQ62GzQ6S4VigQVClFdnE2zDTfk\r\nCSccviSCTNkMzMpVyiSzyg6PW786/4m8NnVLqG9YSCAjOZeYFVVdnA9FtOjG\r\nTg4WtLiklO8Jei3GEwWuP88DJurHX2A+K5Dv3NY9OgLlFC7G0sxjpJ4d7jBl\r\nS5Y6rAmMfLBcwLWdj2VzKzo/fBnZevZ5sSi1hsWMGrtqqUCGXFYfl7wtl1+K\r\nyE7rtL6p2lZMjQrsrfVTg19VCtNPnFL3z98=\r\n=+wUs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.7.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/55a19432b0082e904f0222bef4965c12/chakra-ui-system-2.2.7.tgz","_integrity":"sha512-E6eVz6Ghzv5Gy9D3e/J5XWjYheHTCEuenQB4amuiXYAm7bgsjJJl0EHk8kHNW+Gjh4qj9f7F/9C7d/ZpaKpzZQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"2.2.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.8"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.7_1661330838511_0.20064302940746837","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824162915":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220824162915","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220824162915","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3f301559a9a06f3c45f4d6435f05125cc9099779","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220824162915.tgz","fileCount":6,"integrity":"sha512-fNWUoFB1puiDT1FKxdid+vC62hnSKGyEdkv/g2GY1tWIWwdH515FNmF6o7/4jsJkWKdJwpzy+wqI4isOtCXAEg==","signatures":[{"sig":"MEYCIQDckfdwiZSXxTLPPT4Kj+y/kuWNpTXwclhCmR7d4UgXAwIhAMe4N6sNteNG9NyuQWb4wNICC0bTulygwjNFlw/JzT1r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBlIAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb3A//cypU+zCEO4fHUgYJoq0cZV3UMn+rwJidvlogwu2/oT7BOokW\r\nOHXrl9CP3T8ICjY2I7L0dsreiK4vZutUmm6a+HL6o6kNLQUaVzW7x6ckB10A\r\nEv6oLIS8GOqJ5SPxSzmpNNzjoVDyuXBmg3x5XEzQzgBuIdCvz0F+V0YCDzRF\r\nnjzW3e1dSkLH9xbmUMl8hrzeIRXEDuKyrcCokTVhg2bf1l2U0aShsXBjNzDs\r\n88W2c7Y/ycXsjNWwkdZpHSeiDfXUEjW5ksORemOvgD3L1XPcdRL7dzbDmRhp\r\n4E9FR9CYRpUzWNu41+P/qARW+u249EiXwn3FDpTgnur0nJq89rW17p7d9hTi\r\nyDqQTHnxV0dvDHoxzbdb62mHefRy6z1TgS+/0bLbiG7OyErY9eGPANe4Bd9p\r\nawoQpXVDvk2irWGnJO0RmptjEzC6JjCpIDPGBw5kDakziU7yXO+jgGJ7R+MT\r\noncXigJe+XaLvr4jj6GTkjAR8FVfM3lkQL2ZLMu9Jw1QY24xpmmayJkXWVlb\r\n1czXywUtXty+bENZOUetaHHfvImRVtEqj+hk70K50sdoXiF5nt0HkYKpC5qe\r\nJVucULLwum2b/3UcEyRe3UowYLWirPTCUdgooUctXUBAz02sivHnSLSu0Fiu\r\nLes85L1ck26L4yiPGZpu7CVPL6PSZzL0Inw=\r\n=RVDH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220824162915.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/63d53abe2e20e2cc66ba1ca924eb4360/chakra-ui-system-0.0.0-dev-20220824162915.tgz","_integrity":"sha512-fNWUoFB1puiDT1FKxdid+vC62hnSKGyEdkv/g2GY1tWIWwdH515FNmF6o7/4jsJkWKdJwpzy+wqI4isOtCXAEg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220824162915"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220824162915"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220824162915_1661358592660_0.8741175480417482","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824171723":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220824171723","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220824171723","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"30f3272d44bce750e3958e5d694a207a3870a7a5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220824171723.tgz","fileCount":6,"integrity":"sha512-vC1UwUQI7xNWgnfIAoL1e6W8moeYZ6Ysvd/2s2lAx+VFF9nZ9RhKNEv0Xf3aEcr983tn1qkDWoZ0hb5G3eXmyg==","signatures":[{"sig":"MEQCIAE0lsjMMJm8aMs2O4Vz4Ru/3z5xjA32jCgQVIXTpWgvAiA9w50YTFHdVl7MBBKuS603tJ7rlwPNkYM5XBFJSOGS5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBl1GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouRhAAhwyd49tHtkk/Tn4UifYwJxhNJGFg8cmvlBwMNQzYHIXvWxQ1\r\ngM64WMiOZ0BGy1UztIm5RoQlQZxvnl2611lV7pw5uBaTTfFq68tWBmqG7Mn8\r\nXSdFnU5GZFD9DJmyk44H9APfbUF7dbf5IZ2eaRCRVM5N4ySj6uv4GfDyxshW\r\nB+b+4UW/g/jwQQEOoKn08725i/M9ih4uafORY0CW1sYzw5gzpIfPLLKx0Pne\r\nxwsFKVoz32EgEsonD8e4ly4AfhYFM0Boal1eelGARKdoH1135jc3nS1rzBL0\r\nBpw9G2LcQTFm9JPdI4WCWUFbHX2k5Vq39IHaWsNW9XYi2JNrF4V+x2Zkynaj\r\nlRdFhXk/LLAN/a4Zv0wczTFE0lso5RVOmt+/vX2aFE2EPOt1GAAf9oT1fWn1\r\nojezvpaTp7x0gFVD0Zerc0qanvwKUW9g4nM1oVSequg5IH4przyQYwxEpNXQ\r\nlDof9ZXmft88ePCal3IKsVHKK6ostGQvsU+HhyT/zFn+/wv+BUhEQw3GvFDJ\r\n1ZEA1Xli/3czCFcxqszrH5MhNpJcV+xKSqka+RwaNq+R3cx8H9rc6C5gcnD8\r\na7dkMEoUoD4LCGbBdtBLtGgEFMUglE5jL+UpUXDspDFuF4q73Uh5ANyus0Iy\r\neQfU6rvTI0JVMbRt8HKsdlYm42yogVxsp5E=\r\n=2ou6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220824171723.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/01322260664891380b97d0516733c1fc/chakra-ui-system-0.0.0-dev-20220824171723.tgz","_integrity":"sha512-vC1UwUQI7xNWgnfIAoL1e6W8moeYZ6Ysvd/2s2lAx+VFF9nZ9RhKNEv0Xf3aEcr983tn1qkDWoZ0hb5G3eXmyg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220824171723"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220824171723"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220824171723_1661361478648_0.3187509919227598","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220824172609":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220824172609","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220824172609","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c954139bf2d3ce12ab3034aea7e82ca94bdc03c3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220824172609.tgz","fileCount":6,"integrity":"sha512-4SruO3H77zJ/WCXpjfOT0UvYm2MEqsurhan26WrbQGxjP0g7BlZhMpbqupKTbuu74IHdrPqj3kzRBgcAGuRipQ==","signatures":[{"sig":"MEYCIQCdLPe2IJy2d5OlUn9aIQjt0FyBhqIOXWrKFex9KAVQwgIhAJTZKT8gvgANvMbbxHuPerypZf48B0t8NEJsCZpmncGi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBl9aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0eg//S3NBrn/qqf9h8G6H+IqU18hgNbHNZsQEC2N5des6l6pzOHRv\r\nfwYBoTlPTDirkf74wU3AiE55fzo1cSeVoQGsGzRywK0cBu3sn6Cqd/378D+e\r\nwe8+ECr1ljd5oHnkE45HnJf/2ddMnhEokLoGMQt0PwHWi3A7IzBkEcwAKuNK\r\nMAEGsAGCQg03xEcluYYO60+YOobwaCz0HdCtuGoHSaPhQDxEhFIiJUoOmAHM\r\nvl7TiFeXFmLwNzVyqSos1CpS64SPkDS5WHYR7KO5ZVld+qRNAxG6uZBo7asV\r\nklbTAJvcn5WFbRSC0Sxakhfg64CeaL9DG0pNQmEFFzPqtl5uFwvOQ6c9o3r8\r\nP2r0qhNSTsu0TGqXGcqSRsX+zs9HrCWVdXUs2hPzRZvk4Rh+b+IleKEidHqU\r\ngOzofkM9NGJg20WeI8ej7yWaxZd7y47Y10NAJUtmHqFApeuPSKKR3KmrjmMQ\r\n7Oy8SvLax8JHc1eVdmF0xTD0eB7kTvotbNyP8hRLygHVSA0P0+bNwbIOeMTG\r\noMyT1YD432w4dKulEP9kHY8iVBSvI3+dVOCh3BsMBvVmhIwqqtONay5gOn/y\r\nmAwoOukOGi4aSZkt1eoTMGxafGbOfz5QlXbvDO6p3fHqQ55omBrFIW+qhkD9\r\nubwC4TfnKToGDOWx0WZuwLFPK5RE640HsCA=\r\n=Jq4A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220824172609.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/fcfcb1b4e5787ddc910bfeb76b8a33a0/chakra-ui-system-0.0.0-dev-20220824172609.tgz","_integrity":"sha512-4SruO3H77zJ/WCXpjfOT0UvYm2MEqsurhan26WrbQGxjP0g7BlZhMpbqupKTbuu74IHdrPqj3kzRBgcAGuRipQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220824172609"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220824172609"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220824172609_1661362010700_0.8253272756709877","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220825104203":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220825104203","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220825104203","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b13ca9cce5768a815d455b0ea2002a393879693a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220825104203.tgz","fileCount":6,"integrity":"sha512-cTFjeuHT1qIrlmba6yXGwsV5xSA/VN19EOb3oB/H75ZXAajqtS0O9uTqN6AhHC+BKMnUgAhHyo7oCZL3PxEr2w==","signatures":[{"sig":"MEUCIAiwxFoQlCLRBboskQa7FUZh5DHKWwr2Sv04NOtV9fOJAiEA4HwLv6rD3BJsmjN9wO9X/mh/An3rga1Amw1tPmkZ2GQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjB1IgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0qQ//cugx0Fp6+IJMBaOeUP0/zxd8BFiThmDXzhBEnDC1bDSG6gvW\r\ndErzdI4MUL4YtHFS3ZNUhAkjYiXGLQ+W9g48xjIvBGgvcwypGUfCFobLuD/8\r\nL9vmUL2kWr8DqnICzXEYI7oNUwRZLXKoy1dtws+I9RqOnSnHq2TgjEFmZCs9\r\nxs+ZJKlK7OHeHaKsyrThmcjuWP7W0u9MqmKfRpnHDP4JzBXGhk7ww1sc1ZnL\r\nMBynPhu5chQijNCx85GrG7pTe4DHEcCZflBfG9FW788f6PzMZJOpDaMncJiE\r\ntqCj3i76BzcYpyboemlOcYQd5WHwQkC0LFlmbcHE95HDogSA7XcXu/K4yOol\r\nk4FQbrhmLrm51/dHLeTSaSTDRlLRMO9GKT+qky/X/o/HZqALyH2dJwkgOqyD\r\nZ4kawcV0VB5O2Xsdg7cy6T7z9GY1q0XbHfV/NRryDa6PubdOpSIduWBKc9V6\r\nRJPfZCoqoPtRXLz9escmCX04dAHytjh/D9bW3WZi4Sn9IVhH3q4LTJomPbNr\r\nxZJNO50gdfPnynxQlYyfK+Yvn7E/OYMPxWn8gOc/xYB5sV0eRI/Xvk4RqUD9\r\nAaUayuoi0rBg1WHl4Kn3ZZYM68Bf6d/qpbJyVjyo9w92ATfAQkyfQchdjkbH\r\nAWv1+9k5VUNS+/SSzwvj5KP5n90O2CM7Uaw=\r\n=IIWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220825104203.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/32413ae77091a892cb165562552ee987/chakra-ui-system-0.0.0-dev-20220825104203.tgz","_integrity":"sha512-cTFjeuHT1qIrlmba6yXGwsV5xSA/VN19EOb3oB/H75ZXAajqtS0O9uTqN6AhHC+BKMnUgAhHyo7oCZL3PxEr2w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220825104203"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220825104203"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220825104203_1661424160027_0.5355405097382169","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220825152811":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220825152811","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220825152811","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"35f1a66959aa0d932a7f97e36754b54f4cecd201","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220825152811.tgz","fileCount":6,"integrity":"sha512-g9vO+ThSiKQpNH1OlSH93H1RE7MdGThPQO5r8L5R0tv3A4UBVeeAfpGie7Nnm0+CmkjgDNdAskxHIGIqcoXsAw==","signatures":[{"sig":"MEUCICQc7lA8DGg2WX3okc+8aQxScc9DnRfgNe9yRn0Y976DAiEAo1S/yV/r+u6UYp+dkjSsP9P+jhUD//TmhRJ6VJLu5ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjB5UuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzHQ//eQSEXZnoIKkFKY569UlXnYdMrxUbu0mdLyzB2Y1R51N2hv+q\r\nbvi/M+ZKwTE6HxMaugMls0zlAY4LeIMGyucBUJOX1UE5zr6v9LufHHP6z4+7\r\np2yCVQ8LxzSCwZiIcyHGFvsAkdJ3L7PoO9MauKgXK6aIMBahZZjM+3ydNEft\r\nIzUWtl1h+3PJBYtQbzSTm6ayeGraNmtjMwZ86s8INkl+9tpS99qxjEGsisjK\r\npDvegl5q/xPi0c1dX+vnVm7igAxBXKl1fICe6HVaNbRzBdUxmKIljoF5S5bz\r\n4VW12bBu/Qk+AxSEabX+ofltezn2X6JaAva+ibRNL0hi4YB+HPRxqDGuUDQr\r\n9a+/QK4iEIAuTt1Wap512MnsIFJSHYQKRv56G2SqYoxwAGt5EhozC2fmmsaS\r\ng3nx433EPEuzIXzgtVJ5LRtL53JAfiExfRwvOUUvzUd3IoqHxKPWMiqFNkjP\r\nsyvroC8DC5uXP76UmeoW8AUs4mTK1r9C9Y+UGMKy/yEhBg0X11JfwBVJRWB0\r\n6RI98L3XvKC0rfxS2l+CAhlyZu/CzEopbKWn3guYMsU5Axb64xmVhDtfNXgP\r\ns1gk3iGGxWmSQv+uQG9W3sgLJf2hF09hUZS1l1l2fikdRLWV0qaUkiJji67F\r\nDGb8KqGrmbVfh2Q/JVVmdtQvN0e9VBuo8uQ=\r\n=QtS/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220825152811.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/af023a9db149da2062a9c9c4bd98275c/chakra-ui-system-0.0.0-dev-20220825152811.tgz","_integrity":"sha512-g9vO+ThSiKQpNH1OlSH93H1RE7MdGThPQO5r8L5R0tv3A4UBVeeAfpGie7Nnm0+CmkjgDNdAskxHIGIqcoXsAw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220825152811"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220825152811"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220825152811_1661441326514_0.2945900518003446","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220826102505":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220826102505","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220826102505","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2f8108035056d91586ae6a45e62eaad0ec7a8491","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220826102505.tgz","fileCount":6,"integrity":"sha512-hcujh+5NRE2B9c2iTovCQQBY9K5LIONV4i0tA3JyINnKvw/jqDTgk0huZAkqwy2noEE508C6XAWrL9I3tXxIkg==","signatures":[{"sig":"MEUCIBeH/vPWCLv/rWF5wvpRv+RoGXFGUCSjIYeKbXarmV4JAiEA1JEY76xnVHlZ/1hjdpFT4rEC8uQ0ZShpyAjCaR1D7eM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCJ+mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNow/9HfT4MY6ln9+Bmdj7aKw1DtAp49ptw7/Qyqanp4Ju/BYgQV9u\r\nUMjm1vyocGVDskxVJ8jhLsvxQ+bkKr6O3HAfwxVrtR9C3SbpJ1Ct0HK0DvZm\r\nemb0LQp2xjTk3DAyCyPyPD0s38Zh3KTKgK2GiK5pzeLWKmGQwwwsNLehN/q8\r\nnXUr9fl4OlPCwNTMncaDhf0l0wM8jUJDksb/UmCExx+BgstSmu5WvcP5wSo9\r\nquRGbuzNnYHDtuWiy8NWW649BFpOgzFXTN0nQcL5l/ABjqpNlXXExzhx8Own\r\nWfgYkOpY4fCd5ZcaY4f3ZR75IT0rI3/ErdiIXFr52CUv7WwiOEh3vTe7gxWq\r\nTjMF5+yVSYNVvH2eIir+mnxBmbRa1Ua9jGAb7xDt0bHBgV2XCFXCmJLQu6JN\r\ntIqxbb5ho11IiP7+1ii3dBePeVW0pzAllH/LKF/mOcwYQ+cPD3NY1uaQMMNi\r\nAv2yyHUSpnkriaG1LpQJ9P0tRsQtbw81vueqmjInJv3I1kBM1BMTXQwrNl3g\r\n0bnqRN5216qw1dAhWjgaXy1rGPhM60UBQvOJ4J1WBP7bOxrw+yEuXs1tXnoC\r\n464t0RBsUo/P16zpFnIksN+UqKh2Wp6heYTppmrtIIQ1w+2F5/twxrssLWfi\r\n5LYOC+EZ8zulPmNwZl9Y4xlnh+a2tla9EbY=\r\n=V1An\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220826102505.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2cb74a10ddfece743b306f323c1d09b6/chakra-ui-system-0.0.0-dev-20220826102505.tgz","_integrity":"sha512-hcujh+5NRE2B9c2iTovCQQBY9K5LIONV4i0tA3JyINnKvw/jqDTgk0huZAkqwy2noEE508C6XAWrL9I3tXxIkg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220826102505"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220826102505"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220826102505_1661509541777_0.6175328330115011","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220826104406":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220826104406","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220826104406","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"56a0e981c4852963794f079806596e321a07f7a0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220826104406.tgz","fileCount":6,"integrity":"sha512-rc36P2o2uRFNKQ1L9416cpX8QdUFHzdeTEAgFulaNUQaL4/B1GHq95r0j5RDZ0r5k+CeIY7s5Ab/ibczFl19cw==","signatures":[{"sig":"MEQCIAFqmSGHhrvXLGmOhGKnfoi75XO5q6ZdpfQwLnUFuPU8AiBtb5sOUZfh8I0XHvSCa7xBxQqZEQMae54xutLfL92Xrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCKQhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU7Q/8Dn5s/8XtlzwMVb99GNU5sSpVZ1GUFyIUXG6a3zXMeoWVut0z\r\npcnQmbaOL3yQYoP0Zuiv4efu94p/hQ5vt+xAsoQ8sjxcgP1BcS/DC6nas/MZ\r\n1/4p3qW0Ks3vG7nfrC8gn2VlRBvDrR4fR0Z/9jQ8N26Abo0oW59nhGbA0rUV\r\nPgo8u9fb/8XLRMyWjR+0SVl3hn7eEwBRYleXjgJ/vNh9jrjmWiRbrT7i4L2D\r\nd0CVxjMKfqQZnOFFj5izc8EgXQheSKDW0B+Lea6kxCna59Bl1KGJ//2A0XCd\r\nylk1poMdveMdgQmt7/dJwBfY5F1GPDnQprdtBPhE8jlxJwy07JrKk6mAV0Z6\r\nW4GMmN1LDxD5cDGoPrK3fEBYlETomeEbxyDVu33V6YlksUfMUtK3B+gchJLs\r\n+IW0itCTx7efD55DuGTUUkyUsOa3VFnadB3F1Ufn8FOFLPGZdrv45NRdNQmi\r\n5IwSytDmyn0AzIw1ujCnrXUv+OscD8svQMdfCM3HbyLVrJK002bcqRRrrCHh\r\nXaNJTFuDN/QABlWgsTKmKH3m0BTVXjlamkoWAzaxdo+/CavJlC9flFtZZRtG\r\nHp1dCDCqG8mLm7/hJE+5UsV3CVfJ8VaPOoNzOQm3EaGOs6ZuytU6qnx6Hx0N\r\ntM0GWAtJ2dRsTmsbcE8lHCFkuISMwIxZ9+g=\r\n=g8IM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220826104406.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/231ab06fe35e658451d8a075af6ba574/chakra-ui-system-0.0.0-dev-20220826104406.tgz","_integrity":"sha512-rc36P2o2uRFNKQ1L9416cpX8QdUFHzdeTEAgFulaNUQaL4/B1GHq95r0j5RDZ0r5k+CeIY7s5Ab/ibczFl19cw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220826104406"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220826104406"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220826104406_1661510689308_0.9435610353823138","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220826105339":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220826105339","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220826105339","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"939a6f6ebe4a26975fb0571a23e981d7fceb43e4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220826105339.tgz","fileCount":6,"integrity":"sha512-FPb7m1yQrCs8pcugkIDVBe4qFIEk+CJ6jucjg8TPW2jpvUjyzuF9+76gdtiqWUQ/+wwvrFFaufQ/caed4OZCog==","signatures":[{"sig":"MEYCIQDM1wJOc2cgQsU3+hWby1AKRCKfvgrbMIW2in/qcXpXFQIhAKOEjQuFtm+LGal2rN0DhwdzTKRif7lm68FcEWl+zlHW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCKZfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCDA/9GI6gssTl34v2IGIfwkSqRgs+jnPxvFXzTLS8TiLgkyxNIxEV\r\nRRxsUMtyCWES6CunguadJS2zHxllJXoAZVNDA1eSWDFHO23DyR8i+fDobjou\r\nklTZH/u8e+IPBMSuXRNmlz1cEKLbea3IckPx01DUyTO73TzmsI4uQJuty9+E\r\np4OLPGX5Taq6ZEkyN2diRU5dbFwpyy92ebfIyvLwW7N9wVWJ2Kwx/TxBlQDc\r\nzFF+Gkui7dBiQgOYEZ+asOYY6ss6by5MzLUi1ZYgyB4ElEPZ9ePqtVcUIy5o\r\nezWrfVc/mD4WwSaY4g4zLykH9DfDDQNjAT3e8ImBk2uoOFVBIvzDpT6/g8tX\r\nboIWA/5lHVVuFW6GGq2rSXNkwS76wOZC4bTYAVty5OhlLDl2WNhJRZRTlv/H\r\nhysQuIzmZUmbsgzmwDv3dLujHRRbx/afGJ2QhDADclxf/U7hKpwEQyXSA9Wt\r\nVtQsegvplU2bN07fNxcCMLhMP9spAM08VMYGp6ZLaKQznILuFCK/LvxzpTWN\r\n+3Qn8BW5/kKuyYetVO648ctT7Ifwu0EiGOGtwKh7ZmgpqU/HnLbCb+FJLNZ8\r\nb/9iOvTlW9nb6J0+CzXkFVz8XdvX7vjE/Tmp3Ig9LcW8Hwj4rWr8x2BOOWKE\r\nFiRimGAkUls2yJz74suHBvbSGsMQHs1dAUs=\r\n=PN8y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220826105339.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d4d7a110cef171b02fe60677395b2fda/chakra-ui-system-0.0.0-dev-20220826105339.tgz","_integrity":"sha512-FPb7m1yQrCs8pcugkIDVBe4qFIEk+CJ6jucjg8TPW2jpvUjyzuF9+76gdtiqWUQ/+wwvrFFaufQ/caed4OZCog==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220826105339"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220826105339"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220826105339_1661511263443_0.300831036336332","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220826112743":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220826112743","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220826112743","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"50976658d038965b4a6964c48e13bc01bd1ce8d4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220826112743.tgz","fileCount":6,"integrity":"sha512-eYtYmgRxAoMaUu8QpOcQdRC/8TIxy25ocG2rhzvD+6Y9IJNNeah0zVv0xH7iNaMGEhj+NPCHYfCkuiqkm10Bbg==","signatures":[{"sig":"MEQCIDJW62LGMkMc+yioeyovXQqcDUy1fbLlwNUc1mt7o5j5AiAdi4RjNqjPRJMOOISEwmn+vkRMfL4mROyIK22+tEqDQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCK5hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXAQ/9Ff9RWEIeBNTdgLfgbUEHT0tTEvukO1h5mgdfl9wuKTflHCjv\r\nkQymUHvcYTYKYy/WlTw5KZOMKhO+XP5hMvNzV8Mt2b8/OW20LQzjmOG4lWXI\r\n+2+8S6+453VO5u25l4cyfDxfOavt7258vktmmOqLzUq41YLs5Q4UQFDi/hXs\r\nQUJr3p45yQRvtYCRlYc+uTuBtaaQHQuTKYbkIkcuwMfPEyuSNVhG3+WpVsFG\r\nptEJUk1qfkMr29A6cXcri+KOkSKTWLY/wWpdIECpioXAtB5lJB65QUrPuRPf\r\n7BoKhG2fOBNXx9WTWkvqSfRVtMmoJwV1RaqYl9COjGONnY+6Dj0o+BVYAe0J\r\ni2vYBPlC6p7fv6aYTHKiRzhhTm54eAYy936TXWiU6MuoL7IJ/qsbU+Gbj5Il\r\nS5BA1f7jEVjJCtVtu6p65qZ5gFK0xPjue+qNojEX+En9dg7vSTzt64xOEg+9\r\nioDT8gd2Aa6cT2Ul8Gi30k1KH290j5/dlNGbldQDj9jz1JHIbm+yfsiU4Msk\r\nv4xDT8Cutv8rHnWmnimHWSPOUNLNAsyRbnxCJjtSQegjxKkjV0otQE0InJBe\r\n1HVdL7Jm8D6A+VQ9AiTmMYGfED3cfAfkshgl9wDVyggJaPG5l76M5fymw7EC\r\nO8hP+bbAw+jwP/I6YpfMAbiRCqbKEXpoXS8=\r\n=xPCu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220826112743.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/61a156c9f3f6d6a9ace05cda394e0399/chakra-ui-system-0.0.0-dev-20220826112743.tgz","_integrity":"sha512-eYtYmgRxAoMaUu8QpOcQdRC/8TIxy25ocG2rhzvD+6Y9IJNNeah0zVv0xH7iNaMGEhj+NPCHYfCkuiqkm10Bbg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220826112743"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220826112743"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220826112743_1661513313555_0.24612420871218132","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220826121619":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220826121619","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220826121619","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b48c78ac5cc94bb6c135a78bf5edd7c1c5bb11ca","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220826121619.tgz","fileCount":6,"integrity":"sha512-wJsmg5fIL38GlBkesKbcTzZaYTo15bAA6Fg/oktZe4wNUU5S+5qCpvHTsHVn0ZDzkvxlNMNi2uz6ypqM0HMgWA==","signatures":[{"sig":"MEUCIBb1OtiZcZO3poDVVEdVBwxwEn92Q34/d6HooIkdqicTAiEAohsxEeqPoY2UamRPjN+6o4h4i1jfGYGX4M7WVeCw7og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCLm4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbXQ//TyngqwlXMSXPrIldK1rWoe1Nfix7fQma+90wU8oj0OuqptfE\r\nbH+R71BFkHoPJ4AzRANTg1JvKVWm0xNmpO/wz5iOXLUwB8vlcVec39xIqZ+u\r\nmAyeJS/jbMxXw1VOy2TaFiRv+kE97o/soQfTF9GYzV1azRzFPRz9U1tyYiom\r\nsVsxGgdux6q4EP3wDhecEHbNlsLubvKM583NwwEA9ERDJKbERQnAxokpuWA0\r\nmzixcx+5uiwpwXKwkhADUb9xnpSe4dX1IknVBOLFSF5f5qYuHVFdH8R3LWE9\r\nyZAkjPbEEkMfa/7bAuLDhMqE/9tbZ6nl1BXLLdPFmJEyFbVC+GbO/YSk7uc3\r\nqs6C0beQ+KQhLuUHJvYHnJRGXcV6/iccHzrVLMA54SYbfQ5WkpEKKzv2qdl1\r\nJXlVRwE0DXOPAWUswtX4NkLn3J5SGGeYkZ1LDhbNqGU3bTAi7d7yvpn7dvQk\r\nn0/L2I5vMbuHHJJzM3LEDG2dj6NlhXJlgCdWrnwuIopBW3WCPnoc2R/tZ/77\r\nO7iFfxSEpkr3ejA3GNytYGViBiUEIbchLvtOwp6+UGPzMY9R6eXOu6je6YxB\r\nqSKfoXxTCxEEcNQ6ebS0uOiP0Ubr7nrPYEf+kCtjszuQGNqMkU1vkdBEe6qf\r\npieJbQ0SSkzIGZNb60NukH6s9V9xPC5onDY=\r\n=HuEU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220826121619.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0c2954827143dd7fde72c089686bbd3b/chakra-ui-system-0.0.0-dev-20220826121619.tgz","_integrity":"sha512-wJsmg5fIL38GlBkesKbcTzZaYTo15bAA6Fg/oktZe4wNUU5S+5qCpvHTsHVn0ZDzkvxlNMNi2uz6ypqM0HMgWA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220826121619"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220826121619"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220826121619_1661516216775_0.251297124608977","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220826124049":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220826124049","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220826124049","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b06540f0e08eda77f8fb609e5e4e2275b0c0c630","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220826124049.tgz","fileCount":6,"integrity":"sha512-D+CvDpCeNwbLl39w/ZZBk5OQbDhyVbXPlkkSqyaDw4foKL0H/M9oM+sBNttwZoQGzixaVS3OKUvUUussWJkO6Q==","signatures":[{"sig":"MEQCIBTEGMNwtTtYaum83WMTsxNDGyKQix1fRLcgQ0HYAQqRAiBCUGXDbuXUzZhgi8ON52riIkWrz4NkjYmRoc6/oe12Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCL+DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNjRAAmx02yS7PrlcZAuh0gHBKqzq3SemLksh3+Bel/dK9jcDPXnhe\r\nGyZvbgGPsFUh0ypS0qlU0def1p/rJGeVONoO1BHG1DGDMkNxmR19gDQSntkZ\r\niVp4lysb+LYgDSAvoyqQ1qcylJH1SV/WQJg9dRs2B+sRt1Eh4vgkfzypnyeB\r\n9gzBQQiuUd+V1d/VE+/hr1gHwyW0UVPcwQZ2rFHL9ZwYzrKaftTxmerwyZrI\r\nv9C5/UhamyficIZVWsxvPqq6Y+KtFqY4t/nf5rjuD7RAmdG9TWNgg6eQMXf9\r\nomfK2gxziwRiqQn//4UFmGL5ByveGTZGWh7/lVTSdJUA77Gt7XDvE+AKkfM3\r\n3cukznToeWc1U0UzycyFBg5u2zxgCjIpnioKVaacsoC9ftWWqn87gn7DqZat\r\nfx++qFigwxFYZhjv//TOVUMTojQDw335jYzBQLJtWXEr9BdkhWls/9t1/sYF\r\nNT/IP+YYI6sL9qZv2BGQauMdJlcNqbc+sT+vUPQMvQ1bNv5PnBWk7wqZMxhv\r\nzR9j9WP5i4KShLXGLnXyzRbPefY6i4SHg5qOCqkdWG2qZGyGoCmwtHr4C2iY\r\nuyVzDXWAnODdIE5eRdblJSK2S1KyfOPqPLxDR16Bko1i8BgVEpxUqGKNs+EP\r\n7JNScSsI3gX/ocnmBsgSVq1BFLBbMOg4ZT0=\r\n=Ts2D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220826124049.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/75a12146d4f37b7456647f97ef929b43/chakra-ui-system-0.0.0-dev-20220826124049.tgz","_integrity":"sha512-D+CvDpCeNwbLl39w/ZZBk5OQbDhyVbXPlkkSqyaDw4foKL0H/M9oM+sBNttwZoQGzixaVS3OKUvUUussWJkO6Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220826124049"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220826124049"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220826124049_1661517699728_0.5509962004948195","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220826130746":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220826130746","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220826130746","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7fc71d7a8031a8da12d02f8045dcca7b752d53f8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220826130746.tgz","fileCount":6,"integrity":"sha512-bacmzTJ0mCJOnKT0xPzEhyScIv78O05CD3SfqPkZYnEa2mEq9nIbx6opUDZ3P1papiCiciDtVd9aXp1VFgfAsg==","signatures":[{"sig":"MEUCICGfz9JHlB9BkACbRaQTL31ayYm4+IQ5kSwSPdklXikyAiEArHUoLGrb9/K3UBV/2CTfdG3H80dPiC88d+92A/44ubU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCMXOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDghAAjsf+rHaJ9O5ad1JDriAjH2DTslPfFNHkrwODTVt0q9azm4ek\r\nLZmx25DmS5h8OeVdOJrgONAB5DEeY6uXZaZXU6GqX6qyf7Hi3DkHu1zBLla9\r\n6ZCwkxr6fhINws4SOKc830Vpqqdw+T+qCS9aUyjWK9PiOGAEEqu+CnTqGOIU\r\ntIeyY3Ytu1E4Ms7DNNr90Lxg5B3/HgZoufh+XQV86ZR8rGSvZcL+7mjtPSnI\r\nYEQKwC5SZvb7F0UtfEBLvqhfRKDp0pxEn3QAhEVIjeBFGk2awO1aMxMSl15H\r\n3PVyrs/UpwhY1l7h9kmPDqYtRHN9jUW6ou1zcbeCcmwS9Djg7sX6VpUnBp06\r\nOi9hgoh6ehW4Q2GCYoOEa1YVUY/16AvA07MSGV/aMjY95mdL/fRcA2ArDUAW\r\nevY1OVnuBpQtfjzT0ST0W3EHC7j4b4mA0eEYxaRX9v/zy8V9Ux12MZLhIF3p\r\nwBQp27EOQ9H2mxsxHtSgSa3PGIKSlwkx32LC7n/uoTp0dvxHqlMZnoOg/C5K\r\nMf4HxLkQBJ+JL1AzyZ2IjPeaLPrAsCIbrTxMKfRJtDgrA0qKlswFiHhcW5TB\r\nqvT8ry8RbhMTxdDfPw+DeT9pYPO55DSzFWdP0XO47h5vrY7DPsNz/CpcfYsQ\r\nSVDNMav0Zwmc4GXVfsTtIevzM86A/p8lvR0=\r\n=/N/D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220826130746.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/57dea9616ca140cc6febdb98b3933a1d/chakra-ui-system-0.0.0-dev-20220826130746.tgz","_integrity":"sha512-bacmzTJ0mCJOnKT0xPzEhyScIv78O05CD3SfqPkZYnEa2mEq9nIbx6opUDZ3P1papiCiciDtVd9aXp1VFgfAsg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220826130746"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220826130746"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220826130746_1661519310165_0.9676894402910612","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220826154141":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220826154141","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220826154141","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"adf9cf02b95daa496f4947f664468dafb68d2445","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220826154141.tgz","fileCount":6,"integrity":"sha512-AreX/88ccWYJ9GhJ1RcuifvxvxHAct7YlwKFKsu2xAD3eR3GYy6RjMEeKuSbtcC7ZUs/e4gUNaU2A19OuhROVg==","signatures":[{"sig":"MEUCIQC6rzB9tlc6Xbenj7QD85QGx9fyyVkSv6fy58CQLJfm2AIgdQs3LDYSoWy2QF+k21EcKfSm6mi6D5aGDgtxi3TfyJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCOnkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1BQ//RjYuvP//OGD/zdkGGouCCKaGmpY+lCHVrnC5SKdQpILtdKj4\r\nzBomxRqHTf9vVvgibI6yLAFcGPSEOlaNu/BN8VoOzK8hojBN+93kDw5yZs0j\r\nrI6KPdc/HUU6ear6TNm0vGi4OUfKQipFvmQoPP9aGzsb7RRPHnL2Lq/rso2E\r\nAwBShS478LaGgfuec1S/siJ+47OIKdKldPOldin0l06klV/7Qf5Tp7hXHwDg\r\nvFs5GO22+pkBcXcA6ZTOIrO34Ddz/ANIvBS2jUVDkX8Aioz7n/J81wkC9Nq1\r\nXjMcgFKGOkRA8PK8bokVvALwvpedmdbBUYA/yd+B/4elbdOhigCDt5Hh1V9T\r\n0xrzqeltAD3yqf1gXOY3mGOz8tSbRvaSVADwTZ2TYEJsiSyrKS/95J9juem/\r\nK6PgfF9rCassTfNLvgeYGM78RAJn3x7Jxfclk47PoH7XQthUQYPrQ3eZ+eka\r\n1xJ67KX6jGUKVnhWyUSyRFJl3zh2L7d3ueWlQ0j4Lc75ln2Yw8HsKaKGCI+4\r\n/bTC8s6dMdGdS3gPwQ1w1p2MybpDkEyeq+4pjOb2amA7f6hkqirPgF6GJAXx\r\nG5aFr1C6nxhzFg+23XxE9X+K1Mr4c2A5XyYRgBLe7nKpW2RSXH+6K0cvA1Bg\r\nn2l7+800JInA0CKvrpX9fCqGwthjZwHar4I=\r\n=jXtz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220826154141.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/459a2f57abdb98d281655b9c90b36899/chakra-ui-system-0.0.0-dev-20220826154141.tgz","_integrity":"sha512-AreX/88ccWYJ9GhJ1RcuifvxvxHAct7YlwKFKsu2xAD3eR3GYy6RjMEeKuSbtcC7ZUs/e4gUNaU2A19OuhROVg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220826154141"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220826154141"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220826154141_1661528548770_0.5636967586517567","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220829120312":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220829120312","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220829120312","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"51d4d95938529b9f4bfccb1b2bf33de72544a9de","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220829120312.tgz","fileCount":6,"integrity":"sha512-g3KPT7VR1EeodaBF4Prv35hdrzsadJPbUx3iTXf26syoLfGSW2F/Qz+P4GPWmw+0Mea9eruL7jSfHtUjRhhB6Q==","signatures":[{"sig":"MEYCIQD3nNJzwBo841LTQISkMLh1Rj4izc526rAG9N+6e8BVPgIhAL8kRN5aX4THE0H+qlW3WKBcqHU3BT9DqdprplOWbdK5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDKs8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2jA//Y0XGK7X5uGORlKhwv0AgdA2lk9DD2VH5eGsED3bTqJ8kkeY3\r\n7MhCxrHbUgOGG5Ac98LNB3hjQ8K72+mJT56kuU22MDKQTe41Im4n0HHkLMGE\r\nf7XDP//+pF+NBOkSyirlSIJVAmgMS6Bg6V2QJGNjdr/DN65FLWxMwa5KBLo4\r\nl3aI00n7EqeXoX0Zk2iAxFNkCFAV+o8DrMZ1BbR2/LYUVsO94HNdNAgGHJ0d\r\nIGUMHUTIRXnKIhOByeY6Hv81Or6R14EIfbTSQ1RwAdWKLp+Mfh8mYJVygExw\r\n3SWbym+n9YM1XwgctBWJwc2hCbgylpOdyOfkGiYaOp55/F7Jn3hqBWGzEpiE\r\n9pYV7IBIiPFHUR4JiHqtZMAp44/AgHfDnKj5fw4b4xS8uStJURLxhl6263gQ\r\nW5WbguUqM122YxqlgTooj4MwNH36HvS1hob+cFgJcxLzOi/oLG/undoRg5HO\r\nUKp0TUSLWpUtGdsdughUbAMzfnCFQm+cDUpOxEqrkb1Mlgyqi2S9l+VuDUbT\r\nCT40XUWvo6w4PmKpHfyq32NDfC7KID21Bs/Wxnqo39mZJkR8C40qvw43RXOm\r\nwV1LrPmWynonVVO7ocJ/qfUPafpoZHl0XNXpg3qTIFk5uHtp3DyW2+WbJBrT\r\nDObOC+KO0EddVOfRrM4a6rGADmSC14W7ZF8=\r\n=QPup\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220829120312.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/305f218cdd4444a69774046135e2808e/chakra-ui-system-0.0.0-dev-20220829120312.tgz","_integrity":"sha512-g3KPT7VR1EeodaBF4Prv35hdrzsadJPbUx3iTXf26syoLfGSW2F/Qz+P4GPWmw+0Mea9eruL7jSfHtUjRhhB6Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220829120312"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220829120312"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220829120312_1661774651823_0.46852254441707863","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220829121234":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220829121234","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220829121234","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"284ba405053730dabcbd9bf3bf4086a82aa69ecc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220829121234.tgz","fileCount":6,"integrity":"sha512-KcenspFQP0UaF1DmGaUOaCpeWEAjHdTex9Cbr00IYRj+iXxkua6eCqTfyQSJivP3bVSH4i308Ypnp4tYueLDsg==","signatures":[{"sig":"MEYCIQD/QvAcWJLuRtvwhSOVl/TlWA5E9ieqWkRP2bBLOpHFLwIhAK2xm4tBxlVTswYAKe8aibeVUKSszf6TVYpUttX/qGTx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDK1hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Fw/7B8/hBIP9gD5Zx0+Ay1kjmyzFpcF27y5B8oVZF/zt9sWRj8Gu\r\nTyODLZzd5pvxhL0Z2bM3paapsZcymIs6IStmaBKypy/vAieWdfqsLiV9y57e\r\nJy3eohN5rF7VSikQj5QeOxyntClKnAyt5g9kdQL8Tpph8VqNpPibPtZNWFae\r\nXQ5FcrylbTwyDbAihYMtDHvlw4lw+cRCb+YhVjktvIrccYRk52zV6nsnFVA+\r\nQX+AohZ7BUh3EnG3f5PVy+KKQYRxutxQOR4mSA/dskEQM/48LMPMaO4J43Jz\r\nkkFMOi+yRFqdTmG1MQcH4lko9FVECOnQw84GRl7w3RaxciXh+nP+mRtc4BGM\r\nkkT9u5BKLOjbQDyPRwCBoE+asB8kUAXJ7pTRaxLnETMnSuTFh3f0D75T9Iwr\r\nBkForxnnQ+QGpw4YzBPnu64tj/PW2Zs0NIEnIqv3Dtco1V/rbhQ3RqZkkmv8\r\nV6OiKRllSZO3KGn8O2x78Wiss1Ipws64wgCvphdHkxIFOExK+CabJuL2mnT2\r\nI98CERVf8tDW1pNydmYyG7OF+Vl8XXt4tIIWAAVDDMHTFrzYfzSJqTViJPr9\r\nkdo93Gyl7+dsuHU3zQb3ep5rqXol1bNfTUzHpUrw0npux7K0xS47yQ7R8FJF\r\nwcLeakPR1mXMtHUifs88A3KfG9F0G+V4qW4=\r\n=G7/x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220829121234.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c1e15baf7e6c3ca03061a325b2a21f50/chakra-ui-system-0.0.0-dev-20220829121234.tgz","_integrity":"sha512-KcenspFQP0UaF1DmGaUOaCpeWEAjHdTex9Cbr00IYRj+iXxkua6eCqTfyQSJivP3bVSH4i308Ypnp4tYueLDsg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220829121234"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220829121234"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220829121234_1661775201408_0.7190721254164691","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220829143113":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220829143113","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220829143113","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6bcac35ea96d7e50e7fb3eacefac2105921c2181","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220829143113.tgz","fileCount":6,"integrity":"sha512-DUWCpkhiAsuJYuZ3dPcgX/5U9EDG0sUlvKEyJo74d2M/x35CMOhZXgwFOgJCYYkL+9aHdkbb9P+jwuVlCxRz9g==","signatures":[{"sig":"MEYCIQDxR3ha4wRXznVBPGLbjy17kh0rKKzutuMg266rTsAI6AIhAO/BOyTgi5B3MbdZrgyFljXJjOKJl5F/IrK3cdAQ2B8A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDM3fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3PA//aKEnLar7smqPZqHCuW59LgS9kfgOk7TASXoRoygd6g+74lVu\r\nO4ssLCsEEFlVba7GfZaBRM8o2FYmufy1B+47i4qa9Ed2kMs4EILAtnJqgQvW\r\nkurh4vAfw5BJFHFVa73ue657Fa6uLgmjHWxksDRBXzqZRodjlky5F2SQjlaz\r\nJgblG6v8bCloztTVbNsUNn64Z/CbmWT9mNJCiQAgGwYY+z/hDnvcNJDI6BUA\r\n6whflkMlspPeYTrmOvW19xXjiRU/vv4JiABGINmIv4YUyEe0x5EVJijcnxho\r\ndShUjyU2vmW1maaGwPrCpre2DxkGOBHMHn4p/lFBxHuaMZ/5OAoCKUH1bzQ/\r\npnK0krtdwjRiXW/dg67ih40l1/mvrHG3IJeDgzX4dVa3fDuTOCHU+z8p8XFz\r\nrSnXyj4bApGjgeDMrfPU476rRn5YWdiTDmu/q3JOonuOow9GZkh04TrCO/F9\r\nn/JrXvCz5O6EvuWPJqn/bZ/r+gtT1c/KPjixh81HfTw6G0px+47/aBdtO2ww\r\nPH38CVo1GKZ6p3ejVmfvVPpEKYM7D5twyHuH/IDyCMI4MhicXApJDqKgE0Vf\r\nb9x3AX0G1ZEvbzrEUZsv1zZWJs6jjmkOlKo2dryjoqPD0gr22/pVenbjOico\r\nQlQ4aHF3U4TtXO8MExTZ+Q247NpKKjVTd1U=\r\n=WZy+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220829143113.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1bd642cab0469b7daaee90d5394ea702/chakra-ui-system-0.0.0-dev-20220829143113.tgz","_integrity":"sha512-DUWCpkhiAsuJYuZ3dPcgX/5U9EDG0sUlvKEyJo74d2M/x35CMOhZXgwFOgJCYYkL+9aHdkbb9P+jwuVlCxRz9g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220829143113"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220829143113"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220829143113_1661783519621_0.20334556072013577","host":"s3://npm-registry-packages"}},"2.2.8":{"name":"@chakra-ui/system","version":"2.2.8","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.8","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d4306367b884fa225114837598b7701c4f6ade31","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.8.tgz","fileCount":6,"integrity":"sha512-VlH/kwND6C563nuDtpovxCUSTLvXkEKQOwPWjxgHR24Zam5vt1cH+OCy0Xv5ODZMmzduYmqIq352yU5L1v/gMw==","signatures":[{"sig":"MEYCIQCsi8ao6F6OLZuInb6vAZA9nMj11nalzgPGZcOGsudl8QIhAJXBHehN2Uf8ocA8OZaQgHz+TNfh9QVp0o1pYRkCXWnq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDNgLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKhw/+IEkovG9NrNSKpfavgTN5VPizwKCdRvpxtFuMqoFWG0UnNmxX\r\nHsnboCN5PL92pgeE95g80a3jEZ7vrm9F3f5h21rPbZq7NVdSQm+lLaffl6dA\r\nK3P3CEA/8M1ltA1Fb+hocsCJLeeli0Xb/wxWLNgLhG+e7ak7LnhVsDkK56We\r\n6aM7wNLZsefik0xpw9lBxg2pYaLI8jGYghTDs1l7BrfqDfgW/9OY2tB7KM6u\r\n9ddfCZW4+5KcuiDpmN5ZqnScL1rU8suzMjAM7wrjotITQ1ZdQoBA2Ud/0WeU\r\nxbeV9oYdC4HNA0ywH8nVB+UFwpu158XcQVOYVGhq0OQtkk+z2y1KHjwddh2F\r\nRTUCO9Ns5AVaECgybLu10Cx74Bh0AkZDWzitgS7+o79BfYiGxqe/W/Nag01x\r\nShjkkUmY0J61wXmdV549Ftji+W8dcRj9OPLwSRpJU2QBKWMV97rQneaRk4sP\r\nq2e/OWp//xg3FVctnCqw6AgPqlYAJdXBQ+em+lkkmTJkBN4/D8aCEXG2FGsI\r\nNucNSqwv9vBmmKWmysNkkXJM7511PpI+GZI/M6zhoCiq4xD9caxBnYg7hPlv\r\nA+cgj1v1eRqUXFJPWTEkcDbM8DhaQvkkcrZekHTEw3mAvM1NMkMJQ729Ik4q\r\n9ppdfFAxm52Berbs1J2ZbzQHsv/eSd2eyDQ=\r\n=2d02\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.8.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/bf1e928701c32a65dd63766b5d246b36/chakra-ui-system-2.2.8.tgz","_integrity":"sha512-VlH/kwND6C563nuDtpovxCUSTLvXkEKQOwPWjxgHR24Zam5vt1cH+OCy0Xv5ODZMmzduYmqIq352yU5L1v/gMw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.9"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.8_1661786123650_0.2694438275183362","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220829184325":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220829184325","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220829184325","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8edb69416bbbc5730f6dec65433c2caeeccbb957","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220829184325.tgz","fileCount":6,"integrity":"sha512-YosywNbhk0AwToN22nqsuxkhJcxarQWknDEqMsHwnjDJyWt46ac/5i+s7mwwexVeeuv69NL8sZILjJbIDvnoCg==","signatures":[{"sig":"MEQCIE5VSp8aWG1aHjgmUIebh7WunHMPOFa+kY6m8trEstzLAiB6UQzABvDiuNZD2D7/AosGtudnMrDvMoitlTR03FBK/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDQj2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3zhAAhw8C59q6u6ju82riM+AHU4j6d3zKMVn0x6Mm8tJ2vYO10Wgc\r\nogvMqhO/Da2ch4agNlkenTUByQd+BRaN7gOcHhINfmG+Y7p5+SMGLc7ku8Bw\r\nYEK0eRcobkwqwzofMBWlZ6NO9ia7I0mZWqGFoPzjTihQwtERdbSlM+3ZR+1A\r\nRTtQph2IGtldsRJwZ3zWuK8FC3gl6T4LI3VqcfpvlOJS+GCwcZod/45PWsE7\r\n3l6rniNbPWQclXfgpwhoAP9viib9lMwZwR5wdWpLczDV4ogsfG4yJAnXppop\r\nnH6nbSVlPtkCJJEbaOmQgHoa4d5qnYSlLh3n0m8fAF/ol8W22EVpH8pFq1ME\r\n1pL5rtIZt/zKDUQhkKjAvzzNN1UH1yFtdXaSDDy0AM2bRY/IpKponjY1xPxx\r\nACH7pyC5Jbb3uw/dfxIVO2kfCyvWkaI5/7WQRtblKz0uDZ4/M0pBXFbdD/Oj\r\nSG7Hihrk2mhzzSYMcv9+LHiXo7c4q3x73ukYCnCB79wRg8ylgxmiw24OSpql\r\nbmvbrVeKPwB619srkdtzr11hXDyZGtqblUQTJHis02ppDEiafBmpHlEgIt1j\r\n5OCyO4wbIpk0px4e8Ni9pTeoYGL9DxeIjxAKijzF+B5+REoU7DplaypBmtWp\r\nw34OBS2K2HxlbM0acfskD0vFD0/TyHs+P0o=\r\n=1x6K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220829184325.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b7cf5cbd5b16ff9cd4649fc12097ddba/chakra-ui-system-0.0.0-dev-20220829184325.tgz","_integrity":"sha512-YosywNbhk0AwToN22nqsuxkhJcxarQWknDEqMsHwnjDJyWt46ac/5i+s7mwwexVeeuv69NL8sZILjJbIDvnoCg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220829184325"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220829184325"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220829184325_1661798646376_0.2531888650558476","host":"s3://npm-registry-packages"}},"2.2.9":{"name":"@chakra-ui/system","version":"2.2.9","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.9","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d6e7dfb9a954b8ab03c28e14c69aad56a9fcffbd","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.9.tgz","fileCount":6,"integrity":"sha512-SyTeIGm+goyYK8vqX4dU6oeLhxUAeGI3Cl+mxA+aiKIX01YTALhTWhpbrsuMYBevV+l9EGK12egPUQE+Mo3WlQ==","signatures":[{"sig":"MEQCIBf+iawz+Bn5K9pQwFKFc/bZy11XQY6G9mZonNNinRlJAiBUbOZ3Qs95zP+R4lkxxWphWAEvq1XKV1WIQKJ4mZCtmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDQznACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocdRAAoQClx51DPZFSKjAEmBoTotIQVg5N3/ud8BwVXSm5L4D3lUcj\r\naRUcAnAU7Zma2BsFV4olBaH62+GkQr60h0cy4ev5Zrx+sv5zP2Z0Xzm5/xu4\r\nLzb5wXOVjtyPY/UWQormZTxqeAuUQkpNVJv6zmA5my01M1JQOJwSsa5/mniJ\r\nEaaax5vUpItmE3N2l0nKf2iCHZ9IC7YtiG2q66bhdd9STyQifpC/rFGdTHaH\r\nW02TGrUSevN5C+LsjejOCb9JeN7FG+9rFs8l2cl5ck8XeBUfWlQCeBeB6lBb\r\nPPaCMgj+iQCfplAEITFU4BhBLmxN5bjt3aR/lyOWVj7gqMV2ifCuq6P3f7Wu\r\n2QobRxKK9nFaonkSdMuJ58HsuW27FV/slZydUvskpeDAIjNGPMDn3KlqXKxY\r\n3L3USc0yUGtXecDcCeEanFCxgi2DgBr+3d+flEGy6AMke78d3tP72pBe82rY\r\n7fR/XYsDTaER9pO5Cakx0EsL73YjACSKWgKYtHVbp3ovQqSi2Db6Ow1n2y8H\r\nh0cCHtJGdIkU4UWCALyiMyitgmPTNnVdXXF5e9p6jZwdnANXuhn8u6Y7ao6E\r\n/i6T7ULMi4Qk1CCpS3n5N2uZO6gxbMr88zT4xb4FQ3XSifT5LwP1P12kGJsH\r\nUJqi7oUsTkiXwBsIfLpnw0gQ3XKYMZX6tuk=\r\n=q+W0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.9.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4bb0a32076212e23aad73e8f269169cd/chakra-ui-system-2.2.9.tgz","_integrity":"sha512-SyTeIGm+goyYK8vqX4dU6oeLhxUAeGI3Cl+mxA+aiKIX01YTALhTWhpbrsuMYBevV+l9EGK12egPUQE+Mo3WlQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.11.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.16.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.7","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"2.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.10"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.9_1661799655461_0.7687309353923695","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909074555":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220909074555","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220909074555","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7766a2cea11be37126de7d2bf106433ead8abfea","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220909074555.tgz","fileCount":6,"integrity":"sha512-8IbCfMMhZOR61Mokl3dOW21ZbmjVmy3zeRlThn6GBmOiKoVcA18VeGhAp85NCC6zGV8Xfv+3T+1Gyqb0LgXqOg==","signatures":[{"sig":"MEYCIQDzX75W8bZQK7Cj5v62+Z/RzEStFU80elItBE1mbZn9fQIhAOZTsnEzAc2Y636vm6aVW7PfcqbNAzfSUuiFAglyCZ0E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGu9ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT9w//XSJqexy3ftpPVcvfgNvkwC6wnTsb/7oPMyFshDSTZCcA/bCb\r\nVDob0ZQvos9ZJiEnbFlsjb5uHUiKnquxX8FAQWp6MHW7QPwBx6v8pCtzpTCK\r\nXTeVXp2tmpNgp88RuPr0zi4EC7Ix8DtHew7zUVwsBzkGZnm2+gTAijb3cAr7\r\ni0/Wf+btpsAUm3z7AVX05T22XE1tnV7uP/KzePwACY5b+B+ZFx9kXGVEeUwO\r\nHaQDnjsTAsRV4WcAHCpJNFQ8lPIpgL1aJPHd+xEnINb7p9Tr/+YYGOVn8v9k\r\nBg2o+96e0jGy/eCDF0xKJl3FrNytJqhY7WkKrq00i8qIVKVuX92HS6GR15Y9\r\n0xZ4Lzgd8FGwdJqcSxb+dHbfxV2zTepotz04Xz7MIl80IxbjK0H9v/6Ml9lv\r\nECMyOwaW75Z1JRAQFT73tNOcJegkXDBFw60EV9KnB+AbxErxea/8ywSY9AFz\r\nMjCH2y+NCbThlWVbnrHyr7z3Z2RDOYhpEtsO3HIERQI1zwLDL23+ayf4geTC\r\nFPGRb9AjKud/CLdOzI2pBAFcHF6uvtViKoc1jycdvaveqgtVLgFiCq1TXQ0E\r\nhU9KPWLGH9F6KuzjcUpRGvcLG+Zln84GFeX4URv4CXnZQ2yxiQ2eeMrtPIFz\r\nE9gM+bVm8aZCxuYkNgu6JXO2GEH0+KaVNQI=\r\n=Kf5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220909074555.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a3b497ec6b76c54d4010e0b5da576b8b/chakra-ui-system-0.0.0-dev-20220909074555.tgz","_integrity":"sha512-8IbCfMMhZOR61Mokl3dOW21ZbmjVmy3zeRlThn6GBmOiKoVcA18VeGhAp85NCC6zGV8Xfv+3T+1Gyqb0LgXqOg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220909074555","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"2.3.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220909074555"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220909074555_1662709593142_0.10416486270986569","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909120637":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220909120637","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220909120637","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7bc8e6bd51cce19a7df397c5b09a3cff2382a626","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220909120637.tgz","fileCount":6,"integrity":"sha512-EaUppYFZ53yF9h+rMQXPI1Mb2hFlZuqffgSKQ2to1BUPndDn1zPVAFk9iTZ+HpDum1FpafxuZstUFh6M6fc/ng==","signatures":[{"sig":"MEUCIGTP3FKxvRcdWuX7do5fsipyQeplJnlhA/70JYos9DgaAiEAxhpLJ6UgqrsmZ705fPb9KrN4WJ2VZ4vO7eqxwLhXz+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGyx0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowUw//Y7jaARmC7+frrMlsO/qHmGFoatGMdQnQdxY1Z8BIotDjodIC\r\naJMxLfnaxu2ZtQ3rjbYznghF3YX1AyZpr1xpplnoOX6bpl4QU6BNcRR1u9Fu\r\nc9jqCScX5gbIRuG6d3DJKwFoA8DxlEyIRqOKiKOT/hzdFWvZDjFHfTlWzfOH\r\n9k0OUqp8Tr3l0dp6Nzx9TXjB9YeLqqmp+qnQ7OUGyo4lHNcgUofpnV3QerWt\r\nztIosyfPn95wk2vDGHr1v3oj3aLMAv7vIzdWkXnYSKQ6PSGg2BDH7fIUJ6Ej\r\n1GifvfOwdH0lhcc1ksPOozlh+VeZtPL1BkrUCvwquVBPzeJuo+kEEA3Q6kvW\r\nzm5+Q8POGPkJERWYnHSwGRq9QyHlR921HVBhWQOT3yrjba/G/EmdoNC0kbfG\r\nvB9ADpu4UXZZo7BcKvXJh2skgG1lWX9IUtbvGA+1w92cgO1xhewkIO2ttLhz\r\ngh/t7VmZCFGUziqval9O1lCn01gIMWpeW4QJt8ds8R0XfEekTPgbTW1m3nxk\r\nRXsL+EDEPUnB3FhGkBwmqucSYNgOHAGNNxnVejzjtAnDmJ00/hvBY62vs4VB\r\n4FtZ1OpL+iYRK4tjzQJEQq13+HBO8sQaI84Vd2mCheiGpuriOGan/p6XClRG\r\nHMBPVftD4dVg/CkZMA8Ax/6w/YM1zUZjjq8=\r\n=ekWi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220909120637.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4816393e6e89d2d902635a0d85e942e5/chakra-ui-system-0.0.0-dev-20220909120637.tgz","_integrity":"sha512-EaUppYFZ53yF9h+rMQXPI1Mb2hFlZuqffgSKQ2to1BUPndDn1zPVAFk9iTZ+HpDum1FpafxuZstUFh6M6fc/ng==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220909120637","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220909120637"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220909120637"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220909120637_1662725235951_0.44262128478828267","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909123132":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220909123132","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220909123132","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"764718a54b572015d828a5ad13e5aeaa84834c58","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220909123132.tgz","fileCount":6,"integrity":"sha512-4vgNM9dPqLPpV6EPFFA2kvg7yXpOyTgqKHIS5BCw+Ldre3RZVqYaE3gRUHA7VrjmQ50xswzQEm3o1tOSC3e9xA==","signatures":[{"sig":"MEQCIEt67/yS+4CrQv38dqV1X40CKnN58B9r4IAmgixD4kCIAiBr+lF5f9SdKmYHZr5Fmatu9jd4hiqrpukc1bg1dAJuVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGzJNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwxhAAgfmBlrVMeX4duaTmc9tCtz1BTJilgNesLxJ5Lh5PSeqd84g9\r\nAOkFTkgYtnjh3qUY5z+mMvmT0gfotuYcBiIc/wKuQ1n+gFaQrt2muj5JU8l3\r\nxKVbwmfhiDuq06QFY5MXq0a8bOIVfa7ZpOCtXxJH3rd1wr32cAuULupFZVqa\r\nZhyjj6juKhMw0ARMaG2JWmtKvrRoYRW9WKo4gl4YdYb7RWDPb/rEjAW1XF68\r\n5s4+ZeAGKCa+TWs82yWRZaKUovv/y9mNzIynfNzz8MBolbBtWRyh+zhP1A2j\r\nktdWmz89sEEi2RHA+uOX+9yzjT7KgoP2q1c4J5CNwrxE9jj40EZzXhaqbOs/\r\n5U9zLt/liZAR0KGRAFAAA06nKcc3KXnMkmxcQg9b+S27xTA5d/dxoPU0Iaxw\r\nW2/9QpJ6cbpDBQgBK8Mn1pa16r8rjrUdFcqtNvjplm6btKDA05H4R3d0sSvs\r\npF+xwUP8Ng5lZIAkUg5OhIxeZuE/H+FvfNxx2dNyUIvZgHvSlVk9x6yAGOub\r\nhMlfwRP3QqhBQZqHfAthDP8ZaczzNI2YtDXhah/0nBKP6lBMrb/WzV57NoFA\r\nYKdhZpL+GOFHEBGrY0SkiovFeBL+Nnai50h7igl1mnlydYTxv8sG9JvRUx5o\r\nD5lChMw6gdiFw+e3M3sKB/vpPL8DoVBS19Q=\r\n=XT1o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220909123132.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d7df667f5bbbc2a4c1626b9b2d128675/chakra-ui-system-0.0.0-dev-20220909123132.tgz","_integrity":"sha512-4vgNM9dPqLPpV6EPFFA2kvg7yXpOyTgqKHIS5BCw+Ldre3RZVqYaE3gRUHA7VrjmQ50xswzQEm3o1tOSC3e9xA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220909123132","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220909123132"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220909123132"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220909123132_1662726733146_0.2783452657132428","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220909123934":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220909123934","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220909123934","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e568845acc707e9a07e0400466160b950220d461","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220909123934.tgz","fileCount":6,"integrity":"sha512-fJYJDco2YA4SDKnUkFlxvwqik5tPcsZsqp8oiYHTWR2BpnfIT/OPEZUti/7C07hYpC9egSZCK8mmpSV8b1I1UA==","signatures":[{"sig":"MEYCIQDu81i0XCGePM85gYG87Lbcd/MeZcIIROiCHbMl7LnULAIhAIn10RqLDmR3XkTqRKuQMeKdOOV/1bNHs3pGhdUuKhTd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGzQsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHWA//Z4F+Ceq8MBt3QykCR1VKbjsEMUfcfGQ1ERcFQvORA+1uW4Ko\r\nU1Ul/XX9doKdgqCwpneURrKtlbZLinuNCCamEyCjiXbyrZ+Z9C3NwDyJeKBA\r\nps56jhRkxXFGEVpP0sVJQz4aSeYW7S8Lm7ehZCEUNys+ozROcqbig+9IRZL+\r\nr+KEBTTwa3tX/ciwQM1V48jUxWn9OK+OInsJZcUTKt/CTEo/qVyq+t4pGZ/t\r\nrrQ0p/7f3PdAP8BPKyLqKSiR7A2z/qSeOc3w2dmQMPdZ72K4Cy6j02UOCzbv\r\nGGd/q8ip5BiL7iQ0FPEJCtF9bzMcWYeOVJ7yoKbMUf9U9j3feOkqX+K0AmK3\r\nMYyVJF5D8FJtzKTZwxpVd4wKEkQ9idSG9SsZtcAVbQTCNVni/eSoxJYJrFSs\r\nscaPilRvKK9Ha10DP36TpWBb/qzogqCjq8PsZPeDzaH81gSHSs59QMouriPk\r\npvfP0Ei8AX8Z5YQ02bom4O5rrQuU4NKKLsDsTzlfYnUiX8Q2ZLtTD0QVh9MI\r\nwYA4F20NkR1qBXdV8iHTtq/6OoTRcZy8ZzlaVc8xGPpX34EhUJU8xNbeGTJ0\r\ntcWOcDVoBNntJK7H55ipxeTdOO5HWT9fG6nCaxDk1R3LyFQ/DTFUE6dFSPMi\r\n9T70XzfsOB+Kw8SXuvhfhx/eA66NrRBzaio=\r\n=7r+G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220909123934.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3a9108d654b12b2f35e4029b349f78db/chakra-ui-system-0.0.0-dev-20220909123934.tgz","_integrity":"sha512-fJYJDco2YA4SDKnUkFlxvwqik5tPcsZsqp8oiYHTWR2BpnfIT/OPEZUti/7C07hYpC9egSZCK8mmpSV8b1I1UA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220909123934","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220909123934"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220909123934"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220909123934_1662727212647_0.37570561960096605","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220912120959":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220912120959","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220912120959","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1c9a487fcb6ff87ccf8d93780283dd793118f724","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220912120959.tgz","fileCount":6,"integrity":"sha512-pEwUMBeZ3fW2HEL3fpENyZ1lS5wJBw5gCN49wmiYW6EOlLd1WIT8lo/muccxSVeTeyL2EscNVbSFywRmjWVrPQ==","signatures":[{"sig":"MEYCIQDUrUrJEuDt7Lsz/J8UTZvIHM7rpDfZBilQpqT4QG6+igIhAOH95gTHZW+6Nnvog2rOcm9ZMLHCvi8qYGTT7LQwiHeX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHyHhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpc4w/9FF/qZ+e3kWZPZgXchdd8PLdiGbKqzAZ7oayb81Za/eBMZQhf\r\nAKSfMtgXXhmWyDML12m1tBoX44Z2xHPwE/uV6n0r8Oq+eSETUs1+cuhxhYAA\r\n3ACOQ0ahfrerJtuPHq0apBO6zdGrOiGRzaD6IeQeE+PhOSsPfcmdvurtEN+1\r\nhBuZJLMZJ/8rQ6UsoUcZy2UhXzWHfpUoN8IpkkoKxcxuv59WZVR5Ca+gdIgE\r\nwMAtb9mgr0kyyYeNUEc6UbfLk29VcGCHaVq9q15MXcmtjbaYdJIx+LVbm1/H\r\nQVTXk3MiYG8+QDS8MQn3YRyuBmEwIMRcu5jTQ5VInjfZTpQCg+tBm1h0zDjG\r\nrxhEY6e7GYZJ+EIuuwsMtqZLH7+BYwntcU0jdmzOJBbBmLbd6bl5cb9w5eAq\r\n8yMVPCTXznFnzlm5lJ8f2fsx7oAIH0OxB3wUyt6zMSZMUohT3aWlwKR/D+Vd\r\nqJa3a0SwXmk5+xx77gE1zVcwocKAni34m86FwGWbiOpGc10vdZZcu2CF+87P\r\nA7awUNmxkXqcP/UpjnGlOQI7lU0TpVFLWx5NCK40MT/Eo0nmDkex7183xtDQ\r\nK8VvFfR72iv60VeDelkAceFckOMSONdaGFVzsHlqt/KxDW3szDs1m5xbnY/d\r\nepDI6HR8PmmxvuAQQPtMTbiIZ6Pxcx+o9gw=\r\n=0Sj8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220912120959.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c290f29cf874968f22548658772b4b60/chakra-ui-system-0.0.0-dev-20220912120959.tgz","_integrity":"sha512-pEwUMBeZ3fW2HEL3fpENyZ1lS5wJBw5gCN49wmiYW6EOlLd1WIT8lo/muccxSVeTeyL2EscNVbSFywRmjWVrPQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220912120959","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220912120959"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220912120959"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220912120959_1662984673080_0.8873776522494874","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220912132201":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220912132201","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220912132201","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"267ce4501459d329bea01cef361cbdf202652426","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220912132201.tgz","fileCount":6,"integrity":"sha512-LUAU0TniS0nqFtvJdJDIW1H4pNfztksvmyfTM2bLSZ/BPkQ1nNl0xDJETp0iOrpXRNnWbKNxPKtbEhQ7m8rF1w==","signatures":[{"sig":"MEQCIA224kHnTWEoup+iZCj3qIYCe3Md6dfD9izEemHKO/5yAiArNIsv0gD6jLxNKFYWBqzyruCyY1EGuLe5nct9lTcdiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHzK7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1jg//Xy0GMChH/iy0G8Rk7Cf3CVKIjbO2M3bSNHWu5MuQw2ZzcsU2\r\n2imf5d3hRjmOva3SgbuM0PxmVEUR2q4pMo4sFkCHmHEfaKOgW3ZbnRxMrEeX\r\nByPDztdHQMagp1ReAVQbpJwI+9GTh/fhDN88S8yzpK8k1+HPMUp0IUuZjw8I\r\n8xl9KsM3FlgTjdFUGZcAkDtsbUv5rKE6B+CBekCuFdUN9lyMndEnrV2VNFEO\r\nL69wPS3GP59psSZsxkxAkd6ZKVd2Q42gaVadQC9a9XDws3Ev7UWs1w9SE2nw\r\nxPWASEOvyqQPofWBi3pPaueonMvb68nHUZ/Q6UUqjBhiKZjaIwriPVOgH2iy\r\n6fAZSzV4FTvl38G8YgHwzYMKedwuHZJPdYkMo0QgazXNVyARfiHkbnFmQoLk\r\nXa4zHUZeo26G3vVQiweSzjc2mIGL5LEbKIkXevCepyt6vzK46EY5JOOF9jhd\r\nR2gBCa+HSjn2u16fflNTfsP4Dvbbs9PUzgKtB6Y/ItDbCevXQwQ6ny6viFEz\r\nwSXpJ3oPUZig6JjhLTk2CmUDjv4Gwjpr/zywCO6lihNo2oSk+q1URaqTJ878\r\nZAyrzRo7dnwq9kiUhjUtYyZDG4kJ0RjZqaQqfWTZtMNFFfpJF5hbIGANaXvu\r\nPAabFARQMSliCBPOHku+vT+OVozjbCzSaJ4=\r\n=pRpl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220912132201.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7e1c7b3dd720eba105e5f8ca62172bb7/chakra-ui-system-0.0.0-dev-20220912132201.tgz","_integrity":"sha512-LUAU0TniS0nqFtvJdJDIW1H4pNfztksvmyfTM2bLSZ/BPkQ1nNl0xDJETp0iOrpXRNnWbKNxPKtbEhQ7m8rF1w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220912132201","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220912132201"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220912132201"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220912132201_1662988986952_0.677701724156601","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220912133211":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220912133211","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220912133211","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d8dfd45bfb93b12075c32dee8111e18bc421b7d1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220912133211.tgz","fileCount":6,"integrity":"sha512-COayGSGxPWU+zRoOPdG170u87RwyT+turkCBKgYK2+/PyVipU6qkPb+Sl1msIr6jxPKSVksTX9f81aJO604BfQ==","signatures":[{"sig":"MEYCIQDdehnpMdONKiOL4SO0cb4uqV5roQXBc9E7yeVLSXGQ9AIhAKDtXBfwIiuZIOJCAeXm8+TDsFWi7lACL9Tur4g4CIFp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHzUnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpIRAAj3yAsjsKu0OlRVlsF/QubEqPRZyGClossRbn7hcT2vARLNPT\r\ncUrC9TJy5hBCBA6nD1Ym79KiLgRMg0olFKo/KX5cuZptEdT4VDACAXDfeFsU\r\nG8tmxzCNOB0+pA4oWD86HhQkM53AtB+233xiCuXL6ZgIjh6MT+eTJYwNPpDc\r\nNfnH6NrrDwMVqHQl5bSTOBX12rbMAmxIZBCKgsJ8I1DGNdgG1oGdx99gMXnv\r\nfaCELmRJnaTrRiiQbfN2faQw/nFOUW1Nv72K7f3ETbTdnJhCWIXNB0vSrXIB\r\nbkAl3fYYaT9cSRGCbYg3ryogYgLM0+pTpVO0CHNycZUub48Pp9b11uh6a+Bw\r\nf3mI6nxR1gi9jSjLw8UgQD/htcX3z3+hqDSVTTGn6H4JZWCDc6wsm3x2kERY\r\nPh2kZP+tWXYQij7vxNamK8ku5P19S9aCofYLBOxRQGapgPvth4TuIdzug6B4\r\nVfiyTrMAdwMoNwZv89arLieN5R4cFUuGk2rEL1QE7nTBnVhiZiZTTLuB0chu\r\ncem/1o71iYy5JUC1ajjarGyfU+L0gNWTdjDnb0yiJLkoFWC0fC9UDZObeYzp\r\nnDMi2xjypFr6Cw2Q4tu+Kc2rZJj4vNYXIay8dRz2KekV0nJM3pi5Br652z++\r\noLAf+RVddwwfF82bwY9Vhu0N2mEIXqIJg7M=\r\n=IT7b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220912133211.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/003e6aaf5eb75a996518392244014b9d/chakra-ui-system-0.0.0-dev-20220912133211.tgz","_integrity":"sha512-COayGSGxPWU+zRoOPdG170u87RwyT+turkCBKgYK2+/PyVipU6qkPb+Sl1msIr6jxPKSVksTX9f81aJO604BfQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220912133211","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220912133211"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220912133211"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220912133211_1662989607480_0.9658401738002578","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220914090509":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220914090509","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220914090509","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7ae4fbab8f9c883ffa5e0d0ef7eb49b1a6ef361b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220914090509.tgz","fileCount":6,"integrity":"sha512-7lORynrBh/Qje20R0WiXeiSgOSUV9+mcL/tb9E3X9fDzcsYV03KukJ3vyDsVB8xC9Chc7A0+u3zhyAcM6KcXng==","signatures":[{"sig":"MEYCIQCFjIV38A2vZKzBLadGtwshw2Pz/frGT56UZJeLpY9GTgIhAILogX0J9emUaiOZh7vd5BxewjfDlwMqgNqPB0r+hYPZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZmZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe6Q/6AgOtcidh32jLtW79rNqSuJDAZT+cwInMuVC6mp9VGXaRywZc\r\nFyFHT1kd2bI7juPWUg6nMdX9qcQ4pqx50bqOHArEugL4mlWCvho8V+/FgYBp\r\nn75EdSNg8mCGdx/89+VdH4ygXq9Nj2Sw2MuHdI62VRX1Jbfj6qLlWFxd7e0r\r\niK52oy0jvbLADsd2jkorSH6xn2sjX7oEa15Msa+Z699U10ZuHxZtbpKpVtE1\r\nfkzLBLazYYCs3j43DJcKSBFoA4KiX/N1zJu50AfAmP1LeQ5e1jSJlQ6lT1ZF\r\noiszZ9P0BYUfizky7Q7fsWrZnIHy7AwXTnWLsU1wrLKEXgmCgao4niOPzHTp\r\nWs0AO+7+5lwfDG0/4JVIM7vQDg3nEk6PPBz7S9g7Iyf5YEI41Wir62hr6yx8\r\njrTexdVj2NcLeHGKzNqrwcNdxxkgHiuEFXzicNklwtptFFr8tEzX+Lgf/etr\r\n+lphwz6ei8XO6YPL8bEmKa9ZXs5nLNrsvigq3648cKRrXzLDXOfb0OL0694K\r\nuBc4yyUutrdQJI9dbMLV32hry5Qe6F3ThXeoC6Qv75GWTsW5JxaNCINrfrjE\r\n93Dp6db+Qd0F8Qh6eiLapewd8upZeD6q9/NULbzkLJFrvVWGCSifaU8Y0Gfl\r\nJB/JVyT6N9/bqL3gWjVzfTOCLGnv+fSvnbY=\r\n=rtQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220914090509.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c089428b1adba8e4a617011101082709/chakra-ui-system-0.0.0-dev-20220914090509.tgz","_integrity":"sha512-7lORynrBh/Qje20R0WiXeiSgOSUV9+mcL/tb9E3X9fDzcsYV03KukJ3vyDsVB8xC9Chc7A0+u3zhyAcM6KcXng==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220914090509","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220914090509"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220914090509"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220914090509_1663146393100_0.4088244351455601","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220914105014":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220914105014","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220914105014","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"64f747d66b500d77fd62df8126a59df62ede09c0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220914105014.tgz","fileCount":6,"integrity":"sha512-H7vNxqZ979kpownNtRJax3eXB/gBitYOaZO/MWPCBK3BX2WZsVDK3baXnRakXDltv7pcy/3F2gUuk92+R2PbyA==","signatures":[{"sig":"MEUCIHh6OOxFEkljOUPCdv/uPoZnP9oimtofmCtLhSV5GppKAiEAu4kYvskaHk5hNiD5lCGdnCaDpleQ6PvDx8/enUEzeG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIbInACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ/RAAgq+fvDMxG4QBoCEVmuaERadvYf2L1eCbePdPttWUSh/OsagM\r\nMw7kFQ1WTNiGgPwSJ11SdertQOjRXUHVtO/IGkjDYgBvYoMmsqqh+tIitxi1\r\nuONG7H6tkwbzshboR61Bih+69UO9o/uQ3SacZAD1E9rLj20C3j6BkAIJCDzG\r\nF9dn+IF9itJ8G65vKRBH5LgfFCY6+vNatYYJXIvYcR6mzRRm7Tc62dxy3NI5\r\niKKhE5+Cnj2n5k9Epm3PEr3QTp7zUDNoOahHQlXeop8e3QcJswOXCkVQhxUh\r\nyX2lpcQ615pQS2K7vXMw9Zv0SOighOiopxXMOkzzx4a7fUT0tcco4OnYZtcT\r\nCJuGZeyhBu86R2JVynj2A9kah4vU9eNkpKb2gdEvjvpllprU1EScZik49xZT\r\nQua/mricSkD1u1DMmLd+PJwQ3/vfLVLsldaKemXWfkV+KkNzPtf7uVZQL3L/\r\ntvax6Cx87ModAVPFwNH6tnx4ngeKeGYVXmiFSCntXtJD619BdmjqI8bkqV6d\r\nxuiAbT8IJC8iTl4Ck8UmOitQiDheRgwUYdDdNKos0vj0rLqYDOs9yyMSdXVd\r\nPTOJwYYTsi9nT97jUEvimDClrioTXVRUOvy0+LChJ796r2pcPpar4h+9X9dZ\r\nukmhaBgvM1QkyCOwPc51MgiXbWX/VehZ6LA=\r\n=B+0n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220914105014.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/79f6cc17e3ef8f95e00486a68fdcd36a/chakra-ui-system-0.0.0-dev-20220914105014.tgz","_integrity":"sha512-H7vNxqZ979kpownNtRJax3eXB/gBitYOaZO/MWPCBK3BX2WZsVDK3baXnRakXDltv7pcy/3F2gUuk92+R2PbyA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220914105014","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220914105014"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220914105014"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220914105014_1663152679754_0.7804981950538994","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220916140800":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220916140800","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220916140800","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"559c69a28ae253463f6944237de94640b4dfeeec","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220916140800.tgz","fileCount":6,"integrity":"sha512-U8H9VvrN0UbprGcIb46IHHejGq+TkOuNlXRL4mWDsdtNmfHSuxdQcR36v85lGpH+hSvf8lwjOnzGk5B0DYvhhA==","signatures":[{"sig":"MEUCIHxDT9SFAJLlSM/I4IitIf0dHWxNXOM/MVuRxvXJcX5XAiEA2gsp2F64SsJxu86k373xOOl34v4Qt7rJOheZRiC/nW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJIN6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqijg/7BU6G5n/10mkrDY3pHuyG7xzf+eX1xzUiYGA0Bx2HAHl5HutU\r\nIMPgFh0lbTQZv6ERi89cl/6hGOgyzYsTaXVoR3SD6AMIxKZFv4mYNxFu623f\r\ncfrWfCVDTc9Q+bjJnUvRle1EXCSAdkDqZNXS/oAXkd2kw+B6thDiJPtvfPBI\r\nGKSKxb3IzvR47V95aPkZM7jo/i6xHAdtoj648hPXS4cV/bQLt6/OfdJco7Pn\r\nOI6DpJlLCYb1KMznVj+noV+QoOJ4TQ+YkBmVgH3U+c6zdBVb2DeMx0VfxRTn\r\nJXzgRkF5uDafeo8LHUF15FbVOKZF7VHy/BVLmjFo0tIxH8PwdRHc/+NdLl1r\r\n8/EBVmJTrmjV6fKd272l/I9/Ssz9otIeM8XAJglTIxVtZyNEFGSO379ivRCh\r\n7kU8Kc1qUXlwbdUVuxly89RMeOEGmKcMTCdm+pqUezXpFvoCdi9W7LS8gtCU\r\nxTzqiPQI0z3UvAZZrpT9CLF3epJRinSIlBVpQwfFPUngUswzhRhNDtv5w3bs\r\n1OntZdUxykVlhLoK9oMs2rmjEYhT1CKTsWfIdcRUGAb+kigRWYSrs7ylmNJC\r\nNmzPUXPnNSBAVpVwC/m1Yu5a7k/vE0S2OtxIZFb77TlkA2TB1NUtUSBaYCRU\r\nM+5y3AHS+W9yzZrCm4yT9NB8MG3H0j4bYVc=\r\n=tqD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220916140800.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d62d3641827cea697fd391d4ecf26688/chakra-ui-system-0.0.0-dev-20220916140800.tgz","_integrity":"sha512-U8H9VvrN0UbprGcIb46IHHejGq+TkOuNlXRL4mWDsdtNmfHSuxdQcR36v85lGpH+hSvf8lwjOnzGk5B0DYvhhA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.9","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220916140800","@chakra-ui/react-utils":"2.0.6","@chakra-ui/styled-system":"0.0.0-dev-20220916140800"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220916140800"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220916140800_1663337338044_0.895339467593596","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220916141616":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220916141616","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220916141616","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d6c4232cfdbc05a8ec0512a3a77c6aae41ea5e35","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220916141616.tgz","fileCount":6,"integrity":"sha512-X9PrzvGdslcS3A9UbMjfdu9rkQwFjNZr4Mob0quVckRLZCfqJjIiHWslaXqZ1/cyLSSwwk/5gshhnplGUtrYhg==","signatures":[{"sig":"MEQCIHcK4HAtzgODizWVTod19tS/51bWb0QPSqHbpn+t4iZlAiAWn/CnwAKKRL6prNhJECPxK7gFEi1+qOj28Z2H6w4vBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJIVuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaWw/+JpRRv8sk+9x0IOQXk1V+g+7yU/lJ6q0suXv3l3w+wIEfI3o6\r\n7WUitZbdL1bQmw70K3/fluxegKS61AlAmyDmrG47L6xmfpWUX8ggughR3GE7\r\nEsxsl5cQ5PQ2pJ+zd+ET16xtGGPNfcOCRCYsm3QZRg87F0lX6ScLsg45GdGG\r\nEjmZP6WID7Y6nFbftgHgXzyRoOZNnGN5oTD54kVoeBmOUgTTk25a9iSYRWY7\r\n4wx5rRA/c3etDzMvz0Evvq2Gw5VRdc55raxQ+XhVdHe9VJ+G8KZcgkouXt3t\r\nx9w1WO2vfW8UXAjO7Io3qZ0HyHV7UlviXMVbQuGTSi2dL6jU54zDFF4/LIea\r\nQoWNde1m6lg5ae9h9vJqlpx8YzlfHSm2lo1yqfzXBE0+fbDIhp6YLzJJX/D2\r\nnPXB+ClbpVkUknygNkKd4CuB+cE136cfyDb76ACAMipua4r+QG0QfKM4+qXe\r\nGJxbLYuUlHoYokIJEB4iX0myNAq9iZqmGCQvW3yss9r1CbsLx/5ibUAC3UDf\r\nBbeifIX1zPfCLTQVV0HussbOkp5DT1ynPNpS+gfqWugTEuDyS8r3uxoZLY16\r\nN0DbSI4N5xeWBC1J90CnI0chTyS4ZE6k2ivU8YvWZPJnAAuJCdsW6MKCqk7U\r\nJHNx7PJ3DKlgCIGLXj9DayS6kfFug/40wHo=\r\n=U06P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220916141616.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f32b43f753fafa276ee0439d8506d7f2/chakra-ui-system-0.0.0-dev-20220916141616.tgz","_integrity":"sha512-X9PrzvGdslcS3A9UbMjfdu9rkQwFjNZr4Mob0quVckRLZCfqJjIiHWslaXqZ1/cyLSSwwk/5gshhnplGUtrYhg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220916141616","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220916141616","@chakra-ui/react-utils":"0.0.0-dev-20220916141616","@chakra-ui/styled-system":"0.0.0-dev-20220916141616"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220916141616"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220916141616_1663337838549_0.6987360475919888","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220916144141":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220916144141","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220916144141","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1ef253498275640a0d2dbd4a7f71b2d694a2c7e5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220916144141.tgz","fileCount":6,"integrity":"sha512-YUpqtJfP3CaRn2G+tC4BbSogpz84OLY+0Ucx34LRc1w+tc98grHJDGWxLTKXrWv+oPEe7rRPTrh/ge6IN49vcw==","signatures":[{"sig":"MEUCIHjBh8YcHvZCophKW00QAxch2MMChxXtMq1TvzWGT+6FAiEAsF6lhRJYhxq1tGaz2Std80kEDDRXOjpYAAW+cJC+nXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJItrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Gg/7Bvlonmc0lce57vTn1olilQJXGoNJjaRuIO8lHETHD+jVWPf3\r\n5pultP+BYp72B1dovrzXEQRJrJ7x7gU5qJhYaBMJfhzWl+NShyhZhwqJAuS9\r\nBRka3UzXuqgb80DpgSpvnDEhK9YECaeU6iN03QuNmRlSeycJMYHYWrehXU6J\r\nESvpOMuYR/KvVxiBBZ1kh+k5S7wkxW8iIRzxRyArZhs8+Nb0trTGRisBMTk+\r\n4IhzPBfXyk5a10JpgykjNecjt0hQfiPlBUDnhUxa1+ICRHsyhreHWZqQ6MXn\r\nqg0yTJabo10PbDYQ+zBtQzuytClNMu2lxcVlYGfGnQDmMTUxoxhkxiBoCZbB\r\nWP0wB9CpgwJanqRVm/a0mbhc2ZSXJWQvt26bSX3JNMkVgncMVo6GDEJG84ns\r\nLpJcfXshSSnwlW1KnUz20SbCjhb2/eRCzSDIXBaPVVqymU7fwLN8LUS7LT2U\r\nuF/u6oGkWi9lDU6uPm2bvZZas6A5I+zgzssNW/UFgjW4BJXVL1AVlgsrEeBc\r\nd1PNHAWDlx6ohfLBq8UBIXhAt8/Q1Ks2xG8w0WbXEw8Sfx2OPx34q9GoRjYd\r\nUye7CNjDRIFNaPtDBMelMRWB7UXR3wgCcu0VImy2ltO9p/4Y0TUa2dCRZmNE\r\nj8FOiaO0+vfU64mH87PU7qz6XJt5SS59DnU=\r\n=wXBt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220916144141.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/472d4f36334aff8b39d316176d2d22d2/chakra-ui-system-0.0.0-dev-20220916144141.tgz","_integrity":"sha512-YUpqtJfP3CaRn2G+tC4BbSogpz84OLY+0Ucx34LRc1w+tc98grHJDGWxLTKXrWv+oPEe7rRPTrh/ge6IN49vcw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220916144141","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220916144141","@chakra-ui/react-utils":"0.0.0-dev-20220916144141","@chakra-ui/styled-system":"0.0.0-dev-20220916144141"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220916144141"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220916144141_1663339370867_0.9039901041005312","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220916164745":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220916164745","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220916164745","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"309ee4673208a4583b1a88a45d9fcc70f7af18a9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220916164745.tgz","fileCount":6,"integrity":"sha512-j1gFsk+bkCwI158fhBVoaxAbO8wC6ozK4MwMc+ERDJedchZ8xEbfLGHyhyCeosY0+bIpbg/lne8YvF4EpNy/NQ==","signatures":[{"sig":"MEQCIF7ZYPSCtC25FcVlVQMNSC//C/whUFtY9878c9RyqXRnAiASmrNMe0NrSDvimcvuxigHpbK81iGzMsOZGqxEAhZQlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJKj2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7vw//QQMYNG/co8wOSbOrtv10BqxsgJkXm1HKxO6D3d+g9ID1BrtC\r\n04RPXU5j/gHEvPEyOJPrJWG5M2JSrhUp/uwgYd0XrS8Utx9T36ttwLRzdSBx\r\nfhSAJSflbh2yezRfJ19j/DglkfJofHVCEc571RDvxjSyZIL+A+v+NySbRKg/\r\nUvjM8XLEQbtogYRuUzedgbb9zCSHNqDiOUnMpHB9Z2G2l8Muxon6+jOfJ25e\r\nN8OLOhhj5l087M7Q9wPEVtQfTAgQXPc/XXuj4weB3Asl3L5YuN5vxy3YZem5\r\nHlJKg59UkFkrKoP3rOnsajKjC3ftKLg0eWSxVMjWEsn/mbr61HOxPHEXinDl\r\n/PD1B+aapytVEjuLY/k8huW2pTaiSaFGay/OgfqEOrhncI7oKf7pweW6I4Hd\r\nkcqpu5O2IQCZthJSslPsmwCZQdYPiFLxMaoLGyFCGVmW2OQ3NiFGgfv44hLR\r\nLt3uA153wMiVKPDQKSJau5AZt2cItSo48nJ7ebVlfTdLktCvvZZKUPd23Nqk\r\n9eaOwkpNJefkLDwzUoIVcRAw1mbZmc5dKUxKxIszsVKhAScgrurYyD6myI65\r\ndeHpHG4tz0i1/MyurPAm1obd8QXJJm4oIhKQeWEUXMVmLe5S9N++/lkiu0Q3\r\n2ouueGtwGJTA2wpoDzJUkunQwcEDrkEyX2E=\r\n=/VO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220916164745.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7ea2c6fb234827176858705106d2ad5e/chakra-ui-system-0.0.0-dev-20220916164745.tgz","_integrity":"sha512-j1gFsk+bkCwI158fhBVoaxAbO8wC6ozK4MwMc+ERDJedchZ8xEbfLGHyhyCeosY0+bIpbg/lne8YvF4EpNy/NQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220916164745","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220916164745","@chakra-ui/react-utils":"0.0.0-dev-20220916164745","@chakra-ui/styled-system":"0.0.0-dev-20220916164745"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220916164745"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220916164745_1663346934033_0.7510823000382578","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220919061024":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220919061024","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220919061024","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"22d29ba2805a690a00a10dd8727ff13e0e48b181","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220919061024.tgz","fileCount":6,"integrity":"sha512-AfuewCOX8IyOxPB/DTDvZKKFhWe+oUqeh2iMmtU4N4j/LFebqgp7t39/JdY0BWlqM/gOg/ge8vx/EBhNitnWkQ==","signatures":[{"sig":"MEUCIQC6aNqZJ/Gty3r+Ve1BTQtxX+hrMp5DfKiHncYy5zHiswIgTnOkBujLqQn5iczNwx94iPnLJly2dZa4/V8pCzPSe6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKAgVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGMg/9ETmD9prildfrBn5nswcCYhyjDgKjRwZGLLj7J6sJFa8d/s1b\r\nNI5LFQVICjR22rjidVeEPTlI5fvAqdu7/tbe0yy35xCn4D4spl+nYegfd81I\r\nZF+jEwHVSfOykoZD6lEtxM9Xbnv0YV3R4XlnPRGp7Z112ICZdgphEWRSfMTb\r\nO6OjgyoeEu1e2e7EvfzOsiLdOCXGaCMUhDUls4CRJSto+DuqMjp0hTsv3INB\r\npyf+WiffMTJx0ONij5FlguWzuF2z2VOvFLUbpuRQnsfZEwpS7pi+lIEo29og\r\nvjpjGr+iyixtZUi+YEmfXeBMu7+TtWu+Hh/742rDIch37QTYnNNFzSBD4jR1\r\nI7jC457QhA7/zfpugIkHFJWWODhDkpk086wMaoMjpNUqeCU9LtAgrIrNUxa6\r\nwyhniAX6+/9M1LhkAteMFF9Z+KK12xO9eUJB8Z9fWHRjxUyTBk4M1MwUsnwI\r\namUeeDz+hXntUWMj3hUmggHf0GQR/T+WaoKTSGaDFDbJ+Y7g12Sce2ZwDWCx\r\n4j34SQhfwfeW/EVH9zubtfjy1WqPXUITd4MCdQyLZrTmeDwe8e5adJHMqAVX\r\nJxSBsFmNskH2JHbVe6kGVe4ojHifRzDtCEAtbqzJY/baVMs//wQVvDmqM0R/\r\nYWZyZuGtB1Qj14ft9DBH7qAJAXTDBXByErA=\r\n=/wyk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220919061024.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/52386cdebf8562b61d95956fb1277daa/chakra-ui-system-0.0.0-dev-20220919061024.tgz","_integrity":"sha512-AfuewCOX8IyOxPB/DTDvZKKFhWe+oUqeh2iMmtU4N4j/LFebqgp7t39/JdY0BWlqM/gOg/ge8vx/EBhNitnWkQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220919061024","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220919061024","@chakra-ui/react-utils":"0.0.0-dev-20220919061024","@chakra-ui/styled-system":"0.0.0-dev-20220919061024"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220919061024"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220919061024_1663567892900_0.0747789263586236","host":"s3://npm-registry-packages"}},"2.2.10":{"name":"@chakra-ui/system","version":"2.2.10","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.10","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8bcbbdafc970e7555b9a6b40b0079fff6c9ef820","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.10.tgz","fileCount":6,"integrity":"sha512-b2DVqCXwj160zJjee/bBbc9ltOMF7oraM/4QsKs+77nyH+oBqalTE+BSHvzMszkPFmubwV6YtyEVJplKGJLqKA==","signatures":[{"sig":"MEUCIFK7mLsauCudsMgJGE+V33IeHqaLEscQDdTtd1IZHKFqAiEAlrz7VswvLYkNwAaUNdR6mDkmIeC8zjuvmcFEmolL3ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKBw6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Xg/9E4MqQR6KyppG8EX5ZWnA9AFup2b1sAZkMcUMYVmaQci1dPJt\r\nVe5QG/ZzDoW4Kv2rUJM0XcsZ5QejSm3DqdPe9ev+f5Xlzw86ixBLoSVszBQt\r\nFV77/9j5IRNE/pNJIJ7wTYpGaYLqTs8lnnQsWzIjIAywjGSzQ5e8TbLm/W9+\r\nKp2uYNJtABi5BWI27VXn+UdCLDvjb9r5kYLC98gtvyR1TjlPkKnEU2DjFLqg\r\n+b8AkHnyuR62wrtsfzIBT/AaVFPSu93AIOPzsSL3nmNKJQq6K20sPl63wRtQ\r\nquotCejaVY3KR/b/X/T3nrsCGa0HDVXMBypkIgLNq4g6f1kaWSUwCTy3K4HX\r\ni3lVp+GkeYzcHVqs2npSdBTGJ9B7XT3BEJNAYUthaSA87JqfsDvCjS81gRUx\r\nNtZL03KraPOIpB5Tg/THng9uc1pbB40Dw6jxKRFlkozBZVbGOOpo58VRmwE4\r\n4MxMI50C1rT+TJOq760WHdwP6Kf4t1aczShJ1faEMBODUzG64v96Uz/wQbay\r\n4wxgojyxTVcFPNw45udxzY2xoO/xw7l0DIjjb5q+sr54rj3jzryEXubyp9jh\r\n6adjND3vJCtmK77h65p+QoL8W1rzuxypP+Q/RnkfceajA0cO2V5EcUBe5Hrr\r\nkmQkTuf1Yrup1koGsA0OeCIR4MIACQpkbKY=\r\n=tXWO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.10.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/57afb9c7f1dbd02e71a6ff0e8c8df508/chakra-ui-system-2.2.10.tgz","_integrity":"sha512-b2DVqCXwj160zJjee/bBbc9ltOMF7oraM/4QsKs+77nyH+oBqalTE+BSHvzMszkPFmubwV6YtyEVJplKGJLqKA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.10","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.8","@chakra-ui/react-utils":"2.0.7","@chakra-ui/styled-system":"2.3.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.12"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.10_1663573050095_0.25696928556952714","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220919112019":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220919112019","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220919112019","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a0cb981f3dcece728c2a1b4ca1b62aebdf0077a0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220919112019.tgz","fileCount":6,"integrity":"sha512-tMKpRAb2ldB57mgFema1NannlHdR4mXKF0ZGocB1v/gpShTJgE0yGHmbCaxiunYyP8LnBC1TLHGncs8FT7Ecfw==","signatures":[{"sig":"MEUCIQD/hgAhmVUQZuGl8JvRd/8HoX/8OHPj1grfb9NyensJdAIgU2gDHtlGCJeaqZrTxzSH7b/9IHQf9n4qqmkcZ6gCxPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKFCfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSaQ//ZSgY4z/HOvo9dYb65S+tf763wYY5W0V5oVY5oxuFMDiHsOdw\r\n8j0gEl+evNKsTZ9PeTy1qOXdUZ59+8CxThNetjVeM9AbwJm72i516y7LqdH4\r\ngTbeJU+0QZBAQvwXfqvwpRLeqxNoOWw17FnXneM4vDs0VyPD/dlQz53e74YI\r\n2DAbEd+jiIPC9qURWkvD+Oldd13J0CCO3lyzvQoGKR8MzCw3YTBRSdY+yj8X\r\nO802P/QqCyJikrUWdoqdt3Cf+e4341zTmHqsiNIOGP8Adr5FjidKQkYJSwa4\r\nc6P+K5xbZUZ5hnZ+QSDiO1lpzhoWqhl3EXmCn5ZdQb6o2haeyc5Qgsr5dS6F\r\nwdnt3vZbRu5Z2v9lN1mCGOPwpLLlMEQTOXV6wJr2ClexwZ/oWT5yOdes5yJg\r\nCOrDJlSGIPddbXFbJGES3jl2kSFOyLKZnAkKPxoX/7ZpdCLZ+4yW7QgwRR0b\r\nLOu0AIA3q8eKSrkOV7Ebs4P33WzOiNjF4KlS8Ype0GRfxr+WA/aGiKonq32w\r\nsix1D9VEuJkWr4bE3Z27V/b1rO/ANSmpvmZOvZO+tWZMwXqfCyt8dBdWxlM7\r\nCZwUIi2w5l0vgCjxa8CRihkLMrMhMXUWSo2MGTuDEhiiMbJsvGmvBXks3R9O\r\nZv0AI/cE4ytt1RvANkbPKQZZM2BJkcsrCUY=\r\n=Xn8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220919112019.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/042110552fe83a4fe683fed270c000f9/chakra-ui-system-0.0.0-dev-20220919112019.tgz","_integrity":"sha512-tMKpRAb2ldB57mgFema1NannlHdR4mXKF0ZGocB1v/gpShTJgE0yGHmbCaxiunYyP8LnBC1TLHGncs8FT7Ecfw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.10","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.8","@chakra-ui/react-utils":"2.0.7","@chakra-ui/styled-system":"0.0.0-dev-20220919112019"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.12"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220919112019_1663586463169_0.2791445627529465","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220919112936":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220919112936","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220919112936","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9616dd0110564291058eb209010e728a69653d07","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220919112936.tgz","fileCount":6,"integrity":"sha512-Wpe9E1wLtQeD3PS837xR3nyukiIW3g/lgvHmS5nJjoAlUAQ7QIaiTWIt9Vz7vuv4OJ/TRL6VED9X39S3Fz2Mjw==","signatures":[{"sig":"MEUCIQD3OZefupcjqckX26PcDWOGt3wyLPMqoyYuBHH88H1uHAIgA9G/zkd3OR8mUlb9JBGGVxSYkZpbQNyIuW8Alw0Dx30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKFLIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFjA//bBFd3tlmwhDa5YE65eLNdl4kwvAQb/KwuxBplqA8Nblrphyr\r\nxUtxmevHYGLa2ZoYxn2HZYY/lOVzmEVQlS0hhIeqX6FlsLYW8VgOM3R2dLXg\r\nv/Uw/7+YItw1OnAglF5AmQxLreNCdHwQP2o45JE2Bz5amTXRX1lbubSiH1pE\r\nJji2fpNFhfM+27nSeyQlpNf0CabKXfuHIu73CxjVcj3W4lOmDbAue7e3jD5a\r\nu9Z4pF8LHrbvMnHs8Pk22f8QTeXwPD0eu9qC7OMbEVj37N33lYhtCZKW065m\r\nzgpGiAcsKZ6nhtaVa+8jZrNNhTD2VLJJ+TGhVy3wqZoIx8caGIIX1hKwfQr8\r\nXVcoKQZ/xZyMt/4kihaihQWyXfiock0lGjYu/gbn11WKVqZMc/H11tzQsmld\r\ni3DYFH9dISV6RNKkLWLSrHeezEypwh86fu2PnyKM7oGMB0kYNMSjdyVqRn4H\r\nJKfyGlyZRtGLSuLfWBQeDDmv18bA7bbpTu2z9oixqOidEkHIUtJn7gMVUdpJ\r\nze3ne3KMHozFS1MvN7IDonEM6yQ2qKtK8/3kdLqVcucL4usecg5BcBdA3l5t\r\nwBmNRmnjImAt7dbIPiBH6iciB/7psLr7jXGlMQZx5l9rKt3OVFElD+J0wq1V\r\nIIF01hf/YCL+uNTBCn6cUh15KrT5FWvSuXc=\r\n=F/hf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220919112936.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2db8a3c6fc7cc476146ec8c4a9b51f67/chakra-ui-system-0.0.0-dev-20220919112936.tgz","_integrity":"sha512-Wpe9E1wLtQeD3PS837xR3nyukiIW3g/lgvHmS5nJjoAlUAQ7QIaiTWIt9Vz7vuv4OJ/TRL6VED9X39S3Fz2Mjw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.10","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.8","@chakra-ui/react-utils":"2.0.7","@chakra-ui/styled-system":"0.0.0-dev-20220919112936"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.12"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220919112936_1663587016684_0.5388432035536859","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220919124959":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220919124959","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220919124959","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"820a4a3d7a8c795662f7c4e1582884857e4fafd7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220919124959.tgz","fileCount":6,"integrity":"sha512-I2U1Oz/0vB+x8Bkj6sc68mhI017e8ZNrvi3rM7EHdORJNh4ug6IkbRH5djNNU7p6pmQ15qPuDVZsloxTA/mGGA==","signatures":[{"sig":"MEQCIB6c3vDpiui8xJVDuwJL6eCFbKHqTULcgXT9PZZho3mgAiAos6Ygo0wqJLZIzHhSb9tw0y7kvAH0F2R2JbA8pVQRQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKGWZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVpA/6Asl/153i0OeWk7WSJdOf4M1Er651PJ3ihSMvnSxssk/oIlSe\r\nn1MQQY15xPMLFcUcFA5IiqfT9Awh/wpD3sAymd+6eH8smq0eSO5Y/Q9mpobE\r\nNTF08BikZtCSfmU3qITCWRlGWwVPzlgXZHfdrxHu3TeTQXX2EbsBAhFki9Qe\r\nxdy353zwH2DDiRQmI2rNNeVN5wTENas2lSv4rcMO6Jl/wmk/cRqypWwQauUq\r\n2pSoy8dWzLxbjKcAu7D9JnozY/YJT4lRCo5rVJRYLmjQwUmMqN4sGDf62sQy\r\nbbwowymGJ74SEmhy9pYmLwTdPjv+m3jmb15O2LRRKriK2IGswYTlQxb9lHAb\r\n1EloJeWgKxiG2IXKhw24qI7m2adXx+8MSvDpDJGuqtFeMQqjdywpASmpCHPL\r\nQGLNXXMjvgSGX0lPh1bDazM4Li0VJ9r2M8RRbyutjy3bJnCGGZltUgDnZFm2\r\nBPs3JR8EEviJze70V9hZNOsnKkw0fdK1KqKdpJd0pkuEYl68CvhhFo0aY8Vq\r\n6kP1OplqSTbo4R9Xzo2pI/pU9hogGnhlLDNoLewQylZTIjHLKPuD3PQerXsU\r\nLkNLI2kdKAq/aHX7ujlehZl+WXBI9O3aEoD/6Ws5wLcksnb7AAWrSIfiyGju\r\n4p2IyC+jFcDOA1ChS1zbdM21dT+iM/hqAcQ=\r\n=RuQJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220919124959.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/491782486f37d8ad36644f962e6fdade/chakra-ui-system-0.0.0-dev-20220919124959.tgz","_integrity":"sha512-I2U1Oz/0vB+x8Bkj6sc68mhI017e8ZNrvi3rM7EHdORJNh4ug6IkbRH5djNNU7p6pmQ15qPuDVZsloxTA/mGGA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.10","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.8","@chakra-ui/react-utils":"2.0.7","@chakra-ui/styled-system":"0.0.0-dev-20220919124959"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.12"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220919124959_1663591833698_0.36086781474314944","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220919131546":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220919131546","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220919131546","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7b9d4f4774e62f54e957162c4835e261c52cfee6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220919131546.tgz","fileCount":6,"integrity":"sha512-ALgr5AJxYmqNvhpkQbIsNBwxdXbZJyBcNKzt9cNvRQTd+nQ9GrRzVP7F9ndInJWrc8bKl/FZHMi/c+Qf4bQgsA==","signatures":[{"sig":"MEUCIQCv+4hZKc+FwXd01S1K1VeVpAMWx1uyRbCjbeaHjrGOAgIgU/aUn96dGsuib0Rh5vha8o2Qbn4XdhExWxwjC8FMJJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKGulACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU9BAAh98HPeV2ULD1rQtnuIZhQhXXecXAy+vbpQgRU+4VCPKPLoWY\r\nNQG4EGhU6SwliOs/HxnZfOwga+DPpHiux7Pl8XLCAZTo1GgNZvk8KNgNRDM4\r\ngtb1+uzvD3kiH297/gcC+juUypjGoMWs8hEqW2g5iVb0xpvZRJ39XwRtBXLY\r\nhNvjp19JR3oTnoyHLXeuW4xXAGOfkUp+1fQqS2P91g1gmsJDXz+fEsNYIiQ0\r\nI5fKxy65JuGzkfVoggXHq4azFpMcmTN2UhlmjyVClXfSn3jzHDf/+fdBtBjS\r\ndu0z54ElI8iZZFgwpLlsf3pmAfPyW8houTJWGF6b2LhMgsSsu/PztbMghJeP\r\nS2zpl+W1ja28YI996lf8/Dhbghsc+jdxK4nHGyurIEVLv3CbfZePrp3w56ua\r\nE7aWFpwSAEqyP4tibDLw1KzT6k4mBgnNJvW+0GqFrTXVbY2TG1pxppKDHfUV\r\n2Y5THRSfKALLRYlTKNbxJJ1RgTT6BHn0WfKhGuLAn9FXDbz8nK//hUdhZumo\r\neRaKHX3d+zhKVzsCBTjqso7WD7XQM6dNRGC2x1sMfBrz6A4JTKBEwjD5RqFx\r\nF0htpGEU2NGV8aDM7waveJAnPQm12Ph0noPrDK5oC4VHVM5eOZza9EbLafRN\r\nm1cEPcAn63MG4RUMph9xaI1gcsjYkr5H7N0=\r\n=2EE7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220919131546.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5579346399d452b78aa5bdec026945e5/chakra-ui-system-0.0.0-dev-20220919131546.tgz","_integrity":"sha512-ALgr5AJxYmqNvhpkQbIsNBwxdXbZJyBcNKzt9cNvRQTd+nQ9GrRzVP7F9ndInJWrc8bKl/FZHMi/c+Qf4bQgsA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.10","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.8","@chakra-ui/react-utils":"2.0.7","@chakra-ui/styled-system":"0.0.0-dev-20220919131546"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.12"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220919131546_1663593380947_0.42247095345360375","host":"s3://npm-registry-packages"}},"2.2.11":{"name":"@chakra-ui/system","version":"2.2.11","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.11","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"88f600589d2349489b09e448e974bbaf93e173c9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.11.tgz","fileCount":6,"integrity":"sha512-m2L8fizAWk196TRY15eu+NoHEWvIDuxC8iFbmJk9LUJNakyiAHCEREC5AhFweBgGW5LhqZLvD34doCDCo+iDxg==","signatures":[{"sig":"MEYCIQDWx0GnCpgYqmluJisGNm3iWvbRLygwDfm+f74EIjR5lQIhAK8CSsvXDu2GZ4Re4PkJptRQt5pjqKclCRh5QWl82cw3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKG8rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrUQ//V4P1aGZQBlLl22oc2MXTDyBkpzkgo0exq6Vsf+SPwHBzQ8Gp\r\n8RlmNf5BzwwZMvaTCZYmcdqHtENZEVFyqEszE8TPrrzOKfJVyIDGEYyU6aCX\r\nIMqh9AsHamx/HWdxKNOTDeLJe29isaCOjo7+BuEXtDtK2s2BR7xRAj50swzh\r\nTp9Vnunz/Z0kEL6gAUJu6rcRtFcVaML/DzShHb/veghPw02L2s10QMs2f/Yk\r\nQ5h3oKMHrXIixnGoEOA7aM53qS/2rcFg10SRrHK8yvmj1KTU9AYE8wpRQPkq\r\nwQOr6S9UiWDxkSEB+mlxjcpOjZepcD5cypluBCJhP6N3JpGUdbcNGZP8ZfMb\r\nkDWYMQKp3mXMff5etjViUl3hnBwd049jhXqlH6YYyHVPqTQGcdgw3ZDPRP81\r\nWiBD5THyzAVcFj/SDIrUzjQOkzzStDHvJeGOErpow/Q4tJBrdqzUmNDIFXwZ\r\nBy3GATdc3plX+nk6K/4aGYRC0i3iCG+399sAJeTBBszJ6ka5XcHG99VxM47Z\r\nesV6P9DQUhYgvZpIBeMbaDR/pse3JwgT4p4FV2w+NqpWlSM4YZTl6pT/3OR2\r\nsjqgIYh5dDCIFP1YA01dDOZeckmEpAhnxWUSQSNneJkZbeTgB0r8guksFKgu\r\n6aWNEyMxD7nQwmQzrXX+6Q6bJ9PFNxKjudE=\r\n=Ndod\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.11.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"pnpm build -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3ecfa772c8a51784cc67f8e4fac2b848/chakra-ui-system-2.2.11.tgz","_integrity":"sha512-m2L8fizAWk196TRY15eu+NoHEWvIDuxC8iFbmJk9LUJNakyiAHCEREC5AhFweBgGW5LhqZLvD34doCDCo+iDxg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.10","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.8","@chakra-ui/react-utils":"2.0.7","@chakra-ui/styled-system":"2.3.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.12"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.11_1663594283015_0.2603049222371816","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220920121057":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220920121057","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220920121057","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"413940eb0ec8831b68efb731fd71c5fbb6403f54","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220920121057.tgz","fileCount":6,"integrity":"sha512-LLhQEOqLO4yshbqRKo8JZfLnH2kxTvVMLlrOpiv6hBHUl61tnsVxrDhDvpqmVjsYSawIhWe6mkuBlc9LtcNYfA==","signatures":[{"sig":"MEYCIQC4tKhyXQ52EI863zPo+8x35LpUNTrvS+GMxOqsDz6IagIhAOMOu+ZznnCibrBT8tE/qdg2MbYiLOJsHhIFUhHqQOff","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKa4iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzfhAAlePw+x7siZrkzVMMbdSatRzOERaqrbuK8lpGah+D2k2wQHwh\r\nLA5oJ/tIfJZ3dWjps8Nu8cqPJZe17e6YzrbHZSnk6QIUX7NjujDD4u6sa9wH\r\nJhY2ecM5J5/GuNRuMr8TKbjpzkHIg7g6WtkwSUD2xRdJ0UK8rWQ8Eng3nPuq\r\nyRtul6ovQMRGJ9ydouU1DNPFfUG4T27MuxaMAG+EdZcFHvY1wp1JmN9Nnh8g\r\nXnzKNuj3+AjN2zeZIMYk2rrI/RTlngaJ30cOH9fFG55awdIAkqwx3131vJy8\r\nJnomvTBTU0UWTyQi4TQP4SiIGofabjbYzJNhsdfSCtLx6PAJtpsxoJ1SLKBp\r\nFs3exx1WnoOk7xDeYT/NK/AAL/JQziRpLVSjiOZTE8vnfi1ZEXGUJa+PRAzA\r\neXtNiFHiGhhvEo6+FcOgyz+L/J/6uMoSPiQx3gC+Gq3dar+taKcGjiT4kMXB\r\ntkcv3TlfV9lDmmhctx99VL+f1vXaE+BGPpay/G8t2X219X0n8ZUUxyaLESRI\r\ngydODJyOA/YWrNpsqnJ9O9R8nnYCFIjwEmIYOIIVpYFVyANIlXTDpYfFY9qj\r\nOzExcNPXXK+S+9/COB3kn8P1429IZ7Vn/zqBpvmKYIoAIDLV7YNyIN685Huu\r\ny/CLG+tfLcvNjgKkl+KLY35trnhxE8pY+nE=\r\n=0Y4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220920121057.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/44c4c6ebacd70267338031e1aaa55c6f/chakra-ui-system-0.0.0-dev-20220920121057.tgz","_integrity":"sha512-LLhQEOqLO4yshbqRKo8JZfLnH2kxTvVMLlrOpiv6hBHUl61tnsVxrDhDvpqmVjsYSawIhWe6mkuBlc9LtcNYfA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220920121057","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220920121057","@chakra-ui/react-utils":"0.0.0-dev-20220920121057","@chakra-ui/styled-system":"0.0.0-dev-20220920121057"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220920121057"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220920121057_1663675938046_0.4681509245734252","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220921093814":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220921093814","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220921093814","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8b6742720a3bff1d0d8f15c2011f774488c16e9f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220921093814.tgz","fileCount":6,"integrity":"sha512-oRKkdA5xPOWQbGoDag8anuzt9W+XWWPtAJHk2GuFzE51VqO0bM3/4byYCBMQFlJxtUuYD9PFbNI2TlBTG8odBg==","signatures":[{"sig":"MEQCIB6EEJdQPVbLvtqXbmucPEHDGxtN0kBlv1aFsqycXzccAiAaC1MF9f6qBdwbSqI3NiVePQPhYnmC+B8wbzhER5T/4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKtvxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwQhAAjrGm4qnTTuDNCxKaVMkZwO+swiGW0dngYkMOv0vI1GJ/I4tQ\r\nsnyoDzQ2NKu7CWRcBm8URlOmdgW1Jz0wJlBsu5ruX2J9u7/SiUyHSPDfNW04\r\nMPXYHi7rwP91rR7X4rzdaVHAqWK65DI5lsOCRHjTL40sa7ihdTcBmUHZa0jj\r\nlU3bMJA3Eab5FpzaOZuKlOAn3PNVWYe3AIEAaBOYW0x4yz+5UVgDHca9/ItQ\r\n/aMAhoAK+O1clqLU1Lg9LaD8me7eRmyLmQEF3p9FmlFsS0H6kkw46NkURBVR\r\nvPlzY3s3ssdKi8Vt74VSyDy4gOQu/mgxr7NeQJi3LJaCamwSc4xPoUHw80G/\r\nrvJ7/0Y+idXaPGZqC5DeOu9ZzMZ2kyFBCwt8eN9WFPHs7DqTUsPI/epnrXN7\r\nfFUluiBnFvvsDxMWlbGboRTr2c2mNvozt2suhDak3D2gSy86+vhxvoSPN15Z\r\nz7kUSZWUXSeYAdAWIY1R+M9OLuNdcXpfpRSPfVv72Gzm4nuZAmekizxY9mE/\r\nH1xC+tp1TmQ3i86R7GjW0UI+bJteJqgUgEDdN3HufJou2xQMn3tMHS3zPrBf\r\nl9Z+jWxbyXKJKpr3rmEJAx6rEgsdwNg56xSikUYV2AYtCFL62PKgeGYSs37W\r\nk49f7F2RG6qsaSxWewoD/y3ThCAoQBvaYTA=\r\n=hpbn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220921093814.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/093209c1699e8335da2dbca30272bb21/chakra-ui-system-0.0.0-dev-20220921093814.tgz","_integrity":"sha512-oRKkdA5xPOWQbGoDag8anuzt9W+XWWPtAJHk2GuFzE51VqO0bM3/4byYCBMQFlJxtUuYD9PFbNI2TlBTG8odBg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220921093814","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220921093814","@chakra-ui/react-utils":"0.0.0-dev-20220921093814","@chakra-ui/styled-system":"0.0.0-dev-20220921093814"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220921093814"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220921093814_1663753201425_0.6428593294148928","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220922114557":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220922114557","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220922114557","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"165dd9cd3c542b5fbb9e40381aa788ef2c3a8780","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220922114557.tgz","fileCount":6,"integrity":"sha512-cMyvvqI6CqALCgRJJfctpUORtFgl/PxIuceBBLEWvNGvM23K5M5NNVZ75ydJWg0U34VtpGATMuo8I1LJnKuSZw==","signatures":[{"sig":"MEQCIBOF7qxqTk+Cxz3VwzQ1LEA/Z6qzzXbmTu3pfyhIuQ8WAiBtQ1Tf4TjHpOysF+zv/ZmH5tp7y+YTBtK/lTbW+pDJcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLEs/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOOxAAjuR/MpAK88DN3kP31ifUxKDhqydxrKHtw1D/kevmZEvusB87\r\n/TkxdsNFXeZD+T8JWAzE3DXZ7LDYzWsUxJmCxajClNsyVJOZfYF+mkBssfx8\r\nxUZObqM79PevXtggZ6IE9UIGh7WPzCtqXYkOJ1gf/FpHLUSSIEZY8HEO/K8R\r\nIG0GBhZhIGSwbURtPsg515y8vjbFmdh6msuJN4SD8YQBFUMplL9G0t78xRKH\r\nwVpyafbgfA22+lqvn/MdIbRuDwLzqufeM1BuWOL2Ir/1FS0L/CctwMKfFyBA\r\nZoX8RXAHDlnW9mn92yB2BBWbA78ZfkitGjI68a1n1GE5H3Ee546hZq2Blsln\r\nbkI1fADlkE5d3jlKrwO5yZU67FB4k1TYNToMyNhmSS15tCKJmxmwNucSdLRN\r\n8K/LbTE7/+iuv99L1QiYL0/p2XKSioPOZKGuPcbLLsLZdRVJLWOSoFfzFaDN\r\n0xPvzJXcSSFkNMSjbvSvqoIdEnp8Rh3wCtP+rjJQ1P30s6R1xV73aOAeccbY\r\n27FSNRDzX9RJ283eIvICAtpEfsjN6gll1mncyzgs/PCJmOL7BFfMwikG99V/\r\nO8wT3itRtzS2oYFCAgf4tzhdp+tagoStKsv5VZZrcC6T9o2lMQyPPMVW/vTE\r\nHsWQ0cYl5fiRJ/rAkE4MYz2T0FPyCk0h2Bw=\r\n=5xEa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220922114557.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/79306a50246518995dcfd725d1320386/chakra-ui-system-0.0.0-dev-20220922114557.tgz","_integrity":"sha512-cMyvvqI6CqALCgRJJfctpUORtFgl/PxIuceBBLEWvNGvM23K5M5NNVZ75ydJWg0U34VtpGATMuo8I1LJnKuSZw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220922114557","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220922114557","@chakra-ui/react-utils":"0.0.0-dev-20220922114557","@chakra-ui/styled-system":"0.0.0-dev-20220922114557"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220922114557"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220922114557_1663847231035_0.8458135785758316","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220922115811":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220922115811","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220922115811","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8aee6a6a17ec91cb31e37e5a870a841a85c5f37b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220922115811.tgz","fileCount":6,"integrity":"sha512-plKGt8z9ewQQp6dbNCGSf7v2Sy7/a0zHXGEYkFkiTgd1tgoWpZRvbTrD4WQLm8Nc7y4tqnHvmJ7Y8DStF+dPyA==","signatures":[{"sig":"MEUCICxXcIpbOOoVGyyPCZ+OK1SoNhE94yFxjol+ippoNGyrAiEA0k3jKE7mLnbxfAFKHRGrvsunn0SmCGqzBM8K9jKUjSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLE4qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxXw/+JC+uxZr3IsaUiRA3bNeMRaqp9XI9R0C3GFqrBCZMZ1ZzLm2a\r\nuLLuokW8CUzazIpHQzIz1zwv6MejH1WakJmROUtW6YDTN7G31HPjkmqepzas\r\nFkaIxlTvBwJ7ig7kPqk1ZwZstZKSCRvFHsOEzVczgmyAQGWH/qbD5AjBDFar\r\nIORXdl2+fuSf+MySDOzUzY1kIEm+cTZrReIFIXPIRivFbjEK5/xaQtnWn4+U\r\nOq/CEhJxYwTLU7WtiDKB0lZ8ycMnURdv7gjvtaRHJHiBEvLtoFpaQ8Zj9iqU\r\nASotCYjBYav1grBjTe/GZmMiruygV+mn4Ud3/W1gfXE5qxR0wdFZOPTtzchL\r\no4C3pa+iWey97+v3ijgYSPrVEbIZJW9yXaH9a3J7YLXi1n40OQzeMJMTsoHE\r\niEfzW/Zln1vLhFSeIzWFTXCnBgYZ7efVcCQqtWTQRdfIhSFM3qcygwJw3kVA\r\n3OU/NHVCRLnJm047B63BlKQ/Mxe+CE2tXj2JLhBjM/Mo6H/6AJoXSc7EZrtU\r\n3qz7/llHIrlwY7hlG0iDseMdAmq2gCkWOZyszF6zRDirjB7r6JeJO2Bdhr0C\r\nJoh8ngVg9W0bUg0zludl9tCpoKYlBnjRhX+JpZnPSATr2Tu+GRP9A+Dc5gyQ\r\nJm4JhCdtt6EInxPSmDB4JyKa0GnEP0XosHg=\r\n=qXao\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220922115811.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/99f188443fc09a75aedaafd2f52caaa8/chakra-ui-system-0.0.0-dev-20220922115811.tgz","_integrity":"sha512-plKGt8z9ewQQp6dbNCGSf7v2Sy7/a0zHXGEYkFkiTgd1tgoWpZRvbTrD4WQLm8Nc7y4tqnHvmJ7Y8DStF+dPyA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220922115811","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220922115811","@chakra-ui/react-utils":"0.0.0-dev-20220922115811","@chakra-ui/styled-system":"0.0.0-dev-20220922115811"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220922115811"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220922115811_1663847978234_0.23121985306685544","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220926164115":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220926164115","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220926164115","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4ede41f9fbce6ec82a8f4708f9560710fe69cf7b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220926164115.tgz","fileCount":6,"integrity":"sha512-IwdklVQK6ASfQB8b1d725VxrQptOz1FjTx4RiuA+LtKNRNetDkLxwb7PcJUQsN8z4BX0kEedjNOb72GAH82L3Q==","signatures":[{"sig":"MEQCIEMg61WOH5g+WqGfBmvJBfLuQ4cCSQmiGUXH6L1vYOpZAiAKEN8kOl5EsKTUyR9iDVKMKt8fsPYPAV5eVTTwmxD2qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMdaVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC2Q/+ND1UkvJ9y32bicZ/uMQKQrIbGGJFsPYcZpLopKlZ83Q3t6G/\r\no34F0a5pGrUC30y+4ZqrktBPncWgHy8anvu1xWgrukkjTh3OVgnFYGRb+sC7\r\nGVI70OTFXS4k2PXNn4VXKTZ0SRXUsGpAudqSicBxQODRLd3OLTvkRBhjk8oq\r\n/lDhBTkkWGcDMPEaHa9ZXF/njr5mXYGMc6kaqiLtO6fzpD9lH7pVJKSHG1Uo\r\nXuxcf/eq/h48EL1T1eSk7T1fvv+3XaI0/0hWReHfMI/ZbO9Q98ykn4hQX3Vz\r\npeb8D3NMEmnEwyDhIScWO6KQ99EPNqcUFWM/593+5lNVt7wVMJ10xPD2nRxI\r\n9tGTx6DclR7evbeTKly/07xvcOBamaiTIIHHzNXohXLS5kT/j9Lz+d/zhhZO\r\nH2To/+mo+T5ccnCbW0UR1SJ6erqf843Nyg4rqtKPV3fpOnGsYSEZV8/QcmEg\r\nXwUYvQgN16ZL8PZxI74NEIRl72HSCflg+JCuNpS8P7lKN4IurIxyIia1DwGx\r\nifD4PxvxlQdeDzcZ5ncIQjrBPXO22xFJSLqLhSHd4Q/RLi5NPyPtk+jef6Wm\r\nfLGwjJhnQOVTuNtbh4VnC89KvD6/McFdr8nJMxUSfRFA1rLyZNwx5cy1G1lq\r\ngHbz/jZ0RceGalubzFEXaxJZhOaYaiUvbgo=\r\n=+WVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220926164115.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/899d2639200c92d4a9a21e257cdd463a/chakra-ui-system-0.0.0-dev-20220926164115.tgz","_integrity":"sha512-IwdklVQK6ASfQB8b1d725VxrQptOz1FjTx4RiuA+LtKNRNetDkLxwb7PcJUQsN8z4BX0kEedjNOb72GAH82L3Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220926164115","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220926164115","@chakra-ui/react-utils":"0.0.0-dev-20220926164115","@chakra-ui/styled-system":"0.0.0-dev-20220926164115"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220926164115"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220926164115_1664210581474_0.8169523547573119","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220926165450":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220926165450","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220926165450","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a7a6fff2a03693a627a82abee3266d65aa254c70","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220926165450.tgz","fileCount":6,"integrity":"sha512-YDZnthN419W9YajVbesY7vwWcVtSxoLgupHsy2MLp6MtsfLuVbu3J2Ex/ZjLxYUa82N1TgtSS3JNz0yG1KXgvA==","signatures":[{"sig":"MEUCIQCk1/85alxjHZaDQm7IOFh9qHRz8hkW8tgpNsEFpRPW7gIgMtA6japnYm0bktML90X1XXVzAroKhRxM2axrgQ0CJMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMdmiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMLQ//RaylMF2o54ic6O+8I02xxLPS/BU2wbAzqdKngUMuhcRvCKVq\r\ndYL83fyaSkSLhWxaFjy3RXs80ofDmDlfE5Ry5a4KlKqKclFaQctCK5khGyAB\r\nE9MlcRowOXP5xyL18QUYiU6rxhW17M/lppNKkvk2j4++OWMlUSTNNPZ3VCBM\r\nfcQdgJCIndTXlRZdDeOYc8Fo6RZJGwgLYEse+pmfAykd+PpMeW3hwaGYhpG+\r\n/UftA6f1VGfOZCZDV6A8x4KF1kzY7hkugOBnH3q6j8j1sssmx/hmrFTSxFIb\r\ntgSgxH5btigCiDZhqsvemtENOZvTOKPWzRbc3XcJv+rCN1qcHQyVTocrl1vr\r\nAFs82RSPvC9nveYLD8s4NFPuOfECXjsdY7IMzCBBHlLRHtgedbHRaJOtD5H3\r\nqnR07yRygT6CmLRs0Abpd8DCeBxsUz/e38jaR1cC0ehMPBJxvG3EJ8EFTV6N\r\n1cgjGUgjHv/jSQkYaLg/twWIYEbOIfT4mqTeiV/6tjufgHRBFsvKedozQqQv\r\nHGar4ZvyxzJcOxcleymyP+t4rANUOjsMRzCpwlj8NeWQINs1Lt9mxy/HHrSd\r\nfkZ7wXO+Q+B5FqjlD0ia2saDj8b/gtY9TtbL4iSUUGk19fEtuIm7PXblywfD\r\nzskezWBoEkYBVI5UMRudm+iGe98siB0AAJc=\r\n=8Lg6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220926165450.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a9f1248e73a5372e6f8de3331f11488a/chakra-ui-system-0.0.0-dev-20220926165450.tgz","_integrity":"sha512-YDZnthN419W9YajVbesY7vwWcVtSxoLgupHsy2MLp6MtsfLuVbu3J2Ex/ZjLxYUa82N1TgtSS3JNz0yG1KXgvA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220926165450","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220926165450","@chakra-ui/react-utils":"0.0.0-dev-20220926165450","@chakra-ui/styled-system":"0.0.0-dev-20220926165450"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220926165450"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220926165450_1664211362552_0.8666925462403061","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220929105632":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220929105632","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220929105632","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"016ea8ca9784fddbde6453c3f63f9437972b9476","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220929105632.tgz","fileCount":6,"integrity":"sha512-Szb6RjjBFWs/Ay8KbhrTLo7e4oj7SfltVXOleXbqwTULPLafIS2VrUJaJn9+9BVlmespZMtW4ysvbswocoqEuQ==","signatures":[{"sig":"MEUCIELROVaR7viKTRuTn34PRSBbQLY85LgoEQfC7rgbI4XWAiEAxqgOpwJWjXMk6LwAxbAIwWW6VBKE+4mKMukUbNV9+qM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNXoyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFgw/+PemuCPr16x9qG5A5Upk57Mi8tYv46uGwffaQe3w+zHAJvS7J\r\nEgnYSoo8ahrfFMdHSarwwtkx4visqi9sd59PAiL+cl0fHTl4h7hMIAXfNMqJ\r\n4Ckx4HbK6xnrba5b+sIVa1Whk4oSvwcvwSJMNDY1j7Ef2KMIwRSFfDXoF/4/\r\nEdlqvAmSo2mBH0j3GYb9EQzfWAPA0gDT+xzWzQosuDtoumE5TLdHgDVEAZTi\r\nT8CyI7ZTUHfT2MHnYXsFMnjuTChkvT+Wxg0MaHRn3usFBQR/Bms9MyrQOqZk\r\n89N2Cpdjizd4qdGNK/dcofqDup5vH37FnqcNf7qXIqYQC0AUW+6J0OgqIHk+\r\nxGv3JD6lU5KskZEoBQ5wFBzuEsT/dFUZgej3vm9IDjgkAlrSsFv+bfki0EG+\r\nu3+BBYdFf/JSdh8Vp/JGPIuIIU3zRz2kDgkmdR4+x9M31S/p0lYxAg6DQya1\r\nAtzpl4dIxjieT11cPsyq5HdMbOZZylmYi3e8A42WNDLVpPnasDCfjjawFfn7\r\nlPOro/UzH95NWkH64di0u+EqRJye6MM6sfLBqKN5EcusodOqOCSuZKGDynji\r\nculF6Nf6gCpjnduuobDXDPybtDyFNpC6izuSnONM6mjTPs1ngKDZ5ORGD7Sa\r\n3YO1a4YhyNN6wMgkfvSbyfW0sAQyB3GK/XI=\r\n=zkwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220929105632.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/18c9915d74b41df3321d35613e6efc4d/chakra-ui-system-0.0.0-dev-20220929105632.tgz","_integrity":"sha512-Szb6RjjBFWs/Ay8KbhrTLo7e4oj7SfltVXOleXbqwTULPLafIS2VrUJaJn9+9BVlmespZMtW4ysvbswocoqEuQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220929105632","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220929105632","@chakra-ui/react-utils":"0.0.0-dev-20220929105632","@chakra-ui/styled-system":"0.0.0-dev-20220929105632"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220929105632"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220929105632_1664449074712_0.8544903718936061","host":"s3://npm-registry-packages"}},"0.0.0-dev-20220929132459":{"name":"@chakra-ui/system","version":"0.0.0-dev-20220929132459","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20220929132459","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e1814dfb7d4d9718c9b8a68293fd9042de73e57f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20220929132459.tgz","fileCount":6,"integrity":"sha512-Q0dvr4tMwp12Gtfd219YF/1w3U7js4R34xLUWF1TxWgDtogVcss1pNiyoudsLMsuCO/4/wP6kjhQR7B/KYRpmg==","signatures":[{"sig":"MEQCIHEQHMOVgCYRIN/VlxO6UMDCxqjppY+hJ+JmU756TNbaAiBkLQT+Q8TNaqt9iG8P0MRL7Bvf2uXVdFpUvMdCg2veNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNZ0JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlqw/9GLjYZwDpBhyA29Wx1Ok8HJxmf/r9yWrtl2sdqGvcJjgHk+qD\r\n0lp7KenAvc8GSXCINGjCm6ZB6qrgZN//uZ4u+TtXN1vg1r7FEE0qLdY9gg8G\r\ngHw6yxuQHQzQ6H4WBnYdQGgxVI/cjvaboe/L29h3Uva4j7/sYb5vhLFrO0S3\r\naEPqB8VgrbT8B9IwDYXeJufBe5w07O+8+bAw96DZMgOW6laoKGsXufScaGlz\r\nFHHaH4FobCKRkOiU1kPWYypt6IaDu5ekAAPFZ/mq24Y0xCjBhJqVKmERrqtc\r\nAry2NwmF9KJ4qp/UfF6oSmiNcJ/WeZ92sVh6URSRsKac12tVTqJctvnjeQ2B\r\nPqJfm21D4axBqRlgVWdW5+2+FcOId5GJK1PKpiU7gV6JDXCDWEAY/MTvhd6/\r\nx1/Mbw4kQnnj4j/oiLbSRYhHNdGMDZjQm1GEzQEpqS2TwHsVZVi5Fkgs+tE/\r\nexSOLmAftW37WeuvdqvHGWaVTItPOUDCh9xwQgMVzA+Af+M0QScUzH1nYbNu\r\nm9t7i/v2bU+Kk3M6KF+ve8mqUCI35Ah+M58hsqOlUoVVgf+ZG9dNkqD3sXR2\r\nJoLZTxzW2+Ga5Y0Xii966IGkaUbvdc7bTCMXZ5OsGgmoh2LX4DBg6o9vm3UJ\r\nuBoQB63mgjOzPpWwcoKUOdvnr4zlb/ccaHs=\r\n=D7+o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20220929132459.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b58a12aa6fc8322506c83212af4a2ac0/chakra-ui-system-0.0.0-dev-20220929132459.tgz","_integrity":"sha512-Q0dvr4tMwp12Gtfd219YF/1w3U7js4R34xLUWF1TxWgDtogVcss1pNiyoudsLMsuCO/4/wP6kjhQR7B/KYRpmg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20220929132459","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20220929132459","@chakra-ui/react-utils":"0.0.0-dev-20220929132459","@chakra-ui/styled-system":"0.0.0-dev-20220929132459"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20220929132459"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20220929132459_1664457993521_0.46391309358021493","host":"s3://npm-registry-packages"}},"2.2.12":{"name":"@chakra-ui/system","version":"2.2.12","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.2.12","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6792afebbebb21e03a4cbf6c0de79739f230acfc","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.2.12.tgz","fileCount":6,"integrity":"sha512-I7hFQswp8tG6ogjEMFs5TsCItdCYuNxpLAULgUrLdOlsQeNnHNQhlL4zpIfD+VzguhsNy5lisbegAMKjdghTYg==","signatures":[{"sig":"MEQCIB5KQCP2yXKuBPR2k0Zl2MD+oZyY6/NwH3BRToVuMldkAiA4FhcXrBIyXeN2723ZhaZ2oCdQiMsTAq2Nf1S7xJ9n8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOqeYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxXQ/5APcnVuOHOMdYEHLG3eVL/HTp3VnC44ORaVjwS+I+sfnef5ZF\r\nNXRc0Cxn5sAN7YpWPwuaZ//oNLwsLFkZaVHgCM2wP8W2prjppNI4fn11KU9H\r\nSdk/CtaZrvtADVY7uDRIxCxmZfKYAWCzYeYySNou/qj5CbQY1ySMqQgX32fj\r\nXzc3U7eo0YPplK9/CRYJ+C5oX/f2lZKMYebkBGFx3bSOnChlbrVU3s6o6scQ\r\nPgdUL71QIqT2mgvpwZRayZVIYUJplpA3NbcNE8A+XPCP9w8RojQsPhdXNavK\r\nA/FW3vL/nq7yBRKTeQaf/0y7pN0DZFRRYMw5fWUbUjb3G4EvWHb2FsNAF2RR\r\nsk+D+33t0TogLo5whviRmrtEQHk/PyOmdbbqW254CvzGuGqI+dHJENhwvqXL\r\nI1+bLfCmlAl76/xs/5p3gceknIMvUHlR/O8G8d+uvmD6kEsrXLwVPkZqwbxk\r\nz9oSp3h7nb0N4AUKcpycdSgIZBuLqa/V04mjsj48NhWfB57cRZa4ZnFz/rZR\r\noD2sHaeN3IvVTEBjmmeoN8ttglIsj7i4Pt7il2X666oGKQ8imG6gxYHhvkMk\r\n5uDJ+hQCOACs6JEODiRcoc6zEr/S6jpjZb7The2QzwRXeboSO9U1IgnHjYpP\r\n1FbQit6AlE3Ci4VY3aOlFXrVyH+18xjJjdM=\r\n=2meN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.2.12.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7710672fd163644bb567d0f6da6c61b6/chakra-ui-system-2.2.12.tgz","_integrity":"sha512-I7hFQswp8tG6ogjEMFs5TsCItdCYuNxpLAULgUrLdOlsQeNnHNQhlL4zpIfD+VzguhsNy5lisbegAMKjdghTYg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.0","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.13"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.2.12_1664788376508_0.32049928115026916","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221017063840":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221017063840","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221017063840","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"abc086cb90b07197abec4f09bdecf04d34d1ecb0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221017063840.tgz","fileCount":6,"integrity":"sha512-goa0TQ88H/EVhSXK2A4yV84vfa+pyz/L4yblk0xkUcYl283VWjXYcIRxhBSdGxtX1fVzanbqYkN5BHfYmf7RmA==","signatures":[{"sig":"MEMCIDFJ76mmrFhvtE32zKxlYHb2moYq12lWd/jgFZidb8KwAh992XaQx6o8wLwfP4pCi+ZNMbReR5Mg08NP8RrfaWZt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTPinACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobZg//Xh6yDEbc/hPIKXeR+Y0Fk0fB2oaOQE2P9DOJC6E21cxgRJnc\r\nwtzYkNFd9309eUHnHbq4/WjD55oD/XXOk1NuoYOiR5YS6K1W5ryJEoluB45s\r\nw04QSgYMeDLi6AC/YbJtaW2JpRLxwAWpWO2vVS4eAq8yF8uXurcMmw7f8ic4\r\nuhaMu6ldhYMwjWLTXaS5QbLQf60OaEcW4GmdHtXrxYH/0kphVpdVpj6IK/lH\r\nr0BVbIb/QjjFXfnj76lqFWQ3OOyeIIVkpOF/T+CbKYEmL2Ie3xEKx7kMJNhu\r\nHu3Uw3wr8+Y6etBFTMUZtDjSyC+ronrz8YglIcH3E0LSiPUATHHRuiWCCaUP\r\nbfUijRZHGGMgJ1ug/2YjT1CdPQGIDU7JRpkhGClmrnxu9h59F2JWrWQtzVCu\r\nLR3OD2iQZWNIoeLemmYQmhpjSne8BCliFGovPMkTn9yiX6gIjATvYrA3CL2F\r\n4apEYMGPxHkvDKhoHo8Of0i/F7cBe+l1Mvtm1AD0v6Ut7BxcTJjeoVRVluX/\r\nNZ86xepRD8TxtqNXDA2ICedfowZUQSV9J4IwWtwSC1coneGJOyxmr/2Kgmfq\r\nr7b6Mhg+6r27n+qcn2jVX3wVUdrsRfhW0IM8vWKupO03ENirx86q6/9Oo6LE\r\nxV9oys09+8z+ud3NCPb2+AOWqis9BILbuFU=\r\n=wfO3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221017063840.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ab0d5835ad464a66fe29c5cec4625293/chakra-ui-system-0.0.0-dev-20221017063840.tgz","_integrity":"sha512-goa0TQ88H/EVhSXK2A4yV84vfa+pyz/L4yblk0xkUcYl283VWjXYcIRxhBSdGxtX1fVzanbqYkN5BHfYmf7RmA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221017063840","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221017063840"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221017063840_1665988775194_0.42773247626102195","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@chakra-ui/system","version":"2.3.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b7ba122872d4d48806fbf994f1187680ae2296a6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.0.tgz","fileCount":6,"integrity":"sha512-BxikahglBI0uU8FE3anEorDTU5oKTUuBIEKVcQrEVnrbNuRJEy1OVYyCNXfqW3MpruRO9ypYV2bWt02AZZWEaQ==","signatures":[{"sig":"MEUCIAimuf4wyK9xJhfYlTRBVy0r06piygMnPlICFd8SOoguAiEAqbk79Pub2Q8w8EVEy8VeiARGmIakl3b/Uto6WWZbMls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTQLAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhOA/+LJpzYcGHdXcdNqGqBuhTOpMu5VSCRO1EAG0ctb+EWanAAkmG\r\nuaKufZvXLmiciTGny2j1Dt+4nqG7mcTZgj8Yzz5nskYpDT+1mNBIXdw8dP/p\r\nuyCXtHOBRAKYtcAdXkJdpUPMXzVG4/tzM+SiRMMUVjtkEJThgiCNfEc3u9vW\r\ndDY2W8TrdX7Mk2L4RVC90XFnE4hTymg9St90T2vUvRCdSabWe0dCUJ6j627X\r\nbduI91x9+dptOEv1G2ETeEoJNCCg6762VtcqTYkNbKmEye46sH+uZakktvRI\r\nfEw1nX2NLgpsMF4JCF1EAvhdoTI6ijYTB6LTzDGLJ2X4qFUMV4j4wBIva2GE\r\nyk04LpYG4SJZFuFRMkE1P4H3fYX/Dokan8g11GVy2mJVQ7sRuJk8TTWld3va\r\nHDJEDQLn4fL/MWHcOrB28gMMfdlG6QEeI6wO9YYLawfFqVyt+JJFnL68hutk\r\nefU5riteqAd9BjZ1sjTpmvjtaLe6iljWGG6TjjgofzTpBmp/KLIwOU5GhSzb\r\nYj7MO0U+1bJBorpp5MInbhS9m3glrEY0Vc3fZFKq9zV5O05mD/WJw36d6f0C\r\nfmkMAse7hk1HX2nIaJuG5FmcmfLuQso5s/VpVZ1irlEh9qZQXgQ4Vshc+uLd\r\n9INZS74/0+5BUte76yC2577ZzfVJxVU+f/s=\r\n=qaR2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.3.0.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/64618647950898ff2483a99687e911a4/chakra-ui-system-2.3.0.tgz","_integrity":"sha512-BxikahglBI0uU8FE3anEorDTU5oKTUuBIEKVcQrEVnrbNuRJEy1OVYyCNXfqW3MpruRO9ypYV2bWt02AZZWEaQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"2.0.1","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.14"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.0_1665991360079_0.4372277734709684","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221022080845":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221022080845","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221022080845","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4580e7a18164c8fc8541ea7f3120ca07a33e6814","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221022080845.tgz","fileCount":6,"integrity":"sha512-5U04ydfdxM9w3q3rW1b7M2eOA5IsetJ22jlnBa9dmjUMuiivuPoNg7yE4FzxK1Si8ZMHDctOeEDnceYfH+kJ8A==","signatures":[{"sig":"MEYCIQD0mC41trglO2eHNkJDsARVxhzIkbtRU9XvzO+Lwu03JQIhAO7C2nsPF2vKHO2mzBGbrfRDBdTk5FRF63nHmTj0zy3k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6U2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOuhAAojX8UcV34WaGrSgEBM6IHT3w8BIalrUMbgSFMXs1rct6Nr4/\r\n7AEdQW8dTPnj6duESGC7Z6fgFA7PpEAs6rHNifDji2jREEU+nL8kRQJoCoBK\r\na0zjq8ooIB5oSWd0kzxAD79yCaFJ3b1m4XDzP77U00Bx/LN0BX5JtCJlSr+m\r\nmaCn7K8v52ns5XyHXPmHCWM60icGFIuF928frOdgpC2JvWXjJKTB/R1I+2Y6\r\n8jy7ujGiZhuk/nBgtZqb3nWrTDbeq1TPtzapDdAVR4GCdIgnLr9vOM1k7kDt\r\n2fFWR2EAnaCfJ/kR7zXBDOW3nO8KEvtITJ1CKRuCX27RFH4ZZgDmSAJfk7zf\r\nHtMpiVDt3MJ3f8QAAZ7+kNjZrGYXm07wOcixGDZCk/3r4UjJYuxJfufnJTRz\r\nDqw/fRcOc+pornATv7xoqv/IRCqTlOky3ypSfIFXNc4CdAM6MNompQ1x036F\r\nBD2MB4I0TNlg4NhUPCJrw1kTjglhYumvcypNZiFPzSjkbVX3iTR9YNArQJxL\r\nPsEWMx5c0lz6+sZ0181T3EOg65GzfdwKwcsP4O9JviXpphYpZixVNWX0BcqW\r\n9Ln7xmhWO2pOXIjde8UWm1VtKTv2RpOo+PNSuu5VWIplmsg0s3UxzTsfqoJA\r\ngN16ok+QwpmAcor1hH84ZxadCd2dQ99LQBs=\r\n=l4Em\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221022080845.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b8f47a3b0ce84c60a15a1e03329fbd30/chakra-ui-system-0.0.0-dev-20221022080845.tgz","_integrity":"sha512-5U04ydfdxM9w3q3rW1b7M2eOA5IsetJ22jlnBa9dmjUMuiivuPoNg7yE4FzxK1Si8ZMHDctOeEDnceYfH+kJ8A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221022080845","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221022080845"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221022080845_1666426166396_0.5556002134487341","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221023160600":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221023160600","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221023160600","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1e41cb53de79bd117cecaecf5c227c82a21e6fae","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221023160600.tgz","fileCount":6,"integrity":"sha512-QQXYERQsdQFABhOv+K5XMR5uwjOFQQ6RGBaSmQpgsMItH0rXZIcvrOR/GLTOtzMakTVxIfgGH4DGgERfT/EIFQ==","signatures":[{"sig":"MEUCIQDoAuJaW2WhIKTQz8SGgu0t2GevzM6WWg9Z9jTamXI/xgIgbA3FN/OVV2q03PWfuNq+/D4wnx12nONmvbCHMVd6YjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVWaQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpn9hAAkTlAHUlBpjLSAMNlgMYZ/U7yuJLHr67SonHK+NcqLO+6ykOM\r\nPOXq18QqeYdzV44FvUx5dLdWGnBQUZFyqgl3fcDfihtfMnYUCEog5A62NpAw\r\nvnLWnEW4K97QB564c/tDXHgnv7XTobmlaJg/MwRSqaxCc4HUXy1aFn3xstR0\r\nNOHDrFW7C9SCRLdL9wlk9ZHI0muLi8erDpxOy8FKTm4iQNxxCXcJ/DF122ic\r\ncroOe5KJWwFMKDQQtmtbEzb9xtSw2cRPcj16W1c3qgMki00BeQ5MuijY/HD+\r\ncTcUgJeiXD9klaL0Hqm0QfyjHfH8stGLCppA2ik4vSFTmgmb3Qlk6UzxrT2M\r\nW8BYY8SaFZZpVCk4fwkViupXqpXGvtn3Z6jdCAL+jOHc9ISY6j8IIk50dKel\r\nRkkSmANn9yrOGqbR+nJugc373rbfwYoxDj72F3ROMSAd90NM/gXBGHZusVk8\r\nRTvGjtbggVOdPAHDXnwy7pQ5sHs+SqKQ1hpZ/YqPm7XhRCbJNOYF5i3XuBOo\r\n6hm/sSCyvggpTo1qoY6Dzh/7OHHTeUhBkH07+VDdnZJqcuW6XXRidWDTXKL5\r\nRCDF/Vr7RTDals3tvu88eldfjOq/4l+R06Yqzg82FXcfD7O7LYjikeETsEz7\r\n1OOH2RvrvirdFHviH0TFv9+AdDi9W5iCi9g=\r\n=qaU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221023160600.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/29528774cbad49b82474633260f12624/chakra-ui-system-0.0.0-dev-20221023160600.tgz","_integrity":"sha512-QQXYERQsdQFABhOv+K5XMR5uwjOFQQ6RGBaSmQpgsMItH0rXZIcvrOR/GLTOtzMakTVxIfgGH4DGgERfT/EIFQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221023160600","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221023160600"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221023160600_1666541200071_0.19181672327332633","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221023161857":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221023161857","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221023161857","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b6c148ade5fe96e6581397438cebe996cac382e0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221023161857.tgz","fileCount":6,"integrity":"sha512-SNzwvo/5OPpbgRkQtb0WThmdBU3tKF74MQSpbqlX6Wo4Wc92Tp5vGVQG1CCSTqZjpZQR2HhQjcbApS2lNMUMiA==","signatures":[{"sig":"MEQCID3gaZU4B8KukAnAEwievLHFryk8weVJdTCHo/+I2K9SAiAkm/hhVQiMCeyGQoAoTfMa2kq4/m8Fkz89Axg11Ouo0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVWmXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKPw/+PCrdrJKh0qn0BykxJQcgpVSwFlzaQT8TFmrWspO/OMZ8VlH8\r\nfFbsksj20Y+v5y8eTUD8RliiyzxV2UCYugA199T2KvVUfpWN0AhDwhRpkwSW\r\nL2xYxHhCUotd9p6hAVm6ns4LSfXh9C22jjLam3U+PRyisz0oSAsG9Ty/JXJi\r\nO+MI+jBGsKXY1CQZTXbukkT3jc536ZGNJ8HPVUD1a5ieTZbEppXI2YVYUbPT\r\nJZOBY8ytPRvSDqAnS9hIxNceTp3QcOFupgYLhiXLX7IF/dW4funh3wWAb4Gu\r\nQTiI8M/AO7Zdf+MyEt/1VA7JYVTUE4Er2vHNQil/mX3Ul26RYJLRknZNJFjo\r\nE8Pv1kgvCV2qW9KrKjgrsvIoMmtZg93VpDNNG3rAQssga0DrtkrKRkOQGaXo\r\nQKHPtzF97Q7MMI0sDGV35R7mb0mLEACHTfdUz4dLDsywme7TGa80LyScidf8\r\nEaTfB+/tvAJzLIUTWPPX3Op9/Em10KQzyhfjl/V5HwMshGo8ilXuVNXpuIkj\r\nSFKt+erEWZu1pTXN88H+7H0efWn9HlAW36byjMZ5zlZkRMDHji5xJlbKKtGo\r\nerzg+X+3HSWBfrYY9tV7eXLEcQEXiebHZikdKoRsbd2v+BKW8tIokooSFx5t\r\nTr95MI28ybb1tQcwR1+gLF44TW95a/PgfxY=\r\n=+8o+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221023161857.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8c35bb48ad885116050a4100d08012c6/chakra-ui-system-0.0.0-dev-20221023161857.tgz","_integrity":"sha512-SNzwvo/5OPpbgRkQtb0WThmdBU3tKF74MQSpbqlX6Wo4Wc92Tp5vGVQG1CCSTqZjpZQR2HhQjcbApS2lNMUMiA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221023161857","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221023161857"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221023161857_1666541974878_0.8058650611201168","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221023171601":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221023171601","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221023171601","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"752d9115efddafff455478c8ca3bbc6c3c9b96d3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221023171601.tgz","fileCount":6,"integrity":"sha512-b0kC84kWkBrlZMvwsQBKn1foIkHO7PYLtWawNYj6RCVm3ycN+XSWxR61mVWeLrQNwcr/pznRHVFtH3jRoVbnrA==","signatures":[{"sig":"MEQCIGk+Q6p0V5bjh4S5Oeo/RrMuCmjlYvSyxJypeBQ+powbAiBjagry1llVl0e9Ai0ifqHsDibhp8TnCDpptfsXAoO+qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVXb2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUOw//RgPJ/AfJRz1TR9X6M4TdmbvsYm1ArF74rbqcndw18PwY4EDz\r\nHgUt38BJMlPkE/zURwN3KJ2EFRTxvTWKBqlDRsCUigjHsSNPp+dAjguE7Cju\r\n9InE0oE5mBvsgg2qXC67/9f9OjTYxJhpcsw9r9cOakXCy9ZTrAYRA3d9Pk5I\r\naRb+r14cOwwZA1QQkbWOK6Mz/uHd0c99+epktr/eTkNQgqpaU6w1EMkrPe+m\r\n3eBXMQnPppjJ5rHwsJ08D1x32z4NpvoEoYTecX6IKpasFrP9YOkpyw3hVsao\r\nDvq3XONYArT4QpI4DXoqKLWsBpClqIVHsgn9DnjOrCsEyuc+8vBtHawrMfYa\r\njEOQZBa9Nb3EOXGzvVIssjezk6uxUQ0YzadS5GDrLzt46yeoDRF59LHeRtBN\r\na+ZIJQEDnYfHfy4n3iX2QzkZTOVJ+BXKWb4nUEmVOulM1p8cTpLrfnFdb0Xk\r\nmGGrbF5tBsUGg/oVhw8pPwFugcC1UuUgta6IIt1y4zxoSQVUNn8nN+VKhF/a\r\nWOYHJaR4iC7hZUhovNyLKUId7NpgK939vQK2qabycOp3/rYRO55E0Sl6j3az\r\n0PlWWmX0KOtffvbqtJ2FHOexEbdgkDUaA7dEA44TXUWAMjwAaZtKggFbXRsH\r\nx/OMflStEuQOJDM0YJvGVRELdN+ROIA5wqo=\r\n=m+fd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221023171601.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/94379e4ab97f62144cfdb4c7931d684a/chakra-ui-system-0.0.0-dev-20221023171601.tgz","_integrity":"sha512-b0kC84kWkBrlZMvwsQBKn1foIkHO7PYLtWawNYj6RCVm3ycN+XSWxR61mVWeLrQNwcr/pznRHVFtH3jRoVbnrA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221023171601","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221023171601"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221023171601_1666545397781_0.6008618692171173","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221027040551":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221027040551","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221027040551","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9297db34d16b517c89aa98eb799f05656bb6a71e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221027040551.tgz","fileCount":6,"integrity":"sha512-AJVfSUPBiDsA+i9eVdT5bttsZRehJDTh7ehM7Ss5YRK14PmJFgOqW9BzzviwaITUrjw9jkUUgC/QeyFH2LDFOQ==","signatures":[{"sig":"MEQCICIN3iLa0M2wK16zbRZQYHyi9VyA+wKyVhFndtg4CX3KAiBQ97FFvWMCx2swtyAbiShjMc8qN4UUsB6miX3fINNW0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWgPFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquJg//eGikNFrjrCbUB5Z7ilKJeGkSRMA0BkgFDd7jF/wRA407W5WZ\r\nc5nlJ1vMvqBATeWKgHszpL/h7tyVskqJxj+dKdo+cWqWbTBxuEwdR/NNOdoN\r\nUYie+Em2ejna0rZGLaZ3TKFlbmVsXZB6Hq8f/z3YSzL9tCk2rvHv3RCKTvRO\r\n80vSsPvxDwOpjCMR19tpzhVwc68VoC+xot17kqL5XDNToU3aM8pRTrmMYfyC\r\n1BbcgOKIGz9sMYHm1Grogp+IJw50CGWOCtNoFNaseoU0VgJOOZZgtSnGOIhr\r\no7OxtxdBvCHr6iDgzRYu3oemAUVR96u/XKsBiP6FKgkLfyvNRhJTOobDZYTv\r\n2mMmZsYQTkURjKc52xuffhjHBB9Tr2Y7ul8Islr1MFNT/d0tkTiYurHBM702\r\nrQsWiz9GN2TX4U2PQa/+H6NSctACqVJDucVkPKiriElXrvo2Q9Z/JRpMcoHn\r\nYk78D98LCTSVQgKs69xS6e9JQxEaetPOBkPUvCU5+2WKIY1gk8plkGqUZ5Wb\r\nsd0V93nQFaSW5oEfwPgwplFBErus7rAvrPIqN1x+nA65dRP58EsatGSlJGH0\r\noQZjMIglJxsXJNyuJHktypF1UIUB5CnS6S/iDiAraF88M+/NaxFeccEEqrgJ\r\nIkkNj2TpV+qZLUXM55y0op546kPhmwY5eQM=\r\n=A/W+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221027040551.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4f79c750988eec7baf2cf4de92651849/chakra-ui-system-0.0.0-dev-20221027040551.tgz","_integrity":"sha512-AJVfSUPBiDsA+i9eVdT5bttsZRehJDTh7ehM7Ss5YRK14PmJFgOqW9BzzviwaITUrjw9jkUUgC/QeyFH2LDFOQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221027040551","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221027040551"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221027040551_1666843588892_0.6571424895008333","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221027041741":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221027041741","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221027041741","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fea48c2e19e36bae843f0020da69a8d491b18213","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221027041741.tgz","fileCount":6,"integrity":"sha512-63ElIUN0EQFapwjYzP4JThxKu0xifp0e7BOKmi+YG41op7LyfHrgj/g94Apzd5/1ovSFcqHqR942C41fYxRuXQ==","signatures":[{"sig":"MEUCIQCzBxwSk630EGwwiXmeb8QTU9ZN+AOLhEqDDoxv4MkVZwIgMJ4oBfsHexgvulRPBBJn4RMRhTT7pVIxtIEJFy+z0pg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWgaIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRrw/+Mr3qrLJl9viCy0L86R+cH//8Ey+VgQXcfbhajxE/3QcOrf/s\r\nXO0Dm0MsJqis8hOaD3hoQHPTVUYE9oU0us01ngo5TPnJLDKFaOaOr3XLnobP\r\nHcdqQcFGPTQHRCGhyfM9fvPxU5WV2uJtGfeUwLh9dycZw/8lAqJZPQILq4IO\r\nOlqud5zpSy6YbIXYHv6YarbFz5fUOGg0wv8EHstbqv5jUNasyK8CVo4Kf9rt\r\nHrnzh04LAuQEr9A6SYQAs0HN5dbwSx7ip/1SYlqc2LK6R9xFDRtK3Q+AZQ6h\r\nWsvU3rQYj0ujP9K+0Mz8Ls4XC7c4oTmJYUcM+ZLNG+TxnHj3OIjqrqZnzZJr\r\nw+tsRQU5zlG5wKRXSGjqpXQZBbCZa0e2lmz0MRg8D1Uz5gA+w6dbcetg8IIa\r\nnqs0id4wmdqliNf5HymKajB5doRbk4/hV+7k9PXRJOLm1Sxo7xKTWbfEhLpa\r\n2Y0QFOQLb1YWjOXPEUPnvuZjO8KvSbpuxr4s+Dqo3pQvh5Qo5C1Su2dbonTx\r\nnzOrp/NChbOb47v5R5HtHeBqwn5n3h4CJuhSD7SB58Ud0XBYHmfpKOc+CGlR\r\nBRVNBkWWKgt7zpFnDOCBkUYbZ+vepl3gPOVOjPuw0buIlVbMU0i+8dF4ef5p\r\nvsbXOoOpO5J2/KxfiHUTh70VwzvIu/Cl4VE=\r\n=11m6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221027041741.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e31d4231df55bf767470ab777bf63374/chakra-ui-system-0.0.0-dev-20221027041741.tgz","_integrity":"sha512-63ElIUN0EQFapwjYzP4JThxKu0xifp0e7BOKmi+YG41op7LyfHrgj/g94Apzd5/1ovSFcqHqR942C41fYxRuXQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221027041741","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221027041741"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221027041741_1666844296728_0.09800101770804615","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221031131135":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221031131135","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221031131135","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"10c5ecc147a5ee831bf42d68df92f3b43474e747","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221031131135.tgz","fileCount":6,"integrity":"sha512-kKENiUC6mNEYhQpJi+In+O8JBC3Dlnmdv9TDlk7H0RwJOk6xit+jOe12zD6d4p27DTz/PrhA2DpqaVpAkEnuvQ==","signatures":[{"sig":"MEUCIHeG66VxbNEJV3vW31eQs8dQLpm+JyS3v/f27/ogYDKcAiEAiPdv1+WvnWFgDEtGlTDVk4hoLCNwrUv5E+MGg3R96i0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjX8mvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPmQ//TjWl9Fp9lBdCq6sjfeSEI65wK49RTviOIVJk95Fj51+ceqTE\r\nE7JLg3H44kMwTQw/D/osYjyCyoNFMplPbTKrsmM5iusozn1iBW4m2PI69sDz\r\nYnQ3EaFlyQ1Kpizm+7Kw7WciuDgzOJnbVazjP6G30g5yqpO/rfMOtNIZAe2v\r\nAuGeKA31jpfc1MTDQj1kQUIMJ+hlaLCL4Agn71cdQnXoLsQ/p4Z93JRGLDfA\r\ntBgHU0jIfbpTpezFQhJBWyao3fcz8ab5dYryxwpK0GWptAfqVcu8ArGuJjQE\r\nBLrYPbfrEKhlIjNdQeVvx72+rXaTnYc0t1nqGv8Urr+beexeesxS3drbIBDh\r\nRQdQkeMQtfYSSRWMmAjXAiGC8bFmPrFDS8DNUw6J1+A2oE8TP4AgGS31PcWD\r\n1h5lqNVUS7mCAeTfbGLZsrLgW62Tcl4Rs53a2c45w0kqTz0dvOpUY6b978rX\r\nGelRq+qPDo1+JOrqzPV8l9uP10VF6S5j00BgxErd04Of88D3JBsBi8EyXPei\r\nSCGJkfNdJAdPNrBBMBd3d/9zwod1RxXbB+XGIDok2mY/FP2XIqSoJsmOO7/z\r\nkJYYDnpsPHXxVZgt3NihJIXRidMdcmzHyugcOpg+G3OhHa3fnKJ3Oltztaig\r\ndtc+db7IOs8fvUpskOorSCu6EOclYTXFHaA=\r\n=bEIO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221031131135.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d1f70e8efdee1cda6f17bffb6b8cdf73/chakra-ui-system-0.0.0-dev-20221031131135.tgz","_integrity":"sha512-kKENiUC6mNEYhQpJi+In+O8JBC3Dlnmdv9TDlk7H0RwJOk6xit+jOe12zD6d4p27DTz/PrhA2DpqaVpAkEnuvQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221031131135","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221031131135"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221031131135_1667221935102_0.11204673446289037","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221101182032":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221101182032","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221101182032","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e37f198ab53313c992d1685e98c144983fbe505c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221101182032.tgz","fileCount":6,"integrity":"sha512-2LZY6UIJWnoZr+iKjMisVHFzvG+tBPQAS400YeScK+1EcohryIll99fgHdqYkdlJzc4ThHTKj6jkx0ouc6vvxw==","signatures":[{"sig":"MEQCIAXMFbTMN2neCzEzHCQ+dKALH3o5ZcSe5X9UK7E5Sf+lAiBcqzxjaMUwEXp2gN28hK0c/vjeg8bSsgEqb0oBJxuiqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWOdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqgw//bp6DkI3up9g1dBl54MnLLNB1pFUiBrGxd5VV4ZIJk3xx3M9D\r\neL7QY+IcNEgRzp6Cz7Lx4SzlS7rbF5sXegm18HtE1PMoefgNr0MxoTwu6ONF\r\nOmdGJyH+ZUdXKMXm9BDvT0Gl+bpSKIswDbYbCFDazqOAt5qj0X7gUg5vbSj2\r\nnfgM9dd7f+7FgX1j1nC4ed4iliybU765zZOCAYY+REegMZxX8gs5/Mvvadkf\r\n3fmGk5NFFycpBOl3BINVX9VUBT+8UAwc8TaVQNYeb59wwF5INuu9tnu/OeEk\r\nISlIEAL6f92Em27xpXa1m4lMtRkZTV/c+r2iA8OHOKv4ZNqdZyZa5Y6rr1Vk\r\n/hMmpif33vU8zfZFgVpcxAQXB36q7Sbeq5eKT1TRW2iKI+mM6DxfcRdkxKQR\r\nR4vpgSCklkWIBCg91U/Lh7KZF4IXNY53JbHc10fy8JUVyI5iF4p7HHH99pdw\r\nLRAOkVNt0swnRUi1GgwSxI6EMhB7DFHMLJ9JDQ+awxg2RZBeEuOQ/wP6qeac\r\n6y7UkjEObAM0zLvQt869SIN0cwE6xmbkYkYHWsIdePwx2XkZqVv228Wb+S4L\r\nl8JaWc294qvzfY7DqtsebKmnob5o633fyhzldX9fP3V+UQubSzmSBBlZ86xY\r\ndbGBp7onoyfyXPHaIYypXN5uInmHj83fRPc=\r\n=dKf7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221101182032.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/af3b356e7f22f7fcadff399f6401dbcd/chakra-ui-system-0.0.0-dev-20221101182032.tgz","_integrity":"sha512-2LZY6UIJWnoZr+iKjMisVHFzvG+tBPQAS400YeScK+1EcohryIll99fgHdqYkdlJzc4ThHTKj6jkx0ouc6vvxw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221101182032","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221101182032"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221101182032_1667326877530_0.18507093301863242","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221101183810":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221101183810","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221101183810","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"73b0c15bccb9820dafcfca76b855ec83489a73c5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221101183810.tgz","fileCount":6,"integrity":"sha512-/2q3H3ir7YpOQeM2evmAIpmRf+jHhe5ZGx3Tn3wRPWxTLqJdG4TIvLYodJeE7RUAIlXeIKXbLOx1Tg5JO2pc9Q==","signatures":[{"sig":"MEQCIHoUDLr0ig/t7azlfON09Nc96dORzgcNHi0lG8pj+PlIAiB9AFKe/y76qlXl6vHuMKRG15wTbguBuiX7QhWI3v2QNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWfEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUgA//eakQvy46b1od0Tk5TidVUPVMjC8gBzorct9fBtxZFzzwqT+P\r\nO6RXLbAOK4jBnxti9e7crJKgAXiYpqJXaq31Wq75vOZTRQ7KLpFVDeT2gQ6Z\r\niMLZJJb0w51E4AspIJLFgkZFWdfrA5BqZC5yIeeeT4kHx9UjInFFpXfohOpR\r\nGVh1DxpmiHnWEoNwQoIOswKIQOsQ5e2rOf5LXSyOWWNob9hE38wDitRYrzSP\r\nI/zUDrU2xBOLVEqqvkBxII+jOtg8pV2W4SBwUkuDWkDFrY2yAPXqWBXhIvtb\r\nQ0pctOYGphGfVbBRq41Jlny+rpxZy5cbvJUBoA5na9DiKo1GsxgFAtdXEyZT\r\nLcXSP89kpm+8tzSr94fJWX/ti+abn7vnhuMJGHH1oBqrlrKltIv5rbo263NB\r\nlIJfFaxcGUXJN53U7u+2pPavX0ChqnT8wvCSPtkGLUsj7rAoicfNWWA9/tO+\r\nt4ggPaFtnqGbTGpiJwMPiRlr9kp87LsZq6GDQt3X8lu+aCoQBfwosKap6nMu\r\nSHBxMscR8Nr1FiYv8r0EOtcHvgOktrhAFCM3SAkqOfyo+gRNaD2zf4/wcR3A\r\nNrDjfjxou2KFht/RAnsZuv0rZs7xd07TmFiA2KU0y/YMJXbDRgkuKJf7/C1m\r\nQsB08T7aZ1zEvyjo8LqnROXlxVeX8H4SNQY=\r\n=m8wG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221101183810.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4bd0f8fe670328809d6ccd3f88293ea4/chakra-ui-system-0.0.0-dev-20221101183810.tgz","_integrity":"sha512-/2q3H3ir7YpOQeM2evmAIpmRf+jHhe5ZGx3Tn3wRPWxTLqJdG4TIvLYodJeE7RUAIlXeIKXbLOx1Tg5JO2pc9Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221101183810","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221101183810"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221101183810_1667327939870_0.3635048334144515","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221102123311":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221102123311","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221102123311","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"dfd4a8fed1c876512d16e1da11e39969c4d49fbf","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221102123311.tgz","fileCount":6,"integrity":"sha512-REuCV835BDawH5G9WPvEgAEgJa3vLi4xlw/rteGkmRhrdFGfqwSD7rYYgV4Ptl1pkEwWq70mIsAcq5l2+xP4/w==","signatures":[{"sig":"MEYCIQC29qW3+f/racFN7vE5zareTOWe11R7aGkXJ4ZbhyUiLwIhAPaTlAIPU7Vzzu67LiKSbY28D/zsq7Gizqq+GAMLm/MM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYmO6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV3A/9Hj2RNg8N2Du68xNyGLTf1Wf9MHxHtHOmcOHd7SlLmw3lJAXq\r\n70PTMxP+aaNi4A5CpV73nfWpnOZ5Ae0eSqOk07xcl4GEK/TVNTaJf1I+kjXR\r\nFWNcXud38eVLcI0GgPePWiyq6Xq8Gyhodyva4rgp3D6eT3CaGpCHbmsRtR8x\r\nwmEegCM3KDANDBSdfMysTOiCEHcG+Z8tteTBZYrfaFKFKXqTBiJALkjysk8A\r\nonSDeTiyoq8vk44XbxMd8oZGQqvlmRaxWSHv1YF0SJhQmKlYeJPy+ks6QfMV\r\nNTh5XEZR4WV6BlOQZp9D4n94FppCuFkgd8dmxDNEUHResQSKJZAmamgcpDre\r\n/dpd4yAitAXtsTFtRNdO0kgFSaN3DbTnu6+MykPJscORSHLhfIlg5kKOx6fW\r\nv6fKyuLofqeiTy0xL42yiRXgWPdaEeOMzHhym9iGd0NZsUoJUkdJ8ZmP9w3H\r\naZOYVfpq1rp/20w4CDh/pO+ES0D6D1ehsFhmjelvUf/ZPGMYS9wQO6OjpzlK\r\njuqPqW6I6uGDtkoSxfZAU3B1jfJrhBco2gdGl/cQN/pohUmlsGR1p6C5LP5X\r\nd8OXaq8BOxx+3jCRU2ZNE4CMfbKYCN72rUsf3XtZbdItl9+ioyZvRAaBgKQ3\r\n+rDdWDyP9L9eK9b0L+DMzDyav45XHZ/tnGU=\r\n=o7l+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221102123311.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3598046faec2ff16fad847a66ce6d3b7/chakra-ui-system-0.0.0-dev-20221102123311.tgz","_integrity":"sha512-REuCV835BDawH5G9WPvEgAEgJa3vLi4xlw/rteGkmRhrdFGfqwSD7rYYgV4Ptl1pkEwWq70mIsAcq5l2+xP4/w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221102123311","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221102123311"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221102123311_1667392442269_0.9936521850564717","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221102124227":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221102124227","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221102124227","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cf360e532e01a1e28e81e17dd9fd05f5bb4d332d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221102124227.tgz","fileCount":6,"integrity":"sha512-9Ra5F2DDQeVsbEu8SvSg13MS69V4txtopRAXm5S+BHL7LrwsMT3vgad64lgaS+/NQJxHDcMt0Yx1B+StKfdhRg==","signatures":[{"sig":"MEYCIQC8QTLIKYIdXGeGZXn+R8wRCVIy2nGViVTzRXBwhoWsHAIhAN3HEdNxVb/QR/Gj16yZgw50d1lIGwdUlenVJ+7CSuER","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYmXPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpz3w//bA0W9HJNZQdp45A7cCSj39c+Lw8LqjJagChSTgJ0PQUz4FMx\r\nVGFDziLowlPAxjsDPxBm6M/UcWY0Q73RTPVTo3nP8iIC/pEmuOL6sf9ZN1/7\r\nrCwfEnw2o7Hl8QkD4Z8xOTHqRxXzEcuozDiVf7OteOr4f/QxZTPrH0lTcUmm\r\n78XrIVssIm9MA6zP+8y+61nExToHXLRqdCo3e8SRH9A/KJxTzlUzioGAzWpx\r\nOSPMcjIBqPHNEtk616ZoSaynl3D4ykB8lM/iEMmSBIO7B4lmtZRKFpL29DrS\r\ncUhktdBOKRxrYNatOvQgr2EG8w7pqYEyQtSbXdDqTn3RgAlg3i7BDUPWAOLh\r\nJ2MadmrgjI3g6eBc5dutwZfy5PpYH49yfjjvBiHEs8wznLkKNOYPMNIHtKsd\r\nRXgySDa8BRP1nJ6roUUdTx84K1/zvp6P5N8J7K3uGxPyJnqpehyIBb2AHc08\r\nltctdO72LU4Bev8CzmqHL17CXOrCHyNTzWDgfzsV7kJBuY6sZiO9eh1W152u\r\nodbjRYeacxAG2D10bugnayYiTTf5H1YuI4yxm5x2s7b1iDC3aab20EKy6Tet\r\nlV3/EjRnkSFCMQoTX0MHYtKq5TG+29RnnuUPWnvJZoBTxKQ49kIDCS1FvAKZ\r\nqocxwLaDb4o+ZGPWDNOZ8nictmfzpMq9Is4=\r\n=5R/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221102124227.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a0ac6dcb1932c4d1a41e75237b3d7385/chakra-ui-system-0.0.0-dev-20221102124227.tgz","_integrity":"sha512-9Ra5F2DDQeVsbEu8SvSg13MS69V4txtopRAXm5S+BHL7LrwsMT3vgad64lgaS+/NQJxHDcMt0Yx1B+StKfdhRg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221102124227","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221102124227"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221102124227_1667392975612_0.6494651703948084","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221102143239":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221102143239","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221102143239","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"85764dda73574629f06dfe81e9c614739e932595","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221102143239.tgz","fileCount":6,"integrity":"sha512-pXFI6loDZdvZKY1qM5B7fH6pTd5E9o5PXFgpiz2LZI2pzPTR2OqWPiLfV+1/JK6F04D1d6Lm9wAb+gZpEGrm3A==","signatures":[{"sig":"MEYCIQCaC4S6n01nag71COYzePpbNeI+wZyj5aiK7fwoMf3zPgIhAPa/HaogX0ap08+l57fxQZ7sPMZcrmpMnGb8P+pFX44F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYn+uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEsw/9Fmmea5OIUGcOiBQrM/RkurPzg8b7ocImo4y+mmDAgafLYAhk\r\njrnynJV9VY8qu3PiAf2DGcAnwzcNutbObheE9OVhwmAD/U2meuDI9ELWMoeY\r\n9NGM/AFh5Nc/bUR7uYCjTOyTIuP+R8vh4MAked1AGOnXJfoOxWxUjrN7P2L5\r\nBeGZNE0VcmdFrKusfDABA+Uh5S07fSPEK81iWQuo0LtHPiD2CbKytaQTpwMM\r\nZt8Wqw2FS+vjekv+ANxDN93+ryerAsE1IlF72csK6rKP9a/fQhfFLLN4RqfX\r\nLiOylIkNB52SIbMLvqUdqoBlJ7ptnn9EI6u36ojkZCVCpoqBZQrDF+yakkFl\r\nisn11lXrNJ/+U8RPN7OpT+TG2yznlVFGplrSMP3Dwtt+Wh4oVho9sSg8F87o\r\njwX2Zy1bmQWd/IJAf8wJ2Du3BlhcyT0HJ2kqSTo7/WaNRd+qZ4v3WdfNA4ni\r\nJkUvd1S4r+8y60ZgnhZGAuVWNP+BtO+Xt7TUHDTrIRgAQyap5KG9muqL1a1e\r\nmL5A298bCRHxbaXiV1Y4NwdQItbhG2AFwuAbHSK2IGrnAK+dj87QL2ra9zFm\r\nTivapZqspo6s6mK/NW66vKqrYL6ytyk7OXIjmuU7ftfCftvzSiyTmnjo2Ltn\r\nxEgae7aC4p/yVAGSNuzhI/HTbmg0hACKix4=\r\n=+mHe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221102143239.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d1034bda115d9bec27ea7a4fedee75cf/chakra-ui-system-0.0.0-dev-20221102143239.tgz","_integrity":"sha512-pXFI6loDZdvZKY1qM5B7fH6pTd5E9o5PXFgpiz2LZI2pzPTR2OqWPiLfV+1/JK6F04D1d6Lm9wAb+gZpEGrm3A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221102143239","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221102143239"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221102143239_1667399598188_0.38897170364036593","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221102152926":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221102152926","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221102152926","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"586b6f51773aff517e229a448a0b9fab98196ea6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221102152926.tgz","fileCount":6,"integrity":"sha512-dYXI1w2jgZS+n/NTaynmn7dly39ioYS6PjWS2OBV6enC2a4Iu+yp6J5Psxve5BjHda+pKEJp/xgJ2WTkPmfYXg==","signatures":[{"sig":"MEYCIQDcbN/BmyPYfTe9Jtg2V0E0VVuX5BaHrxSYAoXWniJq8gIhAIQ/l+xZCdPtOn04MiCVMPk81G50HzTaedFetJ1eE2EP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYoz9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTdg//fXsjv8b8pe/Wd6kZa6Qp6FL83UajqZ/FhN13cQlq/HCn/7BS\r\nZhOk8VjBQoPUaK4xH/iW77OLg4bOINi9E/4wq1ECQBoGr0nUsQ3lWrllAOE4\r\n/LzDqVk9bPfHlf0tkODY5850OokYCVLMzZVH8VgdHhm1Ynac96dnUtKfb+vc\r\ne+t1+S7iT01XZ3web3eo/hY7xSV9pb6ok5g1sK3ZJR3okRImGEuk8HYZsiIU\r\nC7EY5CELP4XyTsOji54Jz8L4BRkNdcOJzsEpdQc8YIOalcFwdCeLay0JPnqj\r\nQ4QtxalQPM4oxxcL4mVzyH1lvIG1ZKMFgjb39zZNLEHt3FyAl2dPmfSbK7A1\r\njufA4yFZXpXsTbKz0QP1b+Lg1JvgWpfFEvBBrWwXUTJ+yoD9n/xlJmrpwjzd\r\nEScMXG5H2giez9Apr5ziFZAQgiR4KTIwMfnLLzXtM2MYx+vJivy7dmNV2jJT\r\niBHjExl/p8wJ6jKmx6Ha8rWtEw9b4yYe/N+7hTBZuBDkxdoih3YbNVGZmgnN\r\neCrQPSq/4eTxZeH/JsH5VVoNByrsEbbZ5uTeWwFuZxJ3j5FZuFRe4VkIdg+d\r\n+X33QnxWOFKFE8wM4sRPC4svZdCB6cv8CJteYsZgquuEU2sWz56/hX7vmAVy\r\n4G+0qOq9h/xg+nMZKhXSpqj8CudJ62TGKCs=\r\n=koFe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221102152926.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4fd80474be2247d7a6f1cd6bfda1c5bf/chakra-ui-system-0.0.0-dev-20221102152926.tgz","_integrity":"sha512-dYXI1w2jgZS+n/NTaynmn7dly39ioYS6PjWS2OBV6enC2a4Iu+yp6J5Psxve5BjHda+pKEJp/xgJ2WTkPmfYXg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"0.0.0-dev-20221102152926","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221102152926"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221102152926_1667403005108_0.5142922677518846","host":"s3://npm-registry-packages"}},"2.3.1":{"name":"@chakra-ui/system","version":"2.3.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1fbf18e1f19f1f3d489ce1b864be1b2eb444072d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.1.tgz","fileCount":6,"integrity":"sha512-pR8KYmqN6rQ+aZ8cT5IYfF7rVXEuh6ZWZgWIdgmt5NMseQ2DR9JlK0SRoHNFW1TnFD4Odq2T7Xh46MHiQZCm1g==","signatures":[{"sig":"MEUCIHtxyzZLQ1PkLO4hpQpUB/emEL7cZYQiKex6wXEaNBu9AiEAnBD1IEjfd8HEXUFeRvC420LB2rTxPgLpr/fnl2OxnjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYpxZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBrA//TMmBAzFdvG7Ea8a2IO6GhNr/w8mrEixJ64+E+qmzz/ZXV4nU\r\nZx4LOHyCD88k1b5v15eeDrWhoBDmcoC9HctxA2UVL7XasUNer7Zy0G9JYO+F\r\nB0GX9S0kU8WgexxQsqxPFECtbNLkYCHr3yY0go75DnPlLEAlKtPXhzbBvA3A\r\nlA6D5HaIknyBqUbh8PxoGMmov0sLndptvb+i/nFh9Ns4b5cqGFyvechZe0/H\r\nccfg6GHzM+XKTRYnsDRWFvj5+CLuNpoaNUwaOcUZs9iMi3ukNMaoNw7moGfr\r\nV10IpqzHybF7elizvNwEuBBLLJyYNyZ4E1V0vRLxhMAFms2mTOkbxNwWa0Em\r\n9i3IW34bqugWr2juUZXAycWzu2y6/cJvbx5xvJiWvOJQ5Rw2U5WLZiLEbI8w\r\ntPHq4zpLSSkVfTdnG49UUbKDddrvXW20sLr9AYAfVpGLSh/Hg23U1jRj2T5d\r\nQ0J2oBCkUmPJt6Q3vvnUpyk3sdek2jx6ap8CofHHJV1ZVNeB+U6IM+vqHIXp\r\nr2fzyDzd+Z8L/lz5adWCUts/h2wrwBUsCfUq8Jtl8yxrBb8159XOaMqbAjX9\r\nc136051vo1lkUx9JqkbQGYYIzSsSRhR5Cd45qaAYvbgmz4qQ3dZ2ok8fk1ed\r\n9w7nII1WuoGeAKorQ72SBLDJgeb8dU+7sg4=\r\n=Z4qF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.3.1.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/142c02397966cf0158c611acdc2b7e29/chakra-ui-system-2.3.1.tgz","_integrity":"sha512-pR8KYmqN6rQ+aZ8cT5IYfF7rVXEuh6ZWZgWIdgmt5NMseQ2DR9JlK0SRoHNFW1TnFD4Odq2T7Xh46MHiQZCm1g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.15.0","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.17.1","dependencies":{"@chakra-ui/utils":"2.0.11","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.9","@chakra-ui/react-utils":"2.0.8","@chakra-ui/theme-utils":"2.0.2","@chakra-ui/styled-system":"2.3.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.1.15"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.1_1667406937322_0.8518905895340314","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107161407":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221107161407","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221107161407","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"22b7fc35e41bb1c3f6d06fe4e0c155c681cc9594","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221107161407.tgz","fileCount":6,"integrity":"sha512-JHqXtABLD8DYulS28NzfkyFZMTDOy2JjjTPKtjFcs54wB3Sv9teobiCxGjWjGkFMqG02P+6AoR14On4hbEmf+g==","signatures":[{"sig":"MEUCIGv5YfB7lsVdJjoUS23ENjFw5QnQgxlNl0n+RyF494fAAiEA3ZmZfIYn3W36gFbcKEO9J5Jie37cMDbOYgcc6a/8oyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaS80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+AQ/9Fcz262S5y8YnZ6lQtGi1SzV/y6toZYT299gHj/LOziX9FCzW\r\n9TFGnMT83w4mQ0JUewrmBbjuBx+4YbUJrP0ZGkrcvxJ56BIw0nisrhbO/Xp4\r\nXaJZ14FAP4GQMvQ7uwvRpv+DEHl5Gz6JTyD8mDJLAqaUPb+D6lMrWAP4xpQh\r\nQazWqSco0ny45B9nhhG8IDR9XJmVm1oy19puQ4Y2uOvMzn/ZrazH1qc5/Xqt\r\n99p4JEyPUusmNyuSBYEc44RO7DRrjVyu1khH/NelBg9fj8P51x/zB4vh7lhE\r\nIqdOkO4oAURcWAMahtqgg4UdYmjz03IIqZcfoVzPrJIgm/AjSb9G9B5zEZV2\r\nvqiWwu0vYbJSji6OSc7FsNIW0EtdAHiAaAy7igIRSWum0Ra1cCXoO2AnUhTl\r\nzr+QnsMHMkjL+dwuOVgrdVkOOT4OlXuncnARjT2Cn54wLthcoSQbpVjHPtqd\r\naDhQ/cdsuX0S8aIJAOC4QxK5P3AMMsdTlhAWac98ZkIyT6UjliSWFThHXIKP\r\n3MQkCr36VSPIUovXrA+nKeFv/U3Fta7MmdyNpEBGmheTWHan9NjcBtmj6ijZ\r\nLMMfRr0g1KDU/B9yyAXsF/QwxEdC2zqoaa/biLlMusbfOQgFeYVZlisCNiKW\r\nKP7NXzNlnISAjOOkZ5BJVKcykVFZCYhAsGY=\r\n=B7Mh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221107161407.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b57c620a08f3ed0e4d87247e475f2e35/chakra-ui-system-0.0.0-dev-20221107161407.tgz","_integrity":"sha512-JHqXtABLD8DYulS28NzfkyFZMTDOy2JjjTPKtjFcs54wB3Sv9teobiCxGjWjGkFMqG02P+6AoR14On4hbEmf+g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221107161407","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221107161407","@chakra-ui/react-utils":"0.0.0-dev-20221107161407","@chakra-ui/theme-utils":"0.0.0-dev-20221107161407","@chakra-ui/styled-system":"0.0.0-dev-20221107161407"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221107161407"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221107161407_1667837748045_0.3011111598925227","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107181117":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221107181117","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221107181117","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1144e6d1bffd0fa40115fbbbe781c52b8c52e153","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221107181117.tgz","fileCount":6,"integrity":"sha512-JWXKIYCTPrmPaTFO81drm4toLYigLhcxbRjxuom4TM2pHlOsjbT3GkhOcniL8pFxlTgsCDmk2ZDIGMGGu59HSA==","signatures":[{"sig":"MEUCIBwpn598jV69vnJLJt4X2GIf4TgZGRHYHR2F4WSaETJBAiEAv8Rk5bfdDkyT0IoMbGR4aDw0LeDjFkMQNn4zmPRTPFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaUqVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFxQ/8DPcHMbnu3FbXv7Z6kAF3OY0QKr8dS1X7v1Jeb/gwc2Qkcnn0\r\nGUADfhYtwNIuFqXIjPcWUNb7hXM209O8UpJ/YPNhveVpOwbJ3hrxzyHpHyAx\r\nUG80PMRg0YZXkEP1wbkL9hfvpiIsB7vr9yWuzCo/7TFgw96mLenFpLJ/dWkR\r\nI6siekwY/Nj0P+iNkBVdwtXqkCyhGUW+KyDRHQY+05H1FzPr+5+kgOsNTL+V\r\njMHwbLU48lc43Dg5ohK9jrBZNWwjkcn6FmPgCoClD87BWlPQ57NH7nREHnwV\r\n9ir08RzPQWCePsqWZ/KWPlhI1YuNVP40HZ4RsBR5y1eOtP81icZLkUzg6fsb\r\n+n9jptoyC7leUDkERHRBZdododVBDemEB2APUCf2KC7TzeqOE0sbGuyL7uZm\r\nEDyNW+vCOa9DfsO+YuJb4kwNWVSp1GfrrwMkMsf8JmpzhJx4owzyyTNm2FLY\r\negYIZyoqn8XAPM4fZX2trrBrQkN1BxpSXHEsU2USY3FdS1XKSIqgPN3CClwZ\r\nF7gQxb0lmS6+xtKRKbVjesKC+bWf3uwA56QBnFRNILgX4L+7GlbQXAJNxHHM\r\ndI9pMsTI9OajQdKQtFaznEsjm2lrRu6hZnl4A5vbLKqJ+jTG5e+21lfWKfPT\r\nyKIpExnwCHzTieMGQZ0toNAEqDHh04GroB0=\r\n=EKDG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221107181117.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d78716e4d8a154e4cc04002a878b226e/chakra-ui-system-0.0.0-dev-20221107181117.tgz","_integrity":"sha512-JWXKIYCTPrmPaTFO81drm4toLYigLhcxbRjxuom4TM2pHlOsjbT3GkhOcniL8pFxlTgsCDmk2ZDIGMGGu59HSA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221107181117","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221107181117","@chakra-ui/react-utils":"0.0.0-dev-20221107181117","@chakra-ui/theme-utils":"0.0.0-dev-20221107181117","@chakra-ui/styled-system":"0.0.0-dev-20221107181117"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221107181117"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221107181117_1667844757664_0.8706186454780747","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221107182607":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221107182607","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221107182607","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e2f8d9a25bde0eb4a451fddb10a006736fa17486","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221107182607.tgz","fileCount":6,"integrity":"sha512-uCaylgFnZuQvkfcwX12evOMFv6rsCH5I1EiQZwkb9rJ8BYBWLMPaRSx/xYODoG5K/FkyQLz8NzNxunK4RmrjWA==","signatures":[{"sig":"MEQCIGob94gwyDraHDQp3D21yMjPnkgSDQ3DTqHARVO5y+gPAiAXyFZi5nZjs9Q6QozRfTpWohI7oXWUtu64nab2vsefAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU4PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGNQ//bBSu5O2+ptGTfnJJKNd0rvhbfJPoEVMBVsOunH3MMKXruS9c\r\nypNy3tL1P6Lq1MxNnZlnSHDM2nIsrAsA3oI/ONbmSuawwVptOZfP+8BBYTPw\r\nkvpxI45schYd7Xsf+orl9MAn/aLsoxSKiwmOz4UpJ3igW794uU2+oVh34HH3\r\nUZgcgmZ+QI/6eUqmvd93AyArGQOYqO/LlNHzG747N8YPgEO53dyKuLQoSslV\r\nLKP7ldM/SkG7BW3Ud3zFyRogSc5cmZr1iU6P5UBJooYxugbOOiPZt7ZtXYxQ\r\nTpXgrNDQRACXJiWLiasbPu6FTQKZfJMzcmvVcYG3TACjQObfGNyJO6BsLCka\r\nF52D5TDu6M6OVsHq6fTaz9A8jjM22KtA0BrYVUkwnIXy9uqk73AIStps6+DJ\r\nLR7jt8y3DYwiE47UueIL3xzojckpPHz0iY8+E4wU5KV59tAyorws/OrJug7p\r\nMDdswKssedPUl3LHDl84RVY+59NBX7mxejvsb2ovjAQ+F9MHbGOQPKhS8MqX\r\nTiacKvvW/43UxeFiPJPE/od1UeilWsaeLJEbsXwErQ9dxW7GRpuHjseaT5ed\r\njDYAS1R413+vRja9dsIGmwZjrIJAF5MqYI3+AModNxbEMGpSIeBVjreWfCi/\r\nYE3eA7JGmv+MBB41nCbnwswCu91fajfxkik=\r\n=hTlF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221107182607.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6af93d72f10c2c39074a447a85b0e2f8/chakra-ui-system-0.0.0-dev-20221107182607.tgz","_integrity":"sha512-uCaylgFnZuQvkfcwX12evOMFv6rsCH5I1EiQZwkb9rJ8BYBWLMPaRSx/xYODoG5K/FkyQLz8NzNxunK4RmrjWA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221107182607","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221107182607","@chakra-ui/react-utils":"0.0.0-dev-20221107182607","@chakra-ui/theme-utils":"0.0.0-dev-20221107182607","@chakra-ui/styled-system":"0.0.0-dev-20221107182607"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221107182607"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221107182607_1667845647686_0.8452782955648528","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108071844":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221108071844","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221108071844","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7ecc5e9a294d22027552f4749ee7ab0d2ef44fd0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221108071844.tgz","fileCount":6,"integrity":"sha512-AEpXptiuCQW7Ube3xHDY9JtSaUMqzYH6YdzrKjWNPG2Oc226QF27m5hlz9Cx/vHSEB6PQrs4XWlE1kb9aCREKQ==","signatures":[{"sig":"MEQCICo0gdDw58QUWS8DnmrUJDEEX0mDTE/gsgS8N8nxvPBkAiAzyFn+DaR16OBddqv37QrdIQgLBnG+Hu2uGtCRTOwIJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagMhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGvg//UA1roYB76jUEWKpkS2l5HeLQz1mYBEphhzU3ja5hSRAsNveo\r\nD7zzbUiXox042DDfaGz3ghPwtGTIbxHdqDv65tsFFBaie5fMVdMEDxz7LswU\r\ndsWgk1kkIlCWKkiJRTGz3BpjXZOio2mywZPLzh6ry2WfRebwCB781uYvhY5e\r\nJlG9F17LPpp0q9rjf1ggGLxhj9Zy2K5ncZAUlOSbmGS8zuWywP41f+yRhXac\r\nksqAEL2Pchcw8AkGgDqu7R0tI+5CjjnEouBf71q0v2PWZXeV9l36H7+/mCdA\r\nVi+51AA1DwVXQjNnqEBgGxERBts5KgYEdW4R3odUqSEEbF5+wQciXD8Es/kO\r\n1UWQ1KxwIlpAnz9TDLlNODif6YkdK+DRjSC/p4HTwRzP/b/JsuOtnWReV1lM\r\nY/E2DpnXw5fKDjEwGrvkVteYPlQGTesOb/R2GaHul+KvIm3nAhxf20vLDBgP\r\nOnIqPM8MJjOU8IOu5tVL2CJ87lDGPw1OWI/HTGBrqbuVUF2Yimt+UCvPw4sJ\r\ngdksktEsZwRPfwjGkA6AHugkRrW4LHcYo0thlHxqnoQHK2hlO6wpaJ/f2yLh\r\nvmf11JQ4D3B2I52csFnsF+ykk8OHD2EjYvLdkv/V5CDSAzGDHyn+hFpS5bLG\r\nznvq87sxn0dyEPP/yxAVmUjJP0flLvFuWUU=\r\n=xL0a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221108071844.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/980ff82348e95d4a02ae9de26755f01a/chakra-ui-system-0.0.0-dev-20221108071844.tgz","_integrity":"sha512-AEpXptiuCQW7Ube3xHDY9JtSaUMqzYH6YdzrKjWNPG2Oc226QF27m5hlz9Cx/vHSEB6PQrs4XWlE1kb9aCREKQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221108071844","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221108071844","@chakra-ui/react-utils":"0.0.0-dev-20221108071844","@chakra-ui/theme-utils":"0.0.0-dev-20221108071844","@chakra-ui/styled-system":"0.0.0-dev-20221108071844"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221108071844"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221108071844_1667892001516_0.04707439308827688","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108073543":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221108073543","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221108073543","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c9b084efd3a64919f9106c5adfcbc173e8ea88af","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221108073543.tgz","fileCount":6,"integrity":"sha512-bQNpNJ64rElIK5PVRaBPTKpgZCp9Nui96GaYLjqE+VMxdIJvXMAZFAMoEbZPCzUY+KhbAPpf5sT45Y1ZFXT7Vg==","signatures":[{"sig":"MEQCIGJhf+YLPyC4OVnf6xOzIz9GlCwSQ5yaBWI+5Omqix6LAiAp1DN80y9l/BF/kItzH/pmLK4pNNjGbhiTKIUeen1sjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagcnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcOw//XOQJpuxY6Q2gL6awb+henuzN1G/Uimy/+Md/zG956+7xj7UO\r\n3ODNYd1k6WYHL6Ug2BADYTd63OFOBS+zjIRs+cL249TqGqRQ4MI8cLLd3Z00\r\nuzN7rEFWADe6XacXqSXA74e7zst8vjsOSYAsr3jrohqhk6mLYj7xhtISc59v\r\nuKfI5Bnyvl74HsBpRQJ14ZcuwuBqbYZ6RLoDAoqI27oqfD4D/2ydEWYeLtyU\r\n/yDC6KqEtdmkpBLzTVU1uXIQ981EfKJGtifnBEpKwAA52adSGiq75BmOeIKC\r\n7U5SROfTqsNXJf7avjRNpnycq17hYRPdv0JaprLiNq1NDjwEHSszd5J2zpRg\r\nhqnhtqLW7d65D/WOnR4K9van3vcDnl11fqur3BqeYa7JdvGaK3VrFax8hRSc\r\nST/Fd+a+7lRbipBDohcV0ljn8yvbU108QRTW5OBq2ELpu3Qhg3rq/OIe5/zo\r\n6GLjOruyDq2whZRpEhNnQrvXVWDoWRoSVAI0pHd493ed2wPzWuqEyaChxzC8\r\n4oI3rHYevmeTAuFBg2kvxz1FHtwL/I3/Ij6c5GVAQL2+zudUyuA/G9EWnyvt\r\nKQ6vGV5D6peNbO9ZsnRhxZdTkp53nNpLNR96YLOmMm2J1SI3hqDain9JGbSI\r\nt+RJ0MDzBn9hUFukeLlPXfDAzoM2vUSOWDU=\r\n=RDxv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221108073543.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ddb68ba5d912e7d240fff07653008f2e/chakra-ui-system-0.0.0-dev-20221108073543.tgz","_integrity":"sha512-bQNpNJ64rElIK5PVRaBPTKpgZCp9Nui96GaYLjqE+VMxdIJvXMAZFAMoEbZPCzUY+KhbAPpf5sT45Y1ZFXT7Vg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221108073543","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221108073543","@chakra-ui/react-utils":"0.0.0-dev-20221108073543","@chakra-ui/theme-utils":"0.0.0-dev-20221108073543","@chakra-ui/styled-system":"0.0.0-dev-20221108073543"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221108073543"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221108073543_1667893031196_0.718644541801496","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108075029":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221108075029","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221108075029","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7728cc30d08202363134623a31434c842b72dda5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221108075029.tgz","fileCount":6,"integrity":"sha512-Te4jrwio7DyR9PzoCcO3I2nW5xeeMjpz2813uVeeWSQBEeBxbtaY1NkXcqixULMaUET+C8ijP0vS4r+7IH7H4Q==","signatures":[{"sig":"MEYCIQCgupTNqpGpWMJ0HiKrPy+8zyMSG16M64b+3UhA2bAliwIhAOJqAzXEv0B9ySoGXBWgMO7kvZRpOeUkdZsBxwupfd08","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjagqkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEKA/+LAiif+/GhEZCB/MSFRKCqdn1wH8zIqw8fnnccS4ZKe25L1sZ\r\nPM/0vRTLgZ3crjZh09x2XhVj9NBjVDJCIueDcZdD3f6kMmrDEMxV22Zi8TOm\r\nfnGqrM7QkPXEjSA5IQOpiw7oWSL8O0WlPKpXaHAT9VMv7++ZMXGrclD0O8z/\r\nJePTiEdmqowyuoNpsxVHF8lpwqNmsgyD+AY7BBJwxT7l1iOcgiK1r4cAHtCn\r\nQ3s2pUVgWCXyQewvEHkRfCUXQVDlMbg5YD9E2yxby4Qka5v7kGYegGmsRNSB\r\nkMuj2YSbVIXQdR+ItgL9xNU7oe2hvukVQCyc0GOxqDj5aZdJvAkZYTgZZgFy\r\ni4t9JutYjLeoPNrbce1b7GNn17prmgIQXWB6fqyfN5r+fv3AvreCc1DFgdy2\r\nFf2qVhl0CtvnpalFijPmQJewlh4v6yTaufJ4qlANkvomfq0vku14N2217Ivw\r\nvqjWbcTcJrfD7eCxZQifYgvBYjLgEKhDptGyJSTyGAa4KwlDzUD+7JpysKR0\r\nr1b9aAtHzKKLrzu+e4oPcVUW72aMlrEOylDlr5EUrVMZqBBHNkf01spIotna\r\neOab4I3an5Fef5h9cpAWimGsuE9qKG/H0u4uxCLCJsd/rRmEaQ1elLKYww+N\r\nXZib8gDpYuIB2EXKVgySpBQV6N74koFMOvE=\r\n=nPEg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221108075029.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/975587613cf44e77a35810eb64b8faf6/chakra-ui-system-0.0.0-dev-20221108075029.tgz","_integrity":"sha512-Te4jrwio7DyR9PzoCcO3I2nW5xeeMjpz2813uVeeWSQBEeBxbtaY1NkXcqixULMaUET+C8ijP0vS4r+7IH7H4Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221108075029","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221108075029","@chakra-ui/react-utils":"0.0.0-dev-20221108075029","@chakra-ui/theme-utils":"0.0.0-dev-20221108075029","@chakra-ui/styled-system":"0.0.0-dev-20221108075029"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221108075029"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221108075029_1667893924014_0.3634934544045767","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108083411":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221108083411","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221108083411","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"74edbd43e876420a78e6c1e2219e2da8789e5a42","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221108083411.tgz","fileCount":6,"integrity":"sha512-OTPavG+HlBmsT0dHsZf72Nv3bQhL3mNYJ2xOYe57fB1GtI1I1plYAliFV/U9qebqI8CVAEvrIo3fJJKMg53SuQ==","signatures":[{"sig":"MEQCIH4s2k0lYc1oRYW1pjkrvoSMG23IgKGxPCR9qLZms9wcAiAy0ber7KxUh7KOW6l9I8OumLPgxYDjh6Ai/TU/kmWV1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahTJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBUw//T6YNNFte+eKv3xCFRbhbIh67i/lIoGdKr2iSn9t1dfk2PPdf\r\nxA29BwZkAj+KWCamqWi2qg6Y8OS4gKCACpvJRVttbJcTAg+vYMaDhOCr4m8y\r\nEQxaWOXuYZTFo1QxkbYT6EjIqJUpA+jxPMB0OwWycQS2SlLK42Sg2uBfW5nb\r\nikgusiIyIa4pryNF8C4+0EMvJ4DHrCw1JFUAalrpDpo5EnFZYfRT64irv0mL\r\nC5RyEUUCvasz1SkR3MnmXIcJMveIzyeVj39dlB2BhKToTfg337p3KMWNa+C5\r\nOhMupHLqZRcsnZyDYAPYhMTICDqsh204y8ZBN37Gj6P4ZL+j/W3uUxeQN4pN\r\n+g3ljpf4kjcMadlywa8DqH5os8TxjlRmiTExhxMhTSuJkRt31JEK0XTd5zBM\r\ndJwSHHxlhChbvB0XVV1HBPaM8eLfnWm7yraOU/6qOM0qZOrK8O75fgESAepk\r\n9dF7FkSh++D9KzSNKDVSE3W6tT3hKZ10rXAd5NBei4pB1y7YcEIXXVlw5OaQ\r\nOBGwin2gPrHS8kpo7bJTy+N0dDVUiPEx3IJyfS3k4/MG7JY76pDK6qqtj5tt\r\ntlhpS8NFC8KKCyyEtbar2hABwKS8fM2n1GHwMwL+x9ZaC/c3IyB6B0kXg1hY\r\nvuizw2wyoZQOKw9X5oVZTaXqqUed4Up3EVA=\r\n=XuDQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221108083411.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f650cbb0ab89fc488364e6730cab3c1b/chakra-ui-system-0.0.0-dev-20221108083411.tgz","_integrity":"sha512-OTPavG+HlBmsT0dHsZf72Nv3bQhL3mNYJ2xOYe57fB1GtI1I1plYAliFV/U9qebqI8CVAEvrIo3fJJKMg53SuQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221108083411","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221108083411","@chakra-ui/react-utils":"0.0.0-dev-20221108083411","@chakra-ui/theme-utils":"0.0.0-dev-20221108083411","@chakra-ui/styled-system":"0.0.0-dev-20221108083411"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221108083411"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221108083411_1667896520912_0.38173710000222205","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108090938":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221108090938","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221108090938","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d88a5b241c088e30edd798fc6098b94526c50e54","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221108090938.tgz","fileCount":6,"integrity":"sha512-oFN6FmucLzUmsMnd7sPqe+vFfxpJ4YH7rVUBnOrk5K0tqF/vO4/t+IU/lqFLFxVVzsqC9y69gDV5cpq4CiPbjQ==","signatures":[{"sig":"MEQCIC6UkrQUrHQXtOJZqdzqHFDfaabFLXQu7D/IarDfwP3jAiAC3g1QXfebF45gaEj0tYcTo0pnrCeXX/5Khk0UmwTGgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjah0tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBpA/9EhiLHkLuuhWxZrWbquYSWUnhxcMx6r+V5oCU17f4IIwUzVhf\r\nCpv2ZgbcCC2RDiKSJErp/6GZk35E29z0IH6MbbBO18surSpXWkhZNCVc2UYe\r\nLRD2rud4mvlO6gL4+lbI1Diar89i0W8B7e1dHa5zVE25h96n+aT5LfBGqiwo\r\ncT/IDOpFLtMXHQBMB7sZ9tKLok88mh8yHojbATwvAWCyPz/WcC8NwByzagTR\r\nhSHb6HgY/W1+3oWZG2BMgSpOO05+SHqMO8RifDXa4RSybjutEFltmCpOu5wG\r\nT+3kU5+lymf7/31cbwsufkl6+8Rp/2Vw+HjbFRgCRMBYTWxlsC55TTC4pTaB\r\nfqs9QZTvdUYyfZaHZPZVjCmUwJKrRKKnJvlUiI10VP86VFPcDN1McIsZrmjk\r\nL1GendhOGA7sfcf0wi4iGbCOyvyM1pTweTlJFu2n5dgqk0Yv5EPOatVJ/RjJ\r\nbYiwEA8hq6jrm8Vl0tVzd1uowkGXITD4Ly4ZcdnLlVS9IMC4G5HzVuevTJZS\r\nTJs7981Hi6cvo52FGzQSg1CZe9s4GrROIwyorFALsHx+X5WVFZnfQijxQzJu\r\nU0yF1ZEOfa0MJ0LJak4JO+NMCUaYrKoMHTR1Oz68XTJX/4paeFzJwnCuwS67\r\n7NsaKyLbBBaNSvVCTGpwibb+PJXGrndmr10=\r\n=fd4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221108090938.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1fe2aff7d0b42d5b71e41c42a7a086f2/chakra-ui-system-0.0.0-dev-20221108090938.tgz","_integrity":"sha512-oFN6FmucLzUmsMnd7sPqe+vFfxpJ4YH7rVUBnOrk5K0tqF/vO4/t+IU/lqFLFxVVzsqC9y69gDV5cpq4CiPbjQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221108090938","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221108090938","@chakra-ui/react-utils":"0.0.0-dev-20221108090938","@chakra-ui/theme-utils":"0.0.0-dev-20221108090938","@chakra-ui/styled-system":"0.0.0-dev-20221108090938"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221108090938"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221108090938_1667898668779_0.7772033778477345","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108093520":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221108093520","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221108093520","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"227d2a44795c90d102a7ec12d1d8c445d1d44010","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221108093520.tgz","fileCount":6,"integrity":"sha512-qhLIject3KUc7XHyQcVRCRxjTuq7tY3bCbIZMtzU9mtEF/0vcpAvFDZsygnAArO2Sfqzkii2CYvDla08uy49sA==","signatures":[{"sig":"MEUCIQD3XPimR22H9nHZGs1XaR1YL4cdfhGJKBqWNxKUsnb+VQIgXEMLHH+yS87xNXAKObrJ0XCPByH/tT2lYpk4o9l+Dhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaiM+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlrg//YxXHKlwSphn6aFy9u4dnDyAG+MdvzD+sVItDe08spTkC5Qno\r\nt0o0LR5/aGYBWRgnhxbYDSLHaMJsl7yBys7eCt2jxmWXfFJrHdHpgm9ULR1n\r\nt05qvRdmyJtKANwjajOpRJlgXGyTPs2Q7Qz7CjUk3Mu8mBYVIi2DVfTUEfVc\r\nkz/MSDY5OZTLnnHGLvvrwvvKXFGDze1jWFz+oxXGheSNlD6JMc0e+xokmDX7\r\n30y5eMZzhJsiBvr6au8zwDrQmBdOzGfnxTXdV8iNhwIl1kXKX3JWqCDSXUBe\r\n3MxEF+NNRNDWjEAg/6r6WKO+zMlvAN0tGtcQ8ZCrQqR4gK4eE+zGRnNus/NN\r\n8lG5BT0i+edQPCtDf6nBB9dNj8np+r9YqPNFLolO5vrRqCjbsfwc4OkPVu3W\r\nK2F5tjb7/DyBSZd/CRAAwTtWu2yHEvGyCfL69ete384P3nnHwDKwZa5djmT0\r\njWWSMwDSOM+yldKaEpwAG/O5xY1O/3+rSNzdnZj7eAEDNXGnRuPquJQZfDR5\r\nHYpDz9Zwek5u7lN7JKp+HtJR9ZS7cV+tVx0qNITFYzUUbvgvPDCuSbCBATjP\r\nnAwcYeP02vPbeDW3nUPdHYCMOjysyfAwLGsB/1GE3GGrHn45Vz8h4Tw+O8ST\r\nQKHhXv6ldPoTDDLKDctN+8ukkBEB5O6zQ9s=\r\n=Z1o7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221108093520.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/00625bfda34b7037d37f8d2c8347a26a/chakra-ui-system-0.0.0-dev-20221108093520.tgz","_integrity":"sha512-qhLIject3KUc7XHyQcVRCRxjTuq7tY3bCbIZMtzU9mtEF/0vcpAvFDZsygnAArO2Sfqzkii2CYvDla08uy49sA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221108093520","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221108093520","@chakra-ui/react-utils":"0.0.0-dev-20221108093520","@chakra-ui/theme-utils":"0.0.0-dev-20221108093520","@chakra-ui/styled-system":"0.0.0-dev-20221108093520"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221108093520"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221108093520_1667900222324_0.5548101320977403","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108100218":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221108100218","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221108100218","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a8345b4006026868cc360ea62f0c3e3ca4675be8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221108100218.tgz","fileCount":6,"integrity":"sha512-CKTqcoZNwJC4RSmKCtE/7tnCTzN/alpRTiMojQOlXDamxAL0rE0X2mVAOlaDPlWv/OY7CqSQoXYn6Rrniy8PWw==","signatures":[{"sig":"MEYCIQCQwVA03B+BoNnmXefOiaeWw7e9G7y33rg2ND7SISPEiwIhANNITMakTHmyIe+J+EVkynQaVZJ/4fAfo9f+e2HjjSo9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaimRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyVw/6A/4knUw27fm+YzHdbH7W2Uuln8uw8SOj8EcwSiuKDpG7O+bM\r\n2JzFck2Y1VbpWFw+ERPSDhaTZOmptlrJ7RqD8+Yh6yuKGyZ9SEsvQRzMVgUo\r\ne1OcTIWf+mXNBFjv8PofS0SRVTiVTnye2mbmP5z8EbpWOokGEvtYlOZD0+Hm\r\nWbna94fz2xxSIFGxVSxzgN55Od6VnMQmHhtZyCoLroDQ5hUjRMaK+E3m+sBb\r\n5M56/QBflGHd2b+p7ggG2JsNw2xAQbD5P5DmPInw8Z2hAT6k1dfZjzIlQo6A\r\nrCYD7tIZnaLg+m0kyK6nlkHxuM07BK1T6+JWMNobq872Wvy+BgGLlajNMJTT\r\nwu44po+0uIxresTYMf5leO9YgCqIM18JSCQvD+9YgR8e9E3D19ogAH8EIHPY\r\n0jFR2FDLvkOw9AedMcbZjmJgJhIdQbrGCgCB/JsgoYmo+W+DT69dEATVTDhV\r\nyTevxAPsVqepmzxys8xLAUKYtovz9kCRWcKLdVmKdYP+OX7YNkZp8A4fOofj\r\n3bQXvTTvLoZI5WechM2Swg2z1pesDktI7vNTFs5MKw66pdtd3AeEUgdE/cNX\r\nABJZj/5/22KbSVGjdantlRo4zlwYN6DQ91HuvW3iFoKEuJtnIF000Mh+mssZ\r\nflo1RL1KiKLnEWWmfg6KPDIoY2VsvlgX8Co=\r\n=2xzK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221108100218.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/48b7af5bb245bd6962a50920a3ff1517/chakra-ui-system-0.0.0-dev-20221108100218.tgz","_integrity":"sha512-CKTqcoZNwJC4RSmKCtE/7tnCTzN/alpRTiMojQOlXDamxAL0rE0X2mVAOlaDPlWv/OY7CqSQoXYn6Rrniy8PWw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221108100218","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221108100218","@chakra-ui/react-utils":"0.0.0-dev-20221108100218","@chakra-ui/theme-utils":"0.0.0-dev-20221108100218","@chakra-ui/styled-system":"0.0.0-dev-20221108100218"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221108100218"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221108100218_1667901841027_0.9404516041893725","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221108124603":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221108124603","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221108124603","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a949f5a3e15d866ad5af990534231c3db830ff1d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221108124603.tgz","fileCount":6,"integrity":"sha512-NhHnt6ue/3E0WemWw8DpQyA01AiTJI/kg3QPAv2FDrkYko/AI86h0FZn0/DeMUwbSyuUykmQIsJ0mJ4wC/FjlA==","signatures":[{"sig":"MEQCIGcSD6hycd4bQGgvIvGIqBZnCit8SwDmhcxgbOkaCYOaAiAvvvglOK44GexYVijPUgiM4fIglP+emm4cKwT5gsSNaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjak/UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWoA/+Pk6Xw2cbFNMMtpcjLqNvCc0svgXW1w3anbRURrvHFI5jZQtO\r\nsei8wYKXeC2MdqTFNz8AjoBYgrst9DPnHNxZc7pf5c/bppQ8Pe5xaHBI9ce6\r\nJl1iKA8FK8vxdY7RK7F9//Ne5ry9zkJkC3tlq2p+GrEhAp2022uwskrJmyZl\r\nkTX398440tC81RVHg64rW8Jg3OG2BUZh0eKzYF8XsgxUV8i+SI0NfwKzvY+w\r\nbYtMtj1upeKKB9CmBVX9UDgRFgrZF4Ar8GNP41nlPC54rltguP6Yj++o+tbP\r\nn2KoagN+FHgNOd/EWOnziS/m+z/6IO136X9MCgRUpp+EfCEkoAUna/53E3/A\r\nZmZ96Clvfw1fpVYYMPHXtqqsSFUS69hs+gcaBQHmeoTqcNtiohOmyZl++Nuo\r\n3lnftvkzM5vNCm/zJE3X3zBBsU8dtFqf0wNKiDoKiIxb0mWIdUF5y4QyPbD1\r\n9ZNHvxdH444wnI4TuB/scVUKkjwyaNG10hcXPKUCu94ffUizjeeCbey8ZP/w\r\n6tjvOyZngZFcOWGInDeCuxasZsDFlizDSp8W6yF7n4YQ4X3mD084yy0Uvar1\r\nX3RAg+IqATM+/wnCEYyinDDXQccCYhoj/RpxnAqsQZ7orQT7WcG/McuXkfhF\r\nF5apP/CEVqFKq4FA7Bp59jPyVz26XO4OK/s=\r\n=vZIW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221108124603.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/75c90fffc3c6700bc0ebce9f54b0c3a4/chakra-ui-system-0.0.0-dev-20221108124603.tgz","_integrity":"sha512-NhHnt6ue/3E0WemWw8DpQyA01AiTJI/kg3QPAv2FDrkYko/AI86h0FZn0/DeMUwbSyuUykmQIsJ0mJ4wC/FjlA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221108124603","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221108124603","@chakra-ui/react-utils":"0.0.0-dev-20221108124603","@chakra-ui/theme-utils":"0.0.0-dev-20221108124603","@chakra-ui/styled-system":"0.0.0-dev-20221108124603"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221108124603"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221108124603_1667911636231_0.17166308730491875","host":"s3://npm-registry-packages"}},"2.3.2":{"name":"@chakra-ui/system","version":"2.3.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3c1245dd866712a0dadec18319bc47569627314d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.2.tgz","fileCount":6,"integrity":"sha512-hDWDniCUHinKj34ZPAgWmrV+DEnbpwUZjO1EE1WNfZC3fshFPv3EbHShzY4/MthptSI6t5QGxyp2bFABQ54sqQ==","signatures":[{"sig":"MEUCIQC8AnY1MQDhxsnKnFZzFI7J6GgjvD9zEfv9YSGh9fqpDQIgEmn0w2/9sUp/v//o3RARn5c9LN0K6wKYbVIo9TMHiLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjciw3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquSA/9H0pmSHGqcab3ZjS1RJzB/1m+GmyBzvgibJ9haQEQn/vvUIyg\r\nDXp8232cy2HHmi7bfNqCW5EX1Iq6aDGG0oEJWN0yC2j4b1dzP+fRZF7O4oFV\r\n0zmRBT8JptZZ45CqZD9lwaixfyjxrJH1Ul4YdwblL4hWgS36M0myViVxsaS5\r\nGiqGJW9xr+ZuPGImAq76ArxtPMvnaTX/VXYnWkDgCjoCuvW00uqnDbj8VAey\r\niGt4X3awquLJP6PvIhz+zatcOQoPMEcgKx1rik2C3Q8Lum4B8wRzi26Xuuwa\r\nAbpBWUnEvWcnAr30+IGtqs1vlBYtzQ6Oz1ZjmJ7P2elvneeRaNwEW2qbxNiI\r\nf6fPUjJFae3aerHCVNhSEAO2axXgvGLjqv8nSeMazv41tTTQ3XGbiTAjckT+\r\n384C1QwcQpVpZQhAzOSRcvD7aGjl2xXNCMnHsCYWyWfRwb+3M0FkvcI/O+l3\r\nBhH+n8AtQjp8eyHJ3yDEwgYPZU4WvFTNqvV66jV4ib2K2sEck3YpfMhZ4mEZ\r\nIQl+lrTSxzHmwXi3CfiPFd67Zf6NMQ9CjQKq2zw+dPNK+BMCK4T11H+wBXmH\r\nzMyEEKZZi6S4XIMBj+25kBy8+fZCJpdTywQgbZAyP69tzIu3FnjpV7ezY32n\r\nA6jDzk4pKwehyM6OqSubnAmr1Jf/bRgGX8M=\r\n=CiL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.3.2.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b8d0cf60f4084fc1ef3a93ce854d55f1/chakra-ui-system-2.3.2.tgz","_integrity":"sha512-hDWDniCUHinKj34ZPAgWmrV+DEnbpwUZjO1EE1WNfZC3fshFPv3EbHShzY4/MthptSI6t5QGxyp2bFABQ54sqQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"2.0.3","@chakra-ui/styled-system":"2.3.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.0"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.2_1668426807357_0.005794106730562465","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221114152429":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221114152429","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221114152429","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"19fdb45a335762752639503ccec87fbfa64f8a42","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221114152429.tgz","fileCount":6,"integrity":"sha512-/Y2Sj6i1roHW7QsUPMU2aYpaBp423HJD5knILDqWy4VKdvOTq6CeuZDsaQF0w5TccAfiwuD+XnhgCnYIzRpGLg==","signatures":[{"sig":"MEUCIQDxzb9YPhOWkKuxbmxaV5zqAdvXsclAOk8LjUgiw1TpggIgLLs+JWJ8DyPPuS0XWvk3qPK8DccPQVBL0/NVmmARqps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcl3VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN8xAAmh0n5/gfGw+AcHw6LDG3J6zgZH8AjfgtKquyrVqlSfo2K5Bm\r\nICECRyuHfHksdIECnWoslAVZjLDaixO+yEq35ghdxIwsjQfdmp5u9wtgJDOX\r\n8NcStv9pf5USy9TcN0JqEemo8TzJXG18f7zwrNHOsHmtM/4xgiPZJidKVtb5\r\n9s1Sb+1VoeiJWbKkRYcKthkllhyv36vGVhHz2JAj/irL0gQQWC610AktT9kX\r\nWp4LZ4o3VCr39ZjOUKYq+ngq8Ev6GbfGFnWYQI1OLVxfakIEyulUqFiG/qvP\r\nQMUVKr5I7ic3bXifYOSYm1ctqRjneg7zma2+fs3Gxt87aIXD1jYQSG0yC+N7\r\nDpWNv2hDdgKr2rSr5Tpd3FKwcAU4ROUQxPYNwK21kt1A0p1kpt55jrrNSuw7\r\nID3urvdgmm+2uCE1etZDnIcuVxXQMJruyfS4/fak7VQaHQcNlRbrq46IbpjG\r\nUzZCfdm4nwkKG40yN0QoLP2v+FPFvgPLVouqIgLabPRu0/8pw8nmevuqP6ih\r\nVhZmGDlfq319n1ZKocCZrr2zUhgo+F0AlNAz7e1PxvsCJR09JBUoZv726QbS\r\n+gzKeCjCCVzzUcOESQHCth0DMXoxJZhviale9GrwnielF2f0dZtKLEtStKV8\r\njLORP4iswXmybolk3aqZFFsqsjpdHcnI3no=\r\n=QAA8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221114152429.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6c0c099b0fba2758050f01da1274c225/chakra-ui-system-0.0.0-dev-20221114152429.tgz","_integrity":"sha512-/Y2Sj6i1roHW7QsUPMU2aYpaBp423HJD5knILDqWy4VKdvOTq6CeuZDsaQF0w5TccAfiwuD+XnhgCnYIzRpGLg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221114152429","@chakra-ui/styled-system":"2.3.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221114152429"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221114152429_1668439509074_0.49688184011128733","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221114161632":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221114161632","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221114161632","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e09b972799a8fa6529c4bf97f016be8aa548617f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221114161632.tgz","fileCount":6,"integrity":"sha512-/60RJ4HFlTeLVlnnZT7fxl9wemcO5SLFj0NHl7tv1xo4i74vPzXRQu433L/DWhfGu3+gwYypyc42O98S2N3uiQ==","signatures":[{"sig":"MEQCIElcOSS3MD1cgXVqrJ/Ok36KALpDgVyJ3Bv1oQAou+PCAiBv0kUr9OD1ankhAVaggXjbgBvNveNb1Dp1kkSaXKR48A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmoDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCLw/+LUrM3BbL/QN1Li77he7qb7dqJmIkfR2al1momvjwhxrwrBHE\r\nfp4slYejl15qN5IcvTvxYWskJRpDAA2TTKgAqxflP9X7yJyIvmy2A5P2TNSg\r\nyFx1sxGPAi99CvVqCWTJTA7Yon25iNnn4HqSjOHfwtk2+NCnlGLsd7xf3di4\r\nBokx6y0m333chvJz4NS/3XBdtin0x043Hq3Bsow137oLNyJL62jl3+nQ7pHT\r\nkd3F7D4p0Ajjf4ae1wnHh7nuU+YmydsI+ftQ4dvizmICIk8ZJYJP1btNHXZs\r\nBPkPfFMVVx6xLX/03ucUbMuzdIxJHuZgQgNM2R1o0L7J3+OwX8lqLLb6WOZ9\r\nRs4DgscrJv7H14u3uRFYJjVr9ed3TBdEg5z9BJ/+r+Etll7ylrRIWUGase2k\r\npgKsS2mZjZ6nnISXPLGlxDFYi9BU8des7sYVJwzlKUNSiADX4FE8SX9GnrOo\r\nqM4rryQgbTcZnAuN4R69qeXuSgpS7d45IswllOpX27+o/6YCEugBszKpRg+W\r\njllfyx7+SuKrLWHCiBVByXSCNdv/SBhzDNTu/XIuCEt92gufSMSYYJy2h/V1\r\nywgP/VmrJOVQOTq0kpEeuFBCPuq0heE9Htu7msqNEa/DnWOsZeZEk5x1qhY2\r\no1zNTQ1Nh8SCFB+ooJyHLMVwLXxzUPGvgQ8=\r\n=aI/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221114161632.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/614c1aea03c070af0f318dae54d14cef/chakra-ui-system-0.0.0-dev-20221114161632.tgz","_integrity":"sha512-/60RJ4HFlTeLVlnnZT7fxl9wemcO5SLFj0NHl7tv1xo4i74vPzXRQu433L/DWhfGu3+gwYypyc42O98S2N3uiQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221114161632","@chakra-ui/styled-system":"2.3.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221114161632"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221114161632_1668442627572_0.7647710658925657","host":"s3://npm-registry-packages"}},"2.3.3":{"name":"@chakra-ui/system","version":"2.3.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1557f573a3394e375411631b0836f0e79c9f68f9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.3.tgz","fileCount":6,"integrity":"sha512-nOEXC08d4PiK/4QwSV4tnci2SoWjDHEVSveWW9qoRRr1iZUbQffpwYyJY4pBpPJE7CsA2w3GXK7NdMFRwPtamQ==","signatures":[{"sig":"MEQCIFaIuIfN2eYuN++jjsxBHkTpUm8DT+uEHQvDYY01dOXWAiBjCzcJOvjf+Vp+UMWvz6giEgq8JuyhQ6z4i0bx7WqhuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnMiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiPA//R1MwHYUJzpFg1HXo8NUUiYRxVC2yzrg6ItguKaw4XsHXUJac\r\nmuKn0iuGzph9Wsx4Jz9/jwgwKVDils6NakjWU9WpErZGLG/gTHII9tZBsVYn\r\nftN7UPBQye0LGO1AhBMqW9I4GbhlSpNM+v+n+oy5xujPtg4gLzoHgCoUDmo+\r\n3zkvbeuHGJEbwRDjD+F3VuNkgQWUrE4Yv0YaZO/HQNTvmdic4WcPJEyK719N\r\n2QY4YtCXnFTRMa96Q8GlNUm3SkevA3lWd58Pp/1Uo+LjPbSUrMDaLYmLGF7r\r\nF3Kzhef6oOkGJ5u0GZOPIldrtb6+etj7vistnDNJfqiMhtAXPnoTJQAc+sni\r\nsV9OoX9cBr9ksvDYJd9Q3vakh09D6aAnY8IWiF/rExBvwvFoTu/7COGIVHcX\r\nX1sIm0aV9HvSxCPv0PMlNT1QMThixo2bBbQKHHehSSLGroJSyTkWsRhgmrcn\r\n8ufJaDZ5wE02YSySZs8aPsoq7jwsf0duj0xBpCfZ5zJpE6XzzbRxxoLOSkYE\r\n42VJrivs6UrD87irb7w3gRsNCWoduRY3AH14bMETCVGScRVhLDFThQKBOCO/\r\n9Vuuo5N+2fFa0Lpdtln/u5fcYIUiQV2ugFnDiH6Aflw2pISAqPsmHtzsE/qm\r\nPaifnDZ/SvPJLzICToxT0yPGRV2X5pNE+uA=\r\n=qGzM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.3.3.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ae38085f70d8853854fa74d9398a88ea/chakra-ui-system-2.3.3.tgz","_integrity":"sha512-nOEXC08d4PiK/4QwSV4tnci2SoWjDHEVSveWW9qoRRr1iZUbQffpwYyJY4pBpPJE7CsA2w3GXK7NdMFRwPtamQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"2.0.4","@chakra-ui/styled-system":"2.3.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.3_1668444962215_0.7554071016404029","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221116103758":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221116103758","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221116103758","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"aaf6da1d63f6ba9055cbbbc663776d8e331d15c0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221116103758.tgz","fileCount":6,"integrity":"sha512-DnU6t+rF5Nm+NGlR8lptZt57VDHAz//uvtvreLBXX1heM4xRsLbH1mAzHpz9Euiofjx1e+OazXSV7QVEeP0BsQ==","signatures":[{"sig":"MEUCIAhVFJp60xz4dbueJi9xc0hhgcOJpbd+fs7ls1kosV/6AiEAgH/z+iQ7uUab/eBpFJTclWl2+HyfCBsFc+oKVWRxpyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdL3IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZXw/5AMH+qXKGACwC1Eb38/gHFJ+HpzJIsKjeXyEZGsQt4tdEpxYY\r\nBvdfRZwVSELasS+GVB4EUdQBGA/qoNdsTB9UvmINUQaYTo80omzPieBovGUe\r\nAAM5jdkgQFhenCnUNesZsG+VkUb830qQjUXYfFhDh+TVJRyWUjq5WEKC7Jgm\r\nFaBC8hmaddU1akkWl3qn9ri6wfXbKn4TTdLUC1mViDPVigJwg76C3AkrCbWj\r\n+iP5ngxPN86nLnNnlyi8Enr09aMO/Wu5uFHTZuFjrVQoasFfmgNd0vTbp/SD\r\nOrbd1j5+SLH+0e0OKKyx6VNelFeRc89uDcziR+cLyENgPxK/6+hrz9d7FivK\r\nPv6VLZN+6ZDggNxY1ILwnR3Tyv+Cp7f5vEcD12bBk7XExsbGCcMBy7slAAF0\r\nT31Isq2aTR+bu9tjedfhoyx/O+1SFClb7jTbno5/ZU7/eaLDyqS/TYJ0mrQX\r\n6qaBfsbvOmkZUlNBWLlybjDYtu+YYD7zNxz0QCVhhL76X5g1/QPIVo3bOtmF\r\ndqzvVVRUzbnu0ob1tKkqReoHXuLh8WYAPdJBVp0CEXkwboyUaPUR/ejgRWOP\r\n5hvOt/RyMancCWgWMT4GoBIjrMI5lJ1Y70IM57hkbFGJ7mw24rkpfsmFGksX\r\nc9nTjGBFCtuyuWAtM+DFK9zHTXSUPjaOWX4=\r\n=7ShA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221116103758.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2d5b8990e39559cb4c40cd10a859f704/chakra-ui-system-0.0.0-dev-20221116103758.tgz","_integrity":"sha512-DnU6t+rF5Nm+NGlR8lptZt57VDHAz//uvtvreLBXX1heM4xRsLbH1mAzHpz9Euiofjx1e+OazXSV7QVEeP0BsQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221116103758","@chakra-ui/styled-system":"2.3.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221116103758"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221116103758_1668595144555_0.7337966839688359","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221116105413":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221116105413","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221116105413","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5c4b04ef7640318716b9acb67454983dd77bf5b8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221116105413.tgz","fileCount":6,"integrity":"sha512-tOZW6S0Psfw6VpS/CDRRcE0/2vE8U78ZabxyH+Jzl3APnDJ4K6bl1dHuIh4P8brF8MammYTpX7SmNjHuOp+0Gg==","signatures":[{"sig":"MEUCIEtUtHqZ6rQOmzpIFGYQEnSz/h0gMNcQpuCq1WDat1aKAiEA1YXQnC2E5udUYgc3Glh6Exxctmw42RoKbME55tw/osQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdMGVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4cg//c6lMUr3VBabNHfXTI+NOaICmmb+q4Scysbm+oq6afuENXiGx\r\n9t3HhznStHRLcLUs61tGw4Adbptobt5Ba4ReJFX0tr4VFv3xKq2hgf/64k57\r\nHiqgPyVOlV+kITcZWGVRVwQ/TuyQCNIb2A8eziBZlC7zm/uNAgGJIv/10h9O\r\nzAM0sFEr6A0G1Q40xJqQZpEg8PjsZIbCnNSbIFOxY9MlId9u2b3+bDLAAlXJ\r\n7LZ8hTUMlw1u6xXfzS7JnUwt4DNRYntzW3NmmKs/35tdlczchAg+lJfFVLmi\r\nZdTIl3dJh4m/j6SXkM37y320RLN2Ql7biJuvvCHQuK4RG3FZHVvvL6AhqBAQ\r\nn93l4hXGiWCNc8xe0PRIj53x83Vpda0E0N67PxqHhQThtERlArYv9jvElq+v\r\nyM9QI3RohHd5ACTz+l/7Wn7DSI7ehzcA/tpDuomb2qS2NUjT5k+OQRw+xIFM\r\nXXy2QaE8L+/mbmH12wnEqVTgcitJtQOjEt7He1371Ar3DjvFENDAXEogwXKz\r\ny3RrGed4cbgveofNkRJbap5hjzC9uO0I15wcupLpx46cc1fZ+B2CKcBdyC2B\r\nwGtyKcmeiCJ+AL2krtHSGuejq4s+XO3jXUSaLw6sw4Gh6UtrpRVyTYL9m0An\r\njApCoLLGsETjIU5HeLg5e2x6ubrljtekU3k=\r\n=WuDK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221116105413.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/92bf9f778333219c9876aace4c715171/chakra-ui-system-0.0.0-dev-20221116105413.tgz","_integrity":"sha512-tOZW6S0Psfw6VpS/CDRRcE0/2vE8U78ZabxyH+Jzl3APnDJ4K6bl1dHuIh4P8brF8MammYTpX7SmNjHuOp+0Gg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221116105413","@chakra-ui/styled-system":"2.3.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221116105413"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221116105413_1668596117731_0.3968134720028973","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221117065458":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221117065458","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221117065458","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4d68f01a66f73aec0e875c95470868973765a3a2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221117065458.tgz","fileCount":6,"integrity":"sha512-KN25GCmYtSnIWf7EcbBGUDls9gKRmaqIijpT1ssGZZLctt3k9gvZ5eaePSc3/yNnk/XZrTznyWsoZlOFS+SaYA==","signatures":[{"sig":"MEUCIQCBBDsOOvLb93maqeuK1Ym1KYoHMZ/NLGv/Lt1jV4e8aQIgbV3UidL5XTmx22ZNcNt0yGygcHn+NfiwreK7Kj3LomA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjddsEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5DBAAn90zQ2Gnn6pYL9CTK0vWRGuSOicDu0+SUQ+ymPDBP/2YDNuV\r\nRhuqlTxa92+ZrEZAEYG7XPZGag0VhD/JNqmbjwfcfq7zYYtRyEN9o7Rwpvjs\r\nBsD5I73gonLBHYN7ur8uyZ4UwS552w0Nksb5zGK5tUSqJYRnc2qLz0HFRxY1\r\n7yg7cwLJbwFOKTICUNCRmpLb43/aKFmc1McsXkqYnHvqzEUI6GZJhlAIsvCP\r\nNnY/VwE6KbZFR6iLyjfQATC93kPmpOAsnoOoTuJ0PH6nqBuk8fkzuLDki0be\r\nmS5NX4SenP7prtZUipaUzaC1+fHuLJzF19Y34RSZaDGD9tsp+d6mPe9dN/0H\r\neaVSaS8pY/JpSU78vW+cj9CAuBwMszZlxoSmY7ss+Wsiez+MrK4oScyHXAZy\r\nLJCicukotcg4CT5l/NYkPnQOIU7LgFBL0S3dXlp1XJHIdmUuoDtZk1a1DJSJ\r\nz4Xgq26ducgW59g33V7i6/7q2GaqrnYauPY8jdPo4C1oPwEoZ7wcNsOukf/h\r\n1QU9os6S6eVMgODF0qL/BQKxumMHiH8P1Tcg389XjQiQuDKxvFolCbyXP9Cp\r\n/3dmGILJjunkXpoMUckzYJQ9I9u0WxAP823WrbPNDCGifuubjJ5u++1xoz/r\r\npOIODoGNGe0lzQXPDoa+PLmhHrSQdruiuQU=\r\n=mTlS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221117065458.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/434261650e8465b8c40c51ca6538852d/chakra-ui-system-0.0.0-dev-20221117065458.tgz","_integrity":"sha512-KN25GCmYtSnIWf7EcbBGUDls9gKRmaqIijpT1ssGZZLctt3k9gvZ5eaePSc3/yNnk/XZrTznyWsoZlOFS+SaYA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221117065458","@chakra-ui/styled-system":"0.0.0-dev-20221117065458"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221117065458"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221117065458_1668668163966_0.8920257496284612","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221117150258":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221117150258","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221117150258","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4140499abfdbac7aae97b3d115ed07e9b872766f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221117150258.tgz","fileCount":6,"integrity":"sha512-ulHPinM9IT4xLW6LKYToPLI3N2ISkWb8ZyEc256Bul18CZqHsq0nrbHpNdvDebHF27swoDQ0FIJQifjspLmXTQ==","signatures":[{"sig":"MEUCIFigKkxFUGeV5D9RAiAtUg4hZjgN21HVZ/W+1Bzz8+MdAiEA2dk/ze5qXz5bVRODfBXMIUoMeJp4TyUt28YyHFrsnqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdk11ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotrxAAn+5H2ck2PavQS9vdOG1KnYAuBhoQULSlrZDX5Lulk06whkRR\r\npXOq+8s65J/Eanb1yStWqtQIfahXSKyjMl2MbiWt3ltXm/y56wKTG4JvchVC\r\n2S8rkXoCkDISuH7RftLKb9xw9Pa4ILaCddI0wxjUQXnp+1YUf5kY+cMgTad8\r\ncyIxMPtBpbtK80whkfEPMJQqc3O02YBwA9LA+dTYGU+wyBBX4VQanubDjGbB\r\ndiEVbzSZABpL+utppshuowI5UM3u8TLGzAOunlTolw3IPZ7Vza3s+wtMPMA4\r\nnbCIGZfBcY6QLM2ospl8yWnV9l9k+Dr9I2/UpWs6S1IoWApdXyt6PDJltPbj\r\nYEOwI5nY+Su42WsIWy6KAHlagjFygJUO5RypIeAIe0qcImhetPYZlferwcbM\r\nafH83PSVW4DXlmTiybPPpJFGs2dO1FtUmaFTEXkWscTDAJ67Ac5ZisqAk09p\r\noYcJGbIC7Z2lFOQ1hWcKlLsQMQBNRRNHWDv7nYYSTKuPu3VwUlWPm4RZzCH2\r\n0tBEGwnM3XpiD6eVC2+v7xWmU58ShwgJPTXU/byHOZ3qvki6hnvxp/ahFdqA\r\nM0OHp+QXPs4iaIQJU8iC4xIPiPEI0eE6Z7o7dehbOrZtykflGtH+VpPXRkzV\r\naxnnA8DASa4hpXyocdDvK+vl6TEC6JGOxW4=\r\n=OHVQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221117150258.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/aa714c9f9761dbd8513bd8f81c7a549c/chakra-ui-system-0.0.0-dev-20221117150258.tgz","_integrity":"sha512-ulHPinM9IT4xLW6LKYToPLI3N2ISkWb8ZyEc256Bul18CZqHsq0nrbHpNdvDebHF27swoDQ0FIJQifjspLmXTQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221117150258","@chakra-ui/styled-system":"0.0.0-dev-20221117150258"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221117150258"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221117150258_1668697461675_0.9714463468942354","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221122115819":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221122115819","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221122115819","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a0f5fc5b4e9494b34e6b4d472894b8ecb0e0d7de","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221122115819.tgz","fileCount":6,"integrity":"sha512-Uq8s6QyMHGC1VxQG3EecQNturWRbto6I/X2o1NDDFFtiIGQJXYiM8Xp0cuo8Uu1hdyNRZC/qOOsUtzrrlAseKA==","signatures":[{"sig":"MEQCIEJBUlX90XMhCNi9pewvv3hzVO9YiKw2KR14crVfc9b5AiAoXRO/ObwQSDtmUFSmH/MNNYhhejtUKLzLvpSp3LXdXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfLmTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoyA//VTtbSSpRIp5hrQ1f8RiIqXPwY0+4Z6RKdAVZHsTDztK7ol78\r\nkCzTixNqPl4Cr6sLyvwh9U0TurWCkqLuGIZZGZBelILDCId8zinDQv9isXCK\r\nPFdkjgtyvjhM/0Q4F8J7UUpTmEEapPe7DMSBlx60D8lec/++3xVDKrX9WBzP\r\nWRaomPaw4q0TLHFi3GIWxUT5hbKKObLXTcTp4JFnoLHegB6RAx+1wT/iCfqN\r\nyT84kn/Km1O5NMQbK6NzjkTOTjGWl1SaB718eY6MGsZkAoCI+siMkO6hLW1z\r\nYher+pTUte4ha1RYJ7SQ+PJvp9eUQW3pY3MIh8VP/QhjJ34j63zeduCLVJAJ\r\nKMr1Eovq9N2zykeD/1iRM9jjb28HhH1yLbaqz5tGhxn9mMiWRXHu6EghDDgh\r\nDHMHl/muAarjVYHMIAU/kmlXnbE8HVPEHDTuxBD30ta3nQCfXL0ukUwt9/KL\r\nAQrr8DW8vtF8u9qbekOED/ZDD4DvrbbbFlW0qLxso8W7W0jAs/OOr3bwwY6+\r\nlq187JGm/1QK67QvpKirWm6urnWoHugnpqm17ad17yA7nanV5bUBE928xDQk\r\nLwr5nKlfofMPfMAWsHmgqE5UF14xgIek0+bnMqHsBTDaoZ2Fe5lyXJcB0BF6\r\nBrmauvo6J0UZLniXPgccof4nE2NHLBvyjYw=\r\n=yQJt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221122115819.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4d9727ecf58a0955f631a96e7924a6e7/chakra-ui-system-0.0.0-dev-20221122115819.tgz","_integrity":"sha512-Uq8s6QyMHGC1VxQG3EecQNturWRbto6I/X2o1NDDFFtiIGQJXYiM8Xp0cuo8Uu1hdyNRZC/qOOsUtzrrlAseKA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221122115819","@chakra-ui/styled-system":"0.0.0-dev-20221122115819"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221122115819"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221122115819_1669118354910_0.969990720465953","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221122135803":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221122135803","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221122135803","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b5ef2883f0099ec8070cb812f783273faf746135","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221122135803.tgz","fileCount":6,"integrity":"sha512-KbBfRWaHJgAlOR1UsPJabjo7SSMYyIe3kS2ThfpgzhCs1ZT0H9ZkcmH5qg6R/CZotZdjfvt4IQg18JFS+0I9zw==","signatures":[{"sig":"MEUCICPilbOpjjgoEraMExjnAUX03nAMV2Kah1r+MsvD14elAiEAppW7PjsaF3H0D8ntRlceRvGVwJDlNufZkkjJyfJgvvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfNWxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Qg/9HvDm8un1SJVOSUAq9xs64Yqv7+ptzf3hjyQl7NBkrK2yGPVw\r\nimus9JCqsn/buQoudh2uTNvaXts8aTI3J4LTaiAlR0pLpW9cd6A4NdWivMwq\r\nHT5ARE6SwGQ3qugjnzciCX6lu4JBfGOm0mtJd5k4ZoaA1u7iDdjCJkMNsbMm\r\nPIbC5IkN2FvTGjkcq7zlRFp59BDAOXhU20IRe5PHrQiG5FmMQ/LphydDzEDg\r\nsRH5N+qwX2CFs8uW3clXiYzDGZoZYJfc1AEAoXrWXyGKJKnUmgh8S3MJxONu\r\nYBofVOUAu1HV7JU/1vQKiy8qUNwl8WIU4VpT9cYmKC7m+5OZiC7inKlc6ytQ\r\nhQCAFVa/3nSdhgKGGgbBXnn6g1Qq4BrIptoK9wRyPH61g+VoAicsyZ5FZwG9\r\naj1dNJIS892o9X0BIxvGXSQL5ZcnBtRCP8cEGuvqctmXQP7TDh+0qxGb1kyg\r\nfLgUZ+K625goWVmlxd0SicnH6bM/o2aWuuJ4TJN7WVKNHR1RuWZm2nmjo4RE\r\nhGLxhOQuSMaossuMKBFDIleYS1ytQf/xh1n9KREXqtK7ESJLZr5FAXv3KZr9\r\nqVNPxqHloB8U/9vI06+rUnigDtkCRvAdT59xSogZ9MQxLRMGML9AFAGEoBzE\r\nJkpKPw5ck2Ev15bKTx4V8uuCmOLo5omfw+Q=\r\n=hS6q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221122135803.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b03db875b14d171e6c650ba2c861e314/chakra-ui-system-0.0.0-dev-20221122135803.tgz","_integrity":"sha512-KbBfRWaHJgAlOR1UsPJabjo7SSMYyIe3kS2ThfpgzhCs1ZT0H9ZkcmH5qg6R/CZotZdjfvt4IQg18JFS+0I9zw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221122135803","@chakra-ui/styled-system":"0.0.0-dev-20221122135803"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221122135803"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221122135803_1669125553022_0.750231502921862","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221123123308":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221123123308","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221123123308","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3dd2aa71a93ea321cf6bd14260c091eab6cb42f0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221123123308.tgz","fileCount":6,"integrity":"sha512-K0NWFVeW1NRlVMe/ebRhztHqCQWeMan/ws3bqL2zba87SvruLvkPx6v9olm8kw0dw6amTCDUdMgqsjkH2hhUNQ==","signatures":[{"sig":"MEYCIQDokqI74YfYrei8UGHxR4jCcZwhHSm77JAkLq1zWWxbFQIhAJHx0TBRBDUGrXjGEnsJvfj1iURUrrsRhNtB1VFi6Xiq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfhNRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEbg//TKV9D7U2Jdc+8+1jHR3Z+CrJqFCKAvzH8zXFMmtEBJMXSPyH\r\nEO7bo29aIGz6/ItFuJnnR6x8mir4Cdu2GtqT0fnk5okYlhaeQhkzizUHIl/7\r\nYsbto5R7fIWNbVVRnpgSUCqX4QXF9CNEH9vg6ukf6fkdSk6qUeTbNZlbi62X\r\nJxnuBJrJRUcvbJmmN6i9TyIXZUWRtow7PhNqdRgn4iDPbC+d7z0oSy/WcStI\r\nWlqx1+zqpcKcUjZNR5fUVp9oMTXEpbtj8sLH8oMqYzRVD9hj+w6hHxjps4cX\r\nxIATlFntr7Ljb0TsJ8PbN7QNBX80sYHymWzcQfLeyMHRVhxUVJxPQNDS53zm\r\n6DR3OuBw706T0bDwm0e7k5mkVYY5I8yLGZn8SfCw6RYxdbwO14tFjnnat0x3\r\nH6M1JhwNkbpI1t6FJo1C/vnM4XLajXxjFbOWFpYxDWe34NQFgWUjR41XDq6N\r\nAiQ8nwyd7N9qdQwgC3Yb2NZzARXt29ptIlK03TBm6anHuk/hLBm3XqrVYq3r\r\n3z66Sp82McCCXi2WaKw3ADVxWVf3aBazIN3BcZNnv2aKE9QzRQQdEds6HEEd\r\nO33gzJJh5pgEaY2d/d4//WlFdjw3fgldiO8lWw9joUeqvqJGo3bUn4BOLkJn\r\nS+9cYVtWcp8C5+OQqpk+gN42EX9t1N1mHTM=\r\n=x6gR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221123123308.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ff2ce6938b1f417b5dc60d70040563fb/chakra-ui-system-0.0.0-dev-20221123123308.tgz","_integrity":"sha512-K0NWFVeW1NRlVMe/ebRhztHqCQWeMan/ws3bqL2zba87SvruLvkPx6v9olm8kw0dw6amTCDUdMgqsjkH2hhUNQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221123123308","@chakra-ui/styled-system":"0.0.0-dev-20221123123308"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221123123308"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221123123308_1669206865221_0.41955453651205055","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221123130515":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221123130515","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221123130515","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"060444a7cc46af1bbce6f4861feaf89a78d4109a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221123130515.tgz","fileCount":6,"integrity":"sha512-TtmsMqd1sXWO17k2mBRqYctCi7C1V9mNhyzkH5HYMtPKfaAzpW9PEYIWo/uIYrgh28Z5IQHx7r+vPZEtL7FCFw==","signatures":[{"sig":"MEUCIQDpoc7tmhLatsmvDtfL09UNE+7P2nvEdlUeaPRdR6TnLAIgdll3RuL5JdI1jlb4uzADjkFS8WRQehXagCUc+hJ2tjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfhrKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO2Q//ZYlVjFzAkLoJbEeibrwpNXrnFvIwKFAkUbdiFkKgqBMIOlp6\r\nuIjgky/9FQnss59WkxrKljjH73MxXiykOeeyH06WDTPNivrYHwWcxuC1jd0B\r\n+CC+OQUZ0oQRSJU0+m238gQd26dC9PtmD3c0GjxDaJPqbiIdw7YTRkBUCYRU\r\nxnTfwsfmyipaqGUkfQkrHh3hgyhK3OuyFgquT1n6Df1hmD3T6x/U/IsPhM8W\r\n5MDctYIzk1R8L6/xWeTlhrngPRRSMULWUAdHdusYQf3tBLDDw7f2zCgp/S4S\r\nFJUpuk9KRmpHZFMEtEzNeaJa5iW33X6M7mrxDdd2+DTndTEXmuiL3YmXNOCq\r\nB384sSIe5CPFyBNySqJpgx0SzEIM6pxiZrgg8ry4fS89XYpd5SCOXAIKnA07\r\nPPXuIkVMUvfhvlgYZ/VZi1hFwqjYReeWpkHI8amycCCNtKn3+VKbsoq6Iv0Y\r\nWniZ4LIYBE3Dc6JfQ9QM0Ap2TSGlxYIT6mE+hheT8v8Tuwt6A0xYeXe1P8ff\r\n4i4L3Ax/7KN3G6kVZHTV5n9Uf/kP45Z1JmArvdPWUcse/v+gNJFs62vKMNMQ\r\nkVRZB8ibCbowBStgFfBgzxLZL/nLhZDOmXitvK9kbWI/rfFENjSUPgpiUiIi\r\nswZ+YOp2LX6dSBIxILTEsrxfeim9pDpDKu0=\r\n=HahU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221123130515.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b0f03961946f61d9a194f0dc64226857/chakra-ui-system-0.0.0-dev-20221123130515.tgz","_integrity":"sha512-TtmsMqd1sXWO17k2mBRqYctCi7C1V9mNhyzkH5HYMtPKfaAzpW9PEYIWo/uIYrgh28Z5IQHx7r+vPZEtL7FCFw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.0","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221123130515","@chakra-ui/styled-system":"0.0.0-dev-20221123130515"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221123130515"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221123130515_1669208778266_0.17181439141202515","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221124103928":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221124103928","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221124103928","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"853e8bc641aeb3c6be143521d879e8dcab75448b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221124103928.tgz","fileCount":6,"integrity":"sha512-CkdHsmCH3BCPjQv7fPZiXAb2v1qj2sKLCvqs7TOympHWbcS9EkGhfCaeET4zCbGmJkv3dYBwCjp+rqAFdavT/g==","signatures":[{"sig":"MEUCIEG4mdlF4UENap9tRAgfbylJDPVa1CjO8EuKNLRBG0NmAiEA6bMvUb68RpIROFiX5aa16YuJqiXkH6Q7whD30Q9r3wI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0ojACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomGw/+JwwZYWblKG3tqKgS5lSduG2bnxq2irI+DRasBpMFmMBkUx4p\r\nNypGQnKN8YHm8KUAyoglGPiedPQl0KaO5DxiiZ0PyhRXWP/mL9WktgEMeH5k\r\nhCz5ZFqsbXvwZkrQ4NRjUdPqWh8K5rFGKYBiLc5NHiU7nv4CjhlsteWS92t0\r\nhCPdymrlCJz2pkvaq9ZBSpUgFq0y81F6J3N4Ih5gl6RIPTn1W7nozg/a+nOk\r\n73n9TTnHw6vdQw1iuovbo0U+vzzPC8BNV3Er/yuCBIb/+M4wZJxhgXirIjAr\r\nFWiap5nh2tWxss0OjdgSc8+U7NGbzk3i0rCi+uZ+dULf3E1BZZc8e/yImfOj\r\n6lgTbFUCLhUOdH2en6jj+a4T5QbS7OgzSKIGr4X498ywoIQdivM7dNf+6Lh8\r\nSFs2HrPTwjBtbFbin0mPbe2X3BqeNAjQAtodylT/d2EDHg/OAfvt+/IdokQf\r\nr3/Een/PAn88tOjW2lNy5EVnSuviy+K/7fI/G107NVFcDzShUfBpCzdEkNcj\r\nvMZVckK+kX3m2av80+tsZ9gOKib0murFgSzxAWFCQSu9pyjwkzw3snZDVKIo\r\nF1gxMVC3tcIZPK9Oxbv9+y4xPDb4rSr5orFijqU41WQo0jR6ve2V1oQs9H+j\r\n3qNntiNmmfejH0Qjvx4t0oQ8xcGA6pOs66Y=\r\n=+0rq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221124103928.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/983cce52462f3fc36e2f81a3e9d6b1db/chakra-ui-system-0.0.0-dev-20221124103928.tgz","_integrity":"sha512-CkdHsmCH3BCPjQv7fPZiXAb2v1qj2sKLCvqs7TOympHWbcS9EkGhfCaeET4zCbGmJkv3dYBwCjp+rqAFdavT/g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221124103928","@chakra-ui/styled-system":"0.0.0-dev-20221124103928"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221124103928"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221124103928_1669286434845_0.7217178194662064","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221124105520":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221124105520","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221124105520","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3ceb1f8394aea333b3a55fc29e5e970c92f622b3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221124105520.tgz","fileCount":6,"integrity":"sha512-KLE+BbCN0WxtQbKJt66j1M0hJfHawq7mi5MFBSskJeuRz301X/A+AyFMRpqDspGE7JRruILl2UOT21pVZn//vQ==","signatures":[{"sig":"MEUCIE4bx3bZdcJsnkQHFXRVwjaRomXCPp4z0UGo0tLACQBXAiEA8a84jHaFPZbD9LWrOey9RufeGNm+ndULpMI/zQ6nH70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf03eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKXg//SuuosSraSbqC4Y4Fhzrjlwp/3V3GtYhT1Q1uyXN72Lbg91yg\r\n8FkiFbuB+8YE5nM7E7IS8TI5culZY0uu/a2UX8Nqo8DNwpnfS7uJi91OSnTi\r\nYJXa82Ebwcq9qwkUyV/EiWivPMWU0sWQ8rn5VBOIS9jpYncewz6d3IuIG3xp\r\nxp9E9BrG8k7DvlqumbvO4MLVetpeAK3srV0o9FnwlhItjxHsPq1k/nCp6sGE\r\nWsumfWwO+AGsouSDq8rI2dneQEGkwcAsB1GPzmk2vtf8iHrCXoKRgxBBPEtn\r\n8DI8eaKSt3Utenve+9b21zK2OmcYbY6b8GnNutNAOzQQpbUsVN2lYWXauN7X\r\n6YvGQh+GYo6o15SyguigMGHU2es12BaBsQ41RKViZHwiqtbvrq628/TMjot+\r\nmLkx7qS2a9j7zcOFCz4zJ2YUD5eQ6oIf9bZS07muDcQ+mM8Zaxxq7qGAewfA\r\ngOe/pnweboHNO2heuVMYqWOUd+XgDatwoOlY3h0hAM7JQ8T4Jz/4mSut/cH2\r\n5nTO/649zEomZO66x1DmIQTMeAdOwYILCI9UASz1i8D6XQOf9rQSOR+qZkdF\r\nVKw2cWtEBYz2DiUcr++qw2xueUFkb5H620lXFSkNfnWT/zrQ43ucFpNi862h\r\nXTLboKf/QPCVQjnUexJzse20gFCXCpZndG0=\r\n=qOsM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221124105520.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7f5e1d9427973a5ee586243da7a52c20/chakra-ui-system-0.0.0-dev-20221124105520.tgz","_integrity":"sha512-KLE+BbCN0WxtQbKJt66j1M0hJfHawq7mi5MFBSskJeuRz301X/A+AyFMRpqDspGE7JRruILl2UOT21pVZn//vQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221124105520","@chakra-ui/styled-system":"0.0.0-dev-20221124105520"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221124105520"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221124105520_1669287390394_0.17659224637050963","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128164126":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221128164126","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221128164126","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a00dafd0387c89da0821d61b0b6db1fa26afdcbd","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221128164126.tgz","fileCount":6,"integrity":"sha512-Nblp1wBHXYJfbjfQsvAqXYATGB5rx015qR6wpFmT/7YxrsYwR3kvtGBzDHfnHF4Gj0JoYoHGxuqXg2YTBuvnVg==","signatures":[{"sig":"MEUCIEW5Z7T+BLIY+jSJ/IJ44JG4UikzGvzT9UOKLQiwHmeNAiEApqTo8cNHcez4S+Kf5IE/wuS7uhJIt96gcv8liGClWoA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOT3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCBxAAi8yN4Po0Yk89cnPXGNl4MVTCRv+gzEsiByb6PzxsZ/GuRjUk\r\n+vglJpOlikkuLUMvJqU17iRsxdP/tMFQSRjX+YiMb1zRW+GyyyE2nOCdanMf\r\nLrH1sRj3XCsns5ZXsGfyRYA6wZTOaM84692njOLTU1VwGEu+iJIfBzOvJd2S\r\ngJ7iilIE+g5S2kPA9H+DHITQV5Qv3N8ycO2yDZuwtMnA3/b936VMKjsSdgoo\r\neLvLWwwMwXV8KyOoWP0LAM+5KO0ELXRY/Ui+ZkSgKsUwrqlpZ8+eXIoLxms+\r\nl+QDSDViMIAqzNUHo7nt6Jq7h8NOylxod3sWq6B3KZTIoG735DYnxhP8be6P\r\n27ARAtmI5vWaxF/H+pU480pkS3V8YwSqekFUVcwtUGKYexyY35w1ES/sCb5e\r\nHF5pvGfrai91oHutUmWCmq59Tk5LDsuqOehkj76RRU6okgdRt1ktBIKVBjnR\r\nEsx4qevmWi47je1b4FMUP68gTk2H+46MK8T/Iop/maPCXH6o0noAgBlVclC1\r\nWv+ZISH9Uu5kbWzx0TVKFLUybajG0NQGZwDu6x3ds/Y+GrpHiveBiXEodGpw\r\nXeuW1z/wa8/9jkuPGXUsFgHf6spUXe+m+N8KwHOyd2aUJ5n6RsXaNUTES41C\r\n0YmoHQGZ9Z9aFmg3I0r5PVrvmewrOk8eesM=\r\n=vOqc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221128164126.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e15a5e7dee792d4c18392a274483647e/chakra-ui-system-0.0.0-dev-20221128164126.tgz","_integrity":"sha512-Nblp1wBHXYJfbjfQsvAqXYATGB5rx015qR6wpFmT/7YxrsYwR3kvtGBzDHfnHF4Gj0JoYoHGxuqXg2YTBuvnVg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221128164126","@chakra-ui/styled-system":"0.0.0-dev-20221128164126"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221128164126"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221128164126_1669653751054_0.8008712819987294","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128182021":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221128182021","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221128182021","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"68ac2ecbd9c5fdcb77d07985ce78eea71aeddabf","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221128182021.tgz","fileCount":6,"integrity":"sha512-hdgU55LDhRgw8nq4oOqPlZNPOIefsFAyI4+onRTDh9JIgNyOowseRT/KHMpgC4l5nS0+nC2q6gFuiQFnZ9gBdQ==","signatures":[{"sig":"MEUCIQCjxx3llOmgA+J3OPZpYXgUhuM2eDQcrKbn6mmHKIx7JAIgdTwJhwP0btqaKFA2wRIUZRl1a4awK7+bS1HLhlGZAJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhPw8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrx9A//ZM8IUcooxh5TkRoH8pU8poAVzd5EZdOLANyaAntRWbDD35Gd\r\n5tp6kvJ2ahTJcyWo8z7OrKqb6Jtac0wGLstTvVhXHnu/+oz9ZE6rVUMOw8Zf\r\n1+hUX7rdvwx0y0jtO+6r0isRBJyj20U7LnKQJ16/YCeo2AwXNfiK+sD3jLYL\r\n0y+C8RyI8Vk1Pz8yauP1DBFHqzRny6P2HVlBXmVPidJsCkJm0ILEbzt3HWJg\r\nwRoJE00YX6mDbE2SrjBwJn3G12P8grlNljZMDlNBUI/9F0I4v7y+Utus/u/v\r\n4KKn5RcCXpojg5aodAQqvDJXG/7xMheM76PsRUjsYw3U7MAw2HVl+lBtZ4sV\r\nIxj1M0i5brnP/6AGkyyYASYsdjQswMlDbtNbl+d6X+0aXLt5ntvlmGFDiStP\r\ncZkF34GzXTy+M0x/mO/fmAfGFWBT4WKDyfzZiPg1Ihfy5LttcRfvmLQiIGfu\r\nxOQHV0f8D+VG33EKGm3M/PjmFV/us5hgJtgb9/YMGhUYrP38iXZdPUTQ3tMe\r\n/zmB5ZudDQoTBKbmonx+FyV4pk7YTVOb8onMHWQa2JQMEwBXpQ1LS9AaJFbQ\r\nCIymFnTzC5Hf47eeLzIUlNwMVhj2v4urjdUo86uYsnhDNUrfsewBMKnWbKRo\r\nZ3se0l9laCxX7hT40Q2Fy6odhsIzxmPSjW4=\r\n=V0Xz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221128182021.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/677890bee033f47f66d7cbc2a4882aba/chakra-ui-system-0.0.0-dev-20221128182021.tgz","_integrity":"sha512-hdgU55LDhRgw8nq4oOqPlZNPOIefsFAyI4+onRTDh9JIgNyOowseRT/KHMpgC4l5nS0+nC2q6gFuiQFnZ9gBdQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221128182021","@chakra-ui/styled-system":"0.0.0-dev-20221128182021"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221128182021"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221128182021_1669659707789_0.5643463663881503","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128183433":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221128183433","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221128183433","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"df9fcff6ece7817f317bb9f83ad6bd3c46201f02","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221128183433.tgz","fileCount":6,"integrity":"sha512-SF6SyePsdE6nCQiTU+PXqgVzyQu8uxH1lSFMO8bRAy5t6rNTcok3W0+ucipiOxYyW38prNCbR/8YXIyv1nDWuA==","signatures":[{"sig":"MEUCIQCkcsbbwMvS3zDSbmFqkaRmcMlmWC3IWYMr/BP7l/6OCAIgE/Fhg2cW6A/hpWQydZRRN9E6CTN08jZ0wokaq99MUaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhP97ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQrg//d/7fNpm3VMBO68dM3lrVAieaxFZS2Owk5pYJF8JVX7ln1xKD\r\nICLMJgAFbzqYjmfsog1Mcowk2Xqy/BuBin4rwlcG1kYyu/IBliixXs5Tgnp2\r\n73PaL6t4zSvkHcrTi/ZKI/LsqjpUxUMFmTX/7b2KuCF52sGTAES84Bg8SWsD\r\nz8pPQFI8ppE86yxGASHp3phYt/zJZL79eAzF2aVubiNJdl1mhHKMCkhk/0EL\r\n2n3EFnuNS9pNGftwaOhDqy2Ktkp/B95QFb237cGCGVqb5S54XENliBJoPG5l\r\nnxpErJWpgjZl/DPv4LA588iAbQdqSEOeO8WcUSepEPEKmQf93Wtzh1cyFZgW\r\nA4vQQVwtMDpgNZX+ZwkQ0NaDxoIhkJWMHqPkBi1+uSK50ILuZ+NCbKqck5F+\r\nAU/mn90FEaUAl9EegO+aOduOgZJdgfxayCLFyFV0Ma0v2yu/zjvBVM5rG8HM\r\nz/U+hJoalgVuBjgCNIFl3hm5KWkp2EQ6qJwXqy7oFhcllhMQH5aqvuoVSZkQ\r\n8h2nDXDPKgPjoEwBck4j80rriY8TnzCmSFe3ZeSrrKa33KUAFL4PHDIU8zcr\r\nDAeyanWKk5ZzQyeNjQZ1GZC9O3Or8MZtL2Ckt0+YDSQDfv4bxi7aOUVJvvEt\r\nUNJIVADlK001q/zYZ8Wxb5eDc3qzE3UYlds=\r\n=ScoJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221128183433.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/147690183b1ce66ad5c0a4a7b48da183/chakra-ui-system-0.0.0-dev-20221128183433.tgz","_integrity":"sha512-SF6SyePsdE6nCQiTU+PXqgVzyQu8uxH1lSFMO8bRAy5t6rNTcok3W0+ucipiOxYyW38prNCbR/8YXIyv1nDWuA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221128183433","@chakra-ui/styled-system":"0.0.0-dev-20221128183433"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221128183433"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221128183433_1669660539395_0.779749882263465","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221128185230":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221128185230","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221128185230","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c5d33963643c9346447c6eeaf39f2b261a1df438","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221128185230.tgz","fileCount":6,"integrity":"sha512-CnZoWtcwXeHBJ5g2Ya3BgyJQSM6T8GxmCNIn3wLSBuqDdk+b4mj3KZDftqpUNfSVSeuewyQqz0W7rfhSm4FYSg==","signatures":[{"sig":"MEQCICT+Jb3DZ12lvVcnsqpHAasI7QYq480lCAIkAfzpQa8IAiAoH51uwRtdzQ2pr8ZZdsW0RWuh/+k8bEqO7nmSh5K7kA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQOsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3xhAAneKpMeJR3f/K95JQYtpmDD6NTjMAW6wgYFV05GjbiBN5wI8W\r\nlhakr2n7ufdAXzBsudjlYntRyBbDVuoWWtao9yUdJXqFj0fLZlWp1GuTQNe2\r\nlDXutLhKSvM9pFL8o8fI3OB39ptHFvJvKBQ3YUTZhZ3Vi6sBf3AWYkBrp79a\r\nY+8gdiE4uqih0SDq47CPmiCGmMJWBETu6+99wd9QeqRPj/cXX1CyBxeFBRh0\r\nybmkr+2IDz+3eu5a1GoZj16WA4nvwBKpsUKlWONVl5roSUbKSaSMmDcDvGZK\r\nsMlq7dRksLinSe/RCO8mT3HvL4nUrbKys8Mj086lh1nZCC/mEjFdZu5XTM2+\r\n6V73WGjsTGwc2aHctmlEQQdAuCQHm/t70sUmHSi/g1JObGQD8c+N7LKsEPcy\r\nTqJvb842t8UqTQaJUwRAw3KggFlJCSlS0M1hy6H/ECwSMbgK8xSNJ3x9x8bB\r\nZqqM9ugFnT634uj4uJq3Ogggmtzoo3//Sl8nzUrHj+jtRrQC1gFpvwNuU/n2\r\nnQoRe+8ornSnODLPuXegBlHhTe+FZPeIjP+WE1vQE27KNAXmKnias5nPLTFL\r\nX2ar1TkMRO2l8AdWUWgVhBFyGqexpOSx6dUGUr90gAwolm8jBGn1v7FwkrOW\r\nGvaKXWYpsakrlucD0BUXYbHX/PNADd5AyBw=\r\n=yYdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221128185230.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b4f4eef1387207e18af3c6b7fce76406/chakra-ui-system-0.0.0-dev-20221128185230.tgz","_integrity":"sha512-CnZoWtcwXeHBJ5g2Ya3BgyJQSM6T8GxmCNIn3wLSBuqDdk+b4mj3KZDftqpUNfSVSeuewyQqz0W7rfhSm4FYSg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221128185230","@chakra-ui/styled-system":"0.0.0-dev-20221128185230"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221128185230"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221128185230_1669661612388_0.782104461846864","host":"s3://npm-registry-packages"}},"2.3.4":{"name":"@chakra-ui/system","version":"2.3.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.4","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"425bf7eebf61bd92aa68f60a6b62c380274fbe4e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.4.tgz","fileCount":6,"integrity":"sha512-/2m8hFfFzOMO2OlwHxTWqINOBJMjxWwU5V/AcB7C0qS51Dcj9c7kupilM6QdqiOLLdMS7mIVRSYr8jn8gMw9fA==","signatures":[{"sig":"MEQCIGEH6Jdi+9KTGl73YvzzNxkpYNVgSbEEofQfl+w04N8HAiAgBNwkUwsSndnLuVDJ1NtHrygpPg1fGFW1wU1kUt4u6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhaLTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3yQ/+I5P1TZVNsID83+bJAvmVj0vn3/N7Uqc+PRem5WcjreUKhXi7\r\n5mHr/AdAuj/7qWay7fjc/nYnKyiOUoreRZ8f4ngAkqlU3+6Lv+aEszZpGMWF\r\noIS7psHCfwGsU7TpLvor5v6YV4xTV7AaP0ziB9hK1L3YiXqRljJI3FFQZ5LE\r\npWQQj861TZeVnb43w3ALe+nZs5lA7m2NwTfLk6oMGsykDZZz1xMtKIwIDC3O\r\nry0zN3WNz3X4Y5s+8QqE+57mbOrkwhcMu21anO1rsB8M+H/Xlnw1p2gd3SIS\r\nPxpLZIO6OyymTOtVN4yvGUBnPp8bja4uxb7We4Ex7COHIdpv2/osMM7VX5/D\r\nguatwpLID6T9DKX4rIc9qmr3sVqRvOKjziw6szbpfZwvL2JIqQn3H4Tw4hf0\r\n9O4snJhWKqrqDn/+VfLTM8CNrGuV44I+69drG2Y8Gr6kiwtZHuCJ4JK2L8/8\r\ntX29GDnYvavAu5DIBxUUm7Glb75q25maY8JuHmBzs2aQCJzEmxkFhZbjX6kH\r\n0p7MWc3jcNcTGMODNx/L5DPSfeJR6KasXviI5LkZD+R+Z574bQCiUrSSB0Du\r\nltj6Gsa/WyN1niEDwghzvZ6Myv+4pJOtSKE9gGHuH6qNTJytRs6oOdWii6Q/\r\nnveIn2Tf6RMssvK7+z11uSIN6y6upHqgJrY=\r\n=xnRr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.3.4.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4f7c877ee8400a7648d306a9687d7327/chakra-ui-system-2.3.4.tgz","_integrity":"sha512-/2m8hFfFzOMO2OlwHxTWqINOBJMjxWwU5V/AcB7C0qS51Dcj9c7kupilM6QdqiOLLdMS7mIVRSYr8jn8gMw9fA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"2.0.5","@chakra-ui/styled-system":"2.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.2"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.4_1669702355042_0.03335722328922808","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221216155214":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221216155214","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221216155214","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1128d65995fe0a8a98c1f06d8f2f6666ddce7b4e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221216155214.tgz","fileCount":6,"integrity":"sha512-GeWbbM+Cfn5JQYcG2DsRrr9MbuAOXyOgwJEsBcW/w6g9fHFYqmSs7YnFubZV+JwU3C32BHA4gEBW7rwKrWqe3g==","signatures":[{"sig":"MEUCIFiQ5K76ePJ64bxWA3UjJgeo56O3/7m2c7bfGJ8J3e7NAiEAguUZJVjZUMip+Qo7pcb+3p+WrkC4+BZMbWCDVEtrB3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnJRaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMPA/+PneMRPX8zaZuHxqj+Ca4hycbdxI3PHb9+I+KQH4bPulYCJ32\r\npgc7qlZ0hJUNo3t3PV1ZKnm4oXPd/iDh4aqXTQ8Kf91qUrhvivBu25qwjbkI\r\n9coRN8w3oR7o48ZvpipkYWVOGj8LAje28MtO2AQtowvWEzHXi2j6Ge96lSh7\r\nsFZ1lQtWjq0UzjFgzzq5jLcQR7BxmoKs90k6mPdx3n1Bf6AlGP+zpLb9+eX+\r\nWaEqTzaa+zXfmvoyK3us4x0BXOa54aN7uJLJOxn2svUA0Hgc4pe7TI0TTQxv\r\nXiGpAvoJjzm7oXILR78SJO1l36U6p0+vgeIiV39ClqlE8daZt6yD13UfhHE3\r\n7ZxRNQlvnTM1RJADtskI2wMmvwgkx29FGOsZj1pKYVA04/4hDfm05i4o1aSA\r\nRiVXR3shRN4UlRl+vz1O73qhjuL7ZJlaHu0UBNTTTXqAZqAOGIfVCvYxZdDk\r\nWgEMYE9Ub5/IIQQRxzuv6NehscjeNjVPdjg01cgyZEmB74gsX57Dl6sH37B7\r\nvxhuckMCXkv2hlGMkVT8aetZcDr0UhsDnBpUwGj/ASDb+RO1748Jt/+wxRBW\r\nQN/GiVoXcuVlhOma1G2xv4LnoXlN2iqtZq/Hi+RV4z0o5WFSNWWhSoAp2reo\r\nWV75ZtVGzqNBzrsTGMQ/MkbG+lhT/kclMtg=\r\n=mLcf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221216155214.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7b0aabfd8401cb9d2eb4226236fc94de/chakra-ui-system-0.0.0-dev-20221216155214.tgz","_integrity":"sha512-GeWbbM+Cfn5JQYcG2DsRrr9MbuAOXyOgwJEsBcW/w6g9fHFYqmSs7YnFubZV+JwU3C32BHA4gEBW7rwKrWqe3g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221216155214","@chakra-ui/styled-system":"0.0.0-dev-20221216155214"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.2"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221216155214_1671205977946_0.17230290923027924","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221216193340":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221216193340","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221216193340","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9e582901e5145425c707ea118de183fbd380288d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221216193340.tgz","fileCount":6,"integrity":"sha512-R23eUDCFuytEwfftijwf590ruGZOFC8P3yNkmWbLUvlgAols3z3bO5FGt29bbSse2vufGGOvyZ8i0AYefu88eQ==","signatures":[{"sig":"MEYCIQDGsyo1FelAPigOrGtYE2uoZET2RFf5dafvs2c38zeL8wIhANlhTv2PPN/e0mr2j5Dw6w4nGa4hrJ/8Afxk6XK08PeM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnMhGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Ag/+MA0nNiuoAhd3t82HuKPxzlI33Gw2qyFiAheKpWFMX2nqcWe6\r\n9Hsj12wwh7U9WINn2ZDx27I9hZerHGDVlDZqSoPEmp3raPgfSuUvtcFm6RHH\r\nbNloQAdFHP7jLHqr7DrxRfssRBesVQYE+xZ3HsZdZtIjuDb5c04SrOmsHI2u\r\nebJnhVPzqPXjLIqD0DN9aQUG+lzNQxzdaInp2DneTrE7g9Y+zxmaOEZLpXAA\r\nkpee+DCrwZ0Z/tI6qmJXqMMhnv090q8wmRFUyEs+ObG0LfqjDS2IyzQpGu82\r\nsybcQUj+0hKOBPozuNdBh+LW80Gi+xLGqO5B2s0k6syXQFQ93Ka6nAGRdlFj\r\nCxoCu95gXPmLIi+GtHgGO6w+PHv+Q4Cqbk+Gs1LYscdj1v7j8yVe4GG9IfM4\r\nBJlTH7InXtGjrba0ifHHsJbOUmJ+bh0rHZhRcZgoPYme1Tm+/6jlLhATm9vG\r\n0pCXgM+c8JtBYcOXo7lpMHnVumRdxaYsfkoadZp3M2Vny5ddUt+zyMiukvXn\r\nYB7cbeSRJc7VuHc9rh5iYZ+n2An6V9O3GyWpcMw4lrjVuVjJz3fLUNSUh9sk\r\n0EcF/MmugM3GjsMkNhTWyL6oSIh2G1yWziaX64fGp89dmawfQWqng2tSxO/6\r\nFOLpf+XqTgiM/rVz7EFxjVruWVAGztRNQdk=\r\n=6Zo2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221216193340.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f7dfe413becfd757ef3e4679d187b510/chakra-ui-system-0.0.0-dev-20221216193340.tgz","_integrity":"sha512-R23eUDCFuytEwfftijwf590ruGZOFC8P3yNkmWbLUvlgAols3z3bO5FGt29bbSse2vufGGOvyZ8i0AYefu88eQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221216193340","@chakra-ui/styled-system":"0.0.0-dev-20221216193340"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.2"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221216193340_1671219270628_0.6249109750618373","host":"s3://npm-registry-packages"}},"2.3.5":{"name":"@chakra-ui/system","version":"2.3.5","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.5","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6c6f41698d2cbeb6fc4db0a827aa5873f4767bbe","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.5.tgz","fileCount":6,"integrity":"sha512-x7S7pNKQtFk7/qsn3aHlbZfhcacvaGXBKlnQvHKrbmDVxgLCjGExdi/8Vs7rSYzIyXHx3lItpwd2qHsqqcNvaQ==","signatures":[{"sig":"MEYCIQDcOTXmd3/1mQtZwEg/nSwlMI1/1ACOrnoPEtDQcR8gxgIhAMPSLaaVRQIC3X3uk/Te/dcfu5HP0IgsuuFNebrRzXhw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNDzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrv0hAAiyeNX6kSB/PFATuMb7SUE6FqK0bGgIhI/FTtqK0DOfmjUmg9\r\ndsBm0QI71wUftdakPtpnn4gmqWJ9VMg30IYPmHEynm05ETCWmCUSQrlgCsbu\r\nGtvVyH0zzqMpSwILYW0v3sECgBgNKPOi2d2lu9xWIDKb75AMjnsAWZBPKACO\r\nTPjHJqDjWA9bWtsVggOB7VFBKFtSjvELYVj5Jno36WsghnB2+HGCf1OJjIHi\r\ntBMS7TEpwCcasLcYwg+hLNdihvJHC3MiVyQhWd2xVRpO+vocbSx5JGxuePnp\r\nBoIA1SCjTheKBfrYeJyDkZbgUL7HQ+hviJq7Ik3/vUBQ+Le0X3Sp8jK0ZhCj\r\nodvrFx8DwwexmepkKQm/2Sil6wQ4+OYtiUI8veY0bM73TzkDSMBaO/ojsjQX\r\nRs10rAAmGSDC9/G+xNodXU6yiEhcS3qNk/3+mIw+N581cIjIFdQ1ccWQaxrl\r\ngYuTr+YJnepmxaCKpWBBc8Gfodl2Iebq7jgtpG7505SEkHTc5Gji7EhB6j2j\r\nIPqEYvJOa2K0RNxw2JztmyzNaXG2rum6TkxKtqDM+hhIVpvMvc9DGBeg9dYm\r\nqA+Rqgo3LtxspGDFT40sKOlEyk55HIq9eFgbK/dETvKe5ccbL2W64nhCb4jB\r\nRZhgSWnDBvQLVMpwNsITD8fY1G21LqlwrDc=\r\n=CM3M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-2.3.5.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b86aa33da8021f014a8bed967c3aadf1/chakra-ui-system-2.3.5.tgz","_integrity":"sha512-x7S7pNKQtFk7/qsn3aHlbZfhcacvaGXBKlnQvHKrbmDVxgLCjGExdi/8Vs7rSYzIyXHx3lItpwd2qHsqqcNvaQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"2.0.6","@chakra-ui/styled-system":"2.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.2"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.5_1671221491652_0.19559568627592805","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221102614":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221221102614","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221221102614","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bc013c6ab9b9759975bb47f280dd25debc9fa113","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221221102614.tgz","fileCount":6,"integrity":"sha512-JnrFGK2vc0xrrPWN8tOBryyq672+oViFFQeePO9KmtG3Xq2cDVQ3F3e18yayNQLHRmWshOJ3s6cqAM0dVy4y+Q==","signatures":[{"sig":"MEYCIQD0J7cvWhtOekt24mbxFdYlPYE7mk4i9SB6dMrsk5W/XQIhANF/wZonOmim1w1MtutIVh/Zw7WwvgEANbJQrAbA0WNX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjot9yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHPA//bQRuLz76IpM84BUEnAREbocRAtxiejbbC10vkNoBwM0entYQ\r\n/BJBOkG98n/2+cNyzCezGHnuyVK5UU+aqS7r+q2xTm4UN3UEjcI9IRNsPZUL\r\npOvsuK90jGVbBrowYQj4Uo2o4spvJsQvpt+xehWJ0lBLxfIk9Kgegj7iaGef\r\nHiqfLolsG84TtrT84IppM2kKQuXxv3LP2CcxvlKTDbzxatJJO2Uyrc5KlBry\r\n8GMc+ImJGjaxyZuiEebfziskHulZMy5KFu6McANojdfT4gQz/0AzNs12vHQv\r\nx7b4zwiC/opDnnMU1ANPeTtQe4EGu+cME6CH760+uiGUd+lpXkwEk00O99JC\r\nMXEo67areItbzEJ7uCZbqWjwQ28ZAeoaeB4tJYmadTjO8MVeDTZvUEsEdVMr\r\ngTgv+2eUBYvweDCbgb4LaEieWRC1rGq0A2CSP3fOiiqnwwO2Sw3DwLIibZN4\r\nKyplfFhLOGeNAt9VLZJO+VFa+7iKlZ+5/KHwzrZUGsZ+S6yF+5xjAh15ZwXj\r\n638L0EzMpl8/UXxu6Be/oxynvCZ9/mF2o1u4qk+BBVgaVPhLGbqmEaKG/ByG\r\nTLOptxNccVVbop4FoBNMrNK36K53pGcBNFjU//tVYN1VYc81zLe18aYUmxBj\r\nCRJYkO3fLOfPAaHYvSgdTHXO4eNDKTErMVY=\r\n=8ZGz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221221102614.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2c57a50150a73dd84df4ecb96f80483b/chakra-ui-system-0.0.0-dev-20221221102614.tgz","_integrity":"sha512-JnrFGK2vc0xrrPWN8tOBryyq672+oViFFQeePO9KmtG3Xq2cDVQ3F3e18yayNQLHRmWshOJ3s6cqAM0dVy4y+Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221221102614","@chakra-ui/styled-system":"2.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221221102614"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221221102614_1671618418553_0.9608569506078066","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221104434":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221221104434","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221221104434","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"85cd4a9359194b0e86beeb370653afca46effb1b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221221104434.tgz","fileCount":6,"integrity":"sha512-+LaJ7zWpNQEAI0SZAItXTEHb+hlDhHnV7QenAzNSYXQRzi4iUXp5mwZqpDP0BUoT/lmT6RPFic4U2yDdfcwMYA==","signatures":[{"sig":"MEQCIHwjcjHV0vrS3I8CZ/36sLv7jwrgSsAorW3l4Y7R1/B2AiAJIDVC9aKsmHqPBiOyzfgHIHcfhi+6KOYPjbUqNyWImw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjouPEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeSQ/+KSKrcVhwS4hm1gwHmw66fMdxlo6Io3AJNNlS9okQ3b52hgue\r\nLrm/MGBezX7eBlrCpRbE0/y90G46iIuxRKOJzAczrgPC0o3qByrZbAqHGokv\r\ndAhofdM/G77NK9N1eJMhLpVhSCCbBMf1gArVSDXqcLTvG44XhphcPfN+q1Lx\r\nJ2Z8Ia94CSVC609Wyrca5TJyeWv9XjLnlWjyDUzq/OGE0zBWJHYQ2/VWyJ6u\r\nleZTj69SfrDEmV8v/C7wiyNv6gFJiQ6zmN4A7nhMOiyygAh7Dh8TPudmRzMd\r\nbV7xki2hpg/Sv31TdtHfWRlMkSRjwmqe7VtTSXy65UuzHj7nIgtGtcXk+YI3\r\nTknIvZ9TkYyT8unJsTejSrObhW9e32nZENRcICr7PC8bGIyG0HzHnYBRshg9\r\nCoZStFgUmE/OE2yuu/Ge/xFlj5UWyRNWN1/lyGrv/+JN5yPXqk8p5YwmdwrF\r\nul+gy6UnZzxL29PS2r+vSwmty0keRJBrBgvbzNJSQQVitAcFwJPnxLaCRnYY\r\nIMyXmvgw4gQxQuxHasKPTl3+SuZX+vip+rfdQsvIOBlkyqDdsF9bkTZrT8lr\r\nJRYqeoVxi30zCU+3lJFKv0rdt5/mvzHABSdzNAikZ3YL+TSTgVz/TxlwrXhO\r\nH6w4QB+Lqffhd6lKqpIxeL/gcCmjV5WNELU=\r\n=OKh0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221221104434.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a81100def975f8aa78c6fc77bd98455b/chakra-ui-system-0.0.0-dev-20221221104434.tgz","_integrity":"sha512-+LaJ7zWpNQEAI0SZAItXTEHb+hlDhHnV7QenAzNSYXQRzi4iUXp5mwZqpDP0BUoT/lmT6RPFic4U2yDdfcwMYA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.12","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"2.0.9","@chakra-ui/theme-utils":"0.0.0-dev-20221221104434","@chakra-ui/styled-system":"2.5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221221104434"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221221104434_1671619524633_0.8303396717961153","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221110721":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221221110721","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221221110721","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"df9453d21457b5ed0b9cacbc0947749c8f547824","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221221110721.tgz","fileCount":6,"integrity":"sha512-waFRt4/xcDPQ9iEvT9PY6g8uJRhd1z0vz5jHmJXfed3S/IUCsXHQTglLsthgHCupyVRN0bj7VKXkk69yCwpc4g==","signatures":[{"sig":"MEYCIQDBLqdB+0WToOvbus7WpGHDw2iX0Hk1dy3JJXkA4Nx7wQIhALh8XGUet7192+GpAb96ghWST1NsHxmSdJU1feaMWqkX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoukoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorvA/8DDx56BYdC/xsEXtqwVjtJJ/lRxHCrMKjtKPXrhES8v7Q5UdG\r\ntEjaJP85TU0GuJiYrnHWYtp56mWPxf2mOVIblxZwvAvxOkKZkB/1eYH4rgqZ\r\nsVemiUOsDW/D3PyeSrftTy6EGTa3mUsLx5G0woU6CQFkYL33WTx/IBzv3A5g\r\nx0rgM4NXeRiTiPHBF+BbXXVH3IyqQ6QEo0QFfBei9kO2f5ixL3XgQphZjG9O\r\nZbnuQ/xKs278s5y6zTTle2SA+7ZlFnzb7QdmhdzBOksgfxp0X8+ry09fSoir\r\nVwQk79l0uazM0Eox0CTwU01fU3oKHDUb3THnAtf++lUMobv3fL6ANBuyXEzZ\r\nh+AORBvKQPGjE3kxh4CxwBBIFTu8TbLqRgFKSrBm7TjMFyoT8rFJaAziVeke\r\nr1wDswB7JTb3hs0EmcsBc3NbzdJfil4d8Br91cb2BX648KMcM6lnN2GgehKZ\r\nia8oQsjN5Y9djuI+vQLUHlJND0sW5ZvQ1uuFoaUjs7yXC1z6LQ6vy6Lv0xNy\r\nznxm+ca19CIgs4anwaN5fMvynnljS7yl2WvjISIB+6BmJSq2fUy0z1XJYzAX\r\n7kVRcawpMlg9Kau9iosElByt8lq1PCcD4GEckf2ubiZmO6aeh6bg32ciVjoq\r\nvicLyAS2dUVVE/botJqGa0NlFJgR4rvCI0Y=\r\n=hWsd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221221110721.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e3a6585182ae93d3e1f06a744d8e0736/chakra-ui-system-0.0.0-dev-20221221110721.tgz","_integrity":"sha512-waFRt4/xcDPQ9iEvT9PY6g8uJRhd1z0vz5jHmJXfed3S/IUCsXHQTglLsthgHCupyVRN0bj7VKXkk69yCwpc4g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221221110721","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"0.0.0-dev-20221221110721","@chakra-ui/theme-utils":"0.0.0-dev-20221221110721","@chakra-ui/styled-system":"0.0.0-dev-20221221110721"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221221110721"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221221110721_1671620904544_0.06466201381791259","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221133224":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221221133224","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221221133224","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8e813cd4b217711ab8151ebbf229a67c722e1064","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221221133224.tgz","fileCount":6,"integrity":"sha512-fRHbkCNi5VB6j7CKGMAuHU+Dq7k7J5EPjUmUYfjKDnohCbPCVnG+QPWPspboXaPZ2ggM/WgmA0QmK0uonNepxw==","signatures":[{"sig":"MEYCIQDDbGrSTZoi37kaF50GGm7nwTSiCSZPRk/7MyaFDG8JjQIhAMmikvC0nY78LwyP1qVEmickpQEGnPMennrOrIN29H2z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjowshACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9MQ/+Kn97A495gvU4w+nVmzKnmEaizX8jqrH8znX6kTQeSh59pQNt\r\nFcdH/7YE6E856/GbBm0ljAjNamvndRgaPZUh58fTanNKW5ZPAN5Nnfk+I5WZ\r\nNC/a4+I/FRtN5l1YQM1WoXcBRH3n2qwFp6SDVxdicQ6+Sy29Zz9bHlFJKrWB\r\nE2iE9bErI3foPIoGatFvOt68ZjRxmL8QKAMDWFg01zzIO6qJF2bu+BkRQtQ5\r\neQftBuLv3YEiDWEYgNdr9HKOQDJDwHnw1SFcFmKaHlDxCvvE9nyH/Os03wCR\r\nGO8kGIz3RZpXREPErApIOewhGSqpuCwCgdU2RQRBY/hzTk15PU5ohQzUFMD4\r\n23xxJpc1+yzS/nxII4h4mDhhtqOx+ZUuwrYETnhDRc3ZA4XdRT9+vkjk+KA5\r\nXz3SMsmWpWDSg8aRbJMOFr2zEzlKzTFkk+HtLLlEe2PX2zPjHIFELTNCiiKA\r\nqG+GHhZDukxvMxc1xur+B9lW9pUgu/QHj5/ricUwJQHfQSi8zNYn+TwD7Wht\r\nmCJMKyYRejAz0tASp3NtArYWQHwLYsyqMTYO9c05UQUA6LI9G2XQmPMuH4Hr\r\ndErmq3myUjhc0+0s5f85o6jT+YJC2hgghtqfL1AEOH/x6LVP87iiSzzuczCr\r\nAHraFMNFsIPqoXYlWsvPZ7auI9UEniQ+dzY=\r\n=1ck0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221221133224.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7dae868d5d34d80837086442dba1fd55/chakra-ui-system-0.0.0-dev-20221221133224.tgz","_integrity":"sha512-fRHbkCNi5VB6j7CKGMAuHU+Dq7k7J5EPjUmUYfjKDnohCbPCVnG+QPWPspboXaPZ2ggM/WgmA0QmK0uonNepxw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221221133224","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"0.0.0-dev-20221221133224","@chakra-ui/theme-utils":"0.0.0-dev-20221221133224","@chakra-ui/styled-system":"0.0.0-dev-20221221133224"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221221133224"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221221133224_1671629601096_0.42435505672565643","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221221152939":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221221152939","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221221152939","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ea582f8ac2d47773fc5fa072cc0bb36291aeb8e5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221221152939.tgz","fileCount":6,"integrity":"sha512-K+MzsXNO2wJ2ebkF7SkwTPOfvppZrsb2zgRDCFuBk48NBfi11Ul94JwppCnP4ZJxiY1PNRCdNKMnfvFoT5OOGA==","signatures":[{"sig":"MEYCIQDZ2V1oXKElCgHWQOhb/I0sgVr+xN5R2spLzwvnEBVdWQIhAIM9UPW7d9S+W8SLR5VX1qgv+17jxkzWPY87tKaDvpkS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoyaaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra+A/5ANuLen0Thq2HyJdSPKxSziZXied9RYpulshYcIDlx0mJDbm2\r\n01jvxEtHYaNafQZPAUxwG5BwPbLzksWbeRjLRsj+vsSnYa50kMWaN1sg37f+\r\n9KLtTAOet+QTwP7eW+V9nBbi4zsvIuWQepF03lo5yZTxiVI1F9/Ffiq4IZ15\r\nkR9SUWzY/McNFNU6d2DP9tp4nZN45IIOfVlXUW2EVX9QSXXjh7dVkQaDpScB\r\ndX6VZ2KngN3D447W08RRLhVZ+YVziK5d1ePAhf84Dgct2fEd9FV86NNyzFIr\r\nUD3Z+uVOGOmrqeFYKA4RjQ5h7T0YfoM6/aSEFRwg59bLMX0Qy1rzlTVUNNUO\r\nXJMVXK12wALNv/wbWAXBydWq1o6cxaE3bqeTc0ZrF0X2qSaGtmWvQxH0C5oi\r\nUM0XYrNY5OlFnxjfB1e3O5QGGDMx7IyJ3SrCdmoVS2kKxOhMCFLEF8jbZpdH\r\nSiIurMKdLNY9tuCf+7rcOSI5AyMFnGmR3Ic69HKbKUtjTXWLgGC8deKMuC9P\r\n7saF4x2WFGLH4TJX0+uXXfw3nwgJXiwRtrxZDOQSS63J1DBOPjf7hZx2DpDv\r\nJU5KwHq7mzjpo9x+K74BltDgsUqQys/L8Fx211bzIKF2ySpGHF4NWWSY1JKy\r\n4JknWPeoLdq2815W3hm+eRnI6VuE549UD0M=\r\n=Dqit\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221221152939.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d86f01f2661cb7f8bbba0b53d89c0e26/chakra-ui-system-0.0.0-dev-20221221152939.tgz","_integrity":"sha512-K+MzsXNO2wJ2ebkF7SkwTPOfvppZrsb2zgRDCFuBk48NBfi11Ul94JwppCnP4ZJxiY1PNRCdNKMnfvFoT5OOGA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221221152939","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"0.0.0-dev-20221221152939","@chakra-ui/theme-utils":"0.0.0-dev-20221221152939","@chakra-ui/styled-system":"0.0.0-dev-20221221152939"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221221152939"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221221152939_1671636634512_0.4465559663382388","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221222051548":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221222051548","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221222051548","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3e05abd985eeda2d6d65c83a706384731ba35d7c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221222051548.tgz","fileCount":6,"integrity":"sha512-yOsjNpxp6/pC1E6eGFctO/+eQ3SE/sEt9b5bbFi8MzipOnrMN7X4cEExHDWILiOD1pSyQZYuoLfupaM5BQ3gRQ==","signatures":[{"sig":"MEQCIBVMvLfmjjTFwDc5hd6XYkSBlbizuNFAsNzOOGjbPm5OAiBw9EpmB0TrSViBiURdHrsGwc5U8U4VnEGgEsND5rJEgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo+hAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8BQ//Y5807F26BST7V+ADO0kdlTpXI1zpUrLiL/KEtIVTaWiTUUhx\r\nCnk9udc6/L0gTeTi7PlUiOyRM+kjqSondanSO86DkWNdm/yj84s/90WEIHjD\r\n8YGgvnHijD+65ZBT6sy6Vs8NE7ve/5GzwAIYFW8J2vUobJCKyPNuF3eAek+x\r\nSDkrGv+0HVfeSHR08OsBIIqC16X0K+JMqza0jz3qrfb6+M/J5dx+bTbcNkml\r\np8BexMC5HMVo15O8EFJbwwmOYRwja6Wq+DSWTt7ZQzEdu97AHpagM4T7L7m6\r\ngbzy2BqDAFnyjnj8gpNW8cBNrskwmL66gFL7BdeF4kC6zetvq6gHcACcW26q\r\n6mkTDQyKiLESV1GOzuqI2P/Jw6wkxDCyb1R+VwVzGOI2ACo919CLhklKmDh8\r\nbWIDGEw7OZxf96H+80cBvKSg8M0KVnz0i84Y7QyDK66B4RIVeBsaeaXzsXOf\r\n/HljL3a6mmljGiN9UtNpx9vnGdjiPKS6zXozzKVK1ye0k6mg/n1dg6E/kOSp\r\n47bBlSWeMnnSLKVDt1M/u8PNP+giMAMoUKHCEdF+1szcOyoSYZ1H///CArBW\r\nEW2dQzHY2AzRb5No5YP3S5/BTOgggZhxiSNBsWNTF9GuMwDn8YHnKAvbnjgP\r\n4MzSDhZJvFQe8KRH332BOW7LLPkJ029q+Ec=\r\n=BIZF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","_from":"file:chakra-ui-system-0.0.0-dev-20221222051548.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"JSX=1 tsup src/index.ts --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"JSX=1 tsup src/index.ts"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e2c399224d94fbd44265cdc51d3dcae0/chakra-ui-system-0.0.0-dev-20221222051548.tgz","_integrity":"sha512-yOsjNpxp6/pC1E6eGFctO/+eQ3SE/sEt9b5bbFi8MzipOnrMN7X4cEExHDWILiOD1pSyQZYuoLfupaM5BQ3gRQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221222051548","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.10","@chakra-ui/react-utils":"0.0.0-dev-20221222051548","@chakra-ui/theme-utils":"0.0.0-dev-20221222051548","@chakra-ui/styled-system":"0.0.0-dev-20221222051548"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221222051548"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221222051548_1671686208540_0.977110980149541","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221223180742":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221223180742","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221223180742","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"735d07fcfce9218b9e644b25536221d7737f15b0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221223180742.tgz","fileCount":45,"integrity":"sha512-pvKQj973QeLissUn9BJt7Bpe3N79XqDDz96KNUGj7v1FlrlWLw4IqlOPR305MkJfrnQOUEDuq9brTptGX/cV2g==","signatures":[{"sig":"MEUCIEZhwa56l2EufYuBYTl7XDipPDOckIZ1WMc5JgBLg0MnAiEAtOfp0kO3e/sOwce2ANhCWj2VbXvXZONcad8+VKIt1bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpe7GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFnxAApPYnxbyGe5LRS9ELVYWzVW5OiDFsf8kbRugM2pvIhVnDYAJG\r\nlY9dxMlXSR+vw2BSsIun8KNOdQLZGxZYZxRoMzN4Y7QWjtBQH2b1Q35b17IT\r\nI+eNHx544SQRkRq9BVtRE4bt2gN6WoMYVjqLxZWMY5E4pL4wcFoQFs7VnHgV\r\nWiF4FmeDLqbsdqYBxpOYOoMcMFTyu7VSzP90vv/rLKFeKlQwx0s3iGU5TcK1\r\ntX+UCF1ObCcRiyMhdtK2HyWrgMVGloYlyVore1JbjNxexHykSOXbafPkGKEB\r\nXFOZjHEkOmmW4lByMeoD5SRcgpr6w0BBSpk6ZpPMzXJp1iCba9z+qA6hGBq8\r\nGyz2AiBGfExLkjltF6asbk9PD+ouz76qfHUcDhVJydSzjYSMSJcIKqONJ3kO\r\nXR0j/kHh+u81O9OaIjGlSZaC0fQ3smtgZPLm+8E71/FsJ1bgBMG6Kg85bU/3\r\nwyK711MbSlyvH0kKAsnEP1gqaeA5lQEwaNoQ3R1cHSjm4EJXV+DV0A3b2md1\r\nmeE3rYhnJmjzDoXqT84sGJTmKcHUtypL+NY9guoOJgtVLBta95s4A4Omcdo0\r\nnU5mC3Z5wUsK0jTYaV9XE7TekQPM2ttA2wH/ysFUCqPxAXyBKVSiJPuWzHb5\r\nGkaeVBl3JByec6Lr3ugR50PLaRB6SuvjqM8=\r\n=r8r9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221223180742.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/702fcefa1ddaa52a27066f5ac3b7510f/chakra-ui-system-0.0.0-dev-20221223180742.tgz","_integrity":"sha512-pvKQj973QeLissUn9BJt7Bpe3N79XqDDz96KNUGj7v1FlrlWLw4IqlOPR305MkJfrnQOUEDuq9brTptGX/cV2g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221223180742","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20221223180742","@chakra-ui/react-utils":"0.0.0-dev-20221223180742","@chakra-ui/theme-utils":"0.0.0-dev-20221223180742","@chakra-ui/styled-system":"0.0.0-dev-20221223180742"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221223180742"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221223180742_1671818950396_0.8877605400322861","host":"s3://npm-registry-packages"}},"2.3.6":{"name":"@chakra-ui/system","version":"2.3.6","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.6","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"96ebcc56fbcb16c65368e1bf5378fda354850dac","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.6.tgz","fileCount":45,"integrity":"sha512-pKr+CKScmh2MjtdoQT4+u+4U8y1ijQLYWBwTXz7+l/mAqYoq4CnQhkona+WNDIdiZhzJCn6N83ugQEf2HMwmmw==","signatures":[{"sig":"MEYCIQD2I2opkUhgmHlnnf3KbmQ6lkFubF+1bhOE3JMELs2gigIhALbe/MOrSgsxuaWk076T0NEN4x9ORa8MpeJM7k3XSfcg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqZ4tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGbA//VWXNXEZQ0/nmLhbKgyL6pt0bvotw01H6CMEMtghgqe9LVF6f\r\nXA3UG6AkTo1IEvb5G8amtDEErtw8kQ2yYAOo41f2bDL59j+VPPgibu+At49b\r\nbUFy0cPjZDoLx3OpCg3EwwuJg65umxkCuHdpILSQJWvdpISq16zBTFh31rpD\r\nQgGA0GiWxhGGi6oQ6h3flz5MoyjNK359vXdsgIUtIlQ3F3dJ9eFrpAQC6HUq\r\nU6gkef0ypR/7pch5MIZJqqLHM3WAtxAOS4u0Grz42rNtAp9Xjc4ty6W5JEye\r\nKnCFN4w+o0IiUfDLfVTado9/cKZ9Vt2ry/AurnIZwX9F4gbb+cQm4iB63bb5\r\n8pYCuS5d8iP9wOFhOF2nHIZyeRBO5+lK645rXRvXW4S3uRliDf2eWrmPL78K\r\nofTass8l8Rz4IxTM+gT3M/iq5qjtdyuqiQn9k+Ju/LAwSVkECr69npB50fq+\r\nejJRQ15RTbwYqZgDuHAM0JEiPrAjRRvHwgSYZspdMDMYliWTXRIDy8/GavbJ\r\n9itbqdc/+DQ6jwFTDBsC5x954xLPUmtSynazoKFKb20jfVcN4YZEg/CENbMn\r\noHbWun0j4gfHE4N+yaQ1Q34KD9IdxehSQScVkFCV6pXMA2d8XsFjvTtK31Oo\r\nqKNbJk3KedRTzNQmhLr1ZEojhanG1Iw73ig=\r\n=Eutc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.3.6.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/92ed69620f91f5b66b14d4be36ea9fc7/chakra-ui-system-2.3.6.tgz","_integrity":"sha512-pKr+CKScmh2MjtdoQT4+u+4U8y1ijQLYWBwTXz7+l/mAqYoq4CnQhkona+WNDIdiZhzJCn6N83ugQEf2HMwmmw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.13","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.10","@chakra-ui/theme-utils":"2.0.7","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.3"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.6_1672060461652_0.1622734603781586","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221228075207":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221228075207","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221228075207","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4e3b7d22520ceb510d9cc0d173833a99232dd781","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221228075207.tgz","fileCount":45,"integrity":"sha512-uK6U8eVK8H2DMJUaplZL0XJHzgpuZBTOQ/lP7mLGA/wYYf8NeBNdNQ5qxrkH1PV6DTfqualZcj0gkEuCJXtlUw==","signatures":[{"sig":"MEQCIDzNHoEqp5n+EnDIKCz3KTrv8J6D+f1yfCp6pBmnL32pAiBzfBXehO+9YA/YeEY0TuugqEUWhJo4Zymsgk2BFHzUpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq/XWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpirw/+Ojnfj3zqtlpkFp3NuTiH75ROZkyXx1/lnQi9aPPKgWRVf50Q\r\nVqZ7zyh4JIlmvisBhNJFdGuJdxLpn/N6gvAf7JudWJxZTku/gYY4UPPwWl24\r\nvyYqB621ag8M7HhcvO1SNRmr8T7Ow27YjSEtaAlSu9p4A73N7w57wADhucD7\r\nH3wCmxldxUh/2MDPSMqV3rg3tM+myUkMatySTqEI8xq6W+pc93Jkte1yFo8D\r\ntKKWzcrLVqJEfW196ncBDZB7vD8eYvRzpf53O5aMaxJuNoycy1YxHy6IocCs\r\nS8tCg0r5uiiHBYam1GAoN9Xj2sS6oh+TM6Q6qtXAnEITPH+fmxs9qUPrZIDK\r\nSejUxbR1gtabkgL2EyJ7O+c0sIrA8QvNVhxkRUkzLTaTgBUeMsV9E/G1mYto\r\n/q2SlFv7HRgbi0qhAKpl8b8vn7S6iWy9bWEUQgL2NOQQHpyNiid9ZMq2GVdj\r\nBBf8nPyMktMBCVpOTsvmjWOfSLhcHD3bw5IQ9G2t6mtyyHLb9FZsclRCs9T9\r\nlRLI8Jm/LkiZ/uBvoCISxCG6JiNAKzJ+bMzMmCpmxh8XRnerVf0x/F7kUFfc\r\nX5xpkiYoyXCdkBfSRE45qDZp9hvoZzLNGKu3QkERtxj2umLssu4MiQo9nmr1\r\nOQelipGzZEcLTlfIv9O4Y0fyOynLeTuPYjs=\r\n=S/tp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221228075207.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/72bf2317237e29d1752a5a77d39a3ddf/chakra-ui-system-0.0.0-dev-20221228075207.tgz","_integrity":"sha512-uK6U8eVK8H2DMJUaplZL0XJHzgpuZBTOQ/lP7mLGA/wYYf8NeBNdNQ5qxrkH1PV6DTfqualZcj0gkEuCJXtlUw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.13","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.10","@chakra-ui/theme-utils":"0.0.0-dev-20221228075207","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221228075207"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221228075207_1672213974348_0.9759152916569152","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221228081854":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221228081854","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221228081854","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6214268aa399c7ec53a437c2435f963202359bda","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221228081854.tgz","fileCount":45,"integrity":"sha512-RqxfseIYRKKnuZemL2h1moLRtYoq4vN4JPV7SIivk+BmiwV5ASAGJx031BZJn05HECxoWyJ6vIF/t36RbOXCqQ==","signatures":[{"sig":"MEUCICItkGC3s5cCRJGhyp/h3DwgZwGHGCxX8daUNIzaZEcAAiEA9Yc46mt/FmBSwW2/zDFsGZ2viEl+1IiX/SVwH2jgNig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq/wXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohsw/+N41WbGu94fqO76nKpEN+I9PNbPVTUBMwhzeZNjfYoYTW9AQd\r\nG7d8OaYjXUEyeIXPCDNpkwhnw8/1TQyh+7ivV92d18BH055rEU6xjs2qOXAr\r\n9oCw1v5bBKp6EFqXrDVD95ZnJi61WhgcFPRSGAybDCmu6BgT3zEnWFV5oKPL\r\n1BkQG/Oi7D6CRcu6M4OTEqvKrWjbgeNX6Pqam4Qdxhp+VDKtLUf9Zp7wNtC/\r\n0PkTc6Jb44ugQgDfyq0b1sWj2hgdCmocJantSvZXZvG+Xj5jhweGmJewAlDT\r\nrNlJdZJtb1Z7A96cPtMzvBBLa9KD2XIZSPVBA6+1YpJqrXbYXRxXl7p2vYMk\r\nATqsb0QCEfxRf/KojMBn7zE8h04IDAnyVMq2JWCbTVEQ45nXqNzBvs+WG2sk\r\nCNomqZH4fE3moN0GRMuiT0PrbAL+yd4b0dydKO5rxOaWIIHgrJr+L2Q3xkBL\r\nNx9hKu+wPTKzZBtT5PgAq8ezNoEcyMqra8CHDzOVAMF9fq/3kLnYJMoLskLo\r\nsgUChAZpSC00TPVMWJiv/Dn7S2t/Oqf4JKZkY8ZTm1boPfnnIv+vvIfDuLb9\r\nmQe0m7oha4qglQP4Gu4hd0nnIGrPDxUdf7mh4gR2mRJLnSWsOcinsh0Br+WO\r\n6Yb1mK3OrldrGoL7P5bgkcoV2yUFOldo6CA=\r\n=KXAV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221228081854.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/87853884cc5bff3b93b3aea9102e59a8/chakra-ui-system-0.0.0-dev-20221228081854.tgz","_integrity":"sha512-RqxfseIYRKKnuZemL2h1moLRtYoq4vN4JPV7SIivk+BmiwV5ASAGJx031BZJn05HECxoWyJ6vIF/t36RbOXCqQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.13","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.10","@chakra-ui/theme-utils":"0.0.0-dev-20221228081854","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221228081854"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221228081854_1672215575061_0.7453208540515863","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221228093251":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221228093251","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221228093251","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"34f92a3f6b0aa095015db641ae651a8871d183ac","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221228093251.tgz","fileCount":45,"integrity":"sha512-rT6yUB2KOqnhm+hnSN01hq2YKs5vcOqwg1elnKf/2RXYYXtp37YKLGMEoWLQRDYekVs3SODXl6BS31gKAVkbEQ==","signatures":[{"sig":"MEUCIQCOVY3Rb+CjZBy/HeYiE3N1FNb0lFr/YhTFUAbo6aojXwIgOrV47hTfxktIn5C5OXyEtpazLNy1ICBHxcg5LvSEoaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrA1qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodgRAAoIfHXJl7d30ZF0AreV/rZruj2Ka8GZcUxBVrASBSw8QZ4yo8\r\nvK0me8KjXbZAhrqsIj5mGSoOdR5aoVt0cLHDiQRkgRiWRVN8+eXGtWE2BP/G\r\nQ/iQBqcsfPZSULg8y9jogcCgWlWFqTUQTvkHgalKmK8t7xU+DriwYhfPBFY/\r\n7cVhEVN8D6kI2mVhwaqLetLRYIZAkT8rYlJf0WqdlCi4prlRVjBDkILBNsxf\r\nUDpERd4iD8L9blFwmHFnDn/HhAa3VxmlMvcvga5MHCVT+CNGXRST2FI1DbeL\r\n5oaWqAn/r7TeF0DMuD0A6hbOffm1MvMjKYKUFjmMq+/5wjM1kVfYJBNTNIwe\r\nqijvHgAMD8hYB61mhpR7iUBVE8R25wIKknBO6vvsVqZLSEP2B4k6jlVFVo5t\r\nXgH9V0o8hlpOlVvwDqJilK27EV3U8vNGmXLeAgGmAM2nrtQVrfs26EcYkUoZ\r\nBBnqCQDWirfLBAkGINc1CNlVcT1+9eRJAey35rCqw7npQYYCAPLYqnl+Toh3\r\nchL0LRByHkuJGYI2fC+yZw5Dw2ZQSixppd5tdKXj6HRouFd928Ek53xRCG1N\r\nMQp4M4bt74cvZXqsZq+GJvgvrHEYRIzumbF6W7YUX0G//czzHHBuPm2SwNgs\r\nK+G87gpaOJFa8o50AzTvsXFJnf0dywoZB40=\r\n=Hb0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221228093251.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/bffac2216147e8e89a963561b2015471/chakra-ui-system-0.0.0-dev-20221228093251.tgz","_integrity":"sha512-rT6yUB2KOqnhm+hnSN01hq2YKs5vcOqwg1elnKf/2RXYYXtp37YKLGMEoWLQRDYekVs3SODXl6BS31gKAVkbEQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.13","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.10","@chakra-ui/theme-utils":"0.0.0-dev-20221228093251","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221228093251"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221228093251_1672220009825_0.7397612631927151","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221229141945":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221229141945","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221229141945","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bdf865e9791b8e103646b07753819c4441463da2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221229141945.tgz","fileCount":45,"integrity":"sha512-cDa+7FizOsCMd74ZxOvD0dDfCaYbEQM6YOxe9+fz44R+TtRj3Zc+BmrZMcqncUYZ8dzLoLm6vmEWekgP3DbQZg==","signatures":[{"sig":"MEUCIQD4vX6xvjiRdga7EKPBB6lU4uYd3G9gGjM4Z+bO+JWQFQIgEulCj303yulPrF4Cum220fYhox3tg28GeeqWnajCuII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjraIoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5TA/9EXEtIF3jTG4Ib2EN1iSov7KVuycGc2Qog/7KIC6ckKTip2z8\r\n6wCxpGH3Xej5/fXX38gLYNV1pBOCuhzJL4h2vlYZDOj+iyEDsv4gfrYEGn+4\r\nzVJklmuNtssM0ipDusnNBBNR1FSuvA1fuYFqSARGYASNuitdnRbyyXw6Gi6X\r\nHolewfl4IltQ08epykVI8irLaDPAM8lY1ehivf4ijrmmESnAyMhXgXqJLOcP\r\nFhWkOCBGuF/cGIHu3l+TuLxW8w+ZP5Qp2dK14KvdR+qwHYnXs8FXiuUSGUdA\r\nuK0hyUvYUr6xSOo89WyuVwQNqyDwqI4qlWLlLyQSsW4T18NFDzqZFQS+V3Jt\r\nHftqdjthFATp7feR7t7Ua0T35Djjkmfm1KC04cMuCfKPA6ksAo64VxyANllB\r\nGzmk8OWvtjG4/TyHwdwCvS3qtPqM4uaZ3CzMoGf3HTgDRPHGEQt5sT0/1Mh5\r\njqiZZ8BamZJfOUNgWzcpfnwcdFMhFhztV11kOAFc1bCXUxaQZN+m9mvYPFSm\r\nU1MtCvXuxJXucHBaupQRAO1+tfgj3I662HmVLrOQp2OYYuHab47gXyTAIokn\r\nzSczLvtDWFVOQVnUewJIqfHb3leulhaSrCamSZRHXiFLg6Gzmxvx4Wgn/KjA\r\n6Skqu/jVeRPdgUEP0ctRLaKuTiq5nK8pkyc=\r\n=+sVq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221229141945.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ebdfab90c8255e83476fceb4354eb11b/chakra-ui-system-0.0.0-dev-20221229141945.tgz","_integrity":"sha512-cDa+7FizOsCMd74ZxOvD0dDfCaYbEQM6YOxe9+fz44R+TtRj3Zc+BmrZMcqncUYZ8dzLoLm6vmEWekgP3DbQZg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.13","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.10","@chakra-ui/theme-utils":"0.0.0-dev-20221229141945","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221229141945"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221229141945_1672323624324_0.06888018668291163","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221229143302":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221229143302","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221229143302","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"161748d512576391e6305cfaa250c1c9608957b5","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221229143302.tgz","fileCount":45,"integrity":"sha512-C/zXAnM1eOujUyeQIDjlAvqp7UdAzD3ltHxmj50UtF4WHf5AZAxsxSw0o0D4yUPZW64S88cIVtjHbD4598R9lA==","signatures":[{"sig":"MEQCIAhgpjlzt7yvxtyD0ja08BPXLW+XbR31wPVs2yMCsc7NAiBnwatnqInooXINiP/tvjeMND9ssMr1MjwLWxwcfP7L5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjraVIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbbQ/7B6a/b8EnoLieul30QVEftdxKBHa9Zc0k8QhfI8mHDdeCX9qY\r\npg6J2ukGyA65jmhLr34YEXEn9QNHMs8DmAfNcXkHTeX9oL9y5hCj5Ijqu5O/\r\nXsed3wLVVNxyZz94c3UwS6ldrlEC1YsYaEJMebCj+kUMJZx0UHmFRP0N/fRR\r\nZLwc0V2j2sDE6dSfqkR1KFEHbZvnzC/8eJC3y68C7TNXOxVQlethAsfgxpPe\r\naGwIRoY6W80y6dnZJ8zxda9eNtQ1eIjwrlQW0YZdBx6PhpANIY8V2i0NO6DB\r\nr5NzClQk/CjcIX3oMKIxrUA3gcIb1+qj53xivVmEM8KthJ15TAJ9g5Ny/7mn\r\nFvessuGsNso1vzCV4nMv+H8tqWolqu0eZZ4aNpRZg+m/kxRqgUv3fp0fpGo2\r\nyYCmg8he7RctqyjLThCFvh4QWx5LB/1NR5EUT/R+UUdfSlXk8SNxGLldcFpm\r\nF3UdeU+Ie2PnL5U7iXbCAxmy5TFGd6e11ZFUM136X0/Vw8BSaALh/Nh8XexB\r\nP8Bis7WAsrzjAvttOwkPdPIaHPdbN5wYuARgFi9sopXMLvM2PIIN9cisvh9Y\r\nM3WjBKLMZQD4tpO8Il7G5Vn3N9cO+xF4Xj4C4JuCwxgEZHj+rxesYXhvu3O9\r\nQKjeOexOBwvtUvDDzlRfeiTU8jaofNLNQwA=\r\n=G/dj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221229143302.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f7510a10729c2f5e6ecd1327d814f696/chakra-ui-system-0.0.0-dev-20221229143302.tgz","_integrity":"sha512-C/zXAnM1eOujUyeQIDjlAvqp7UdAzD3ltHxmj50UtF4WHf5AZAxsxSw0o0D4yUPZW64S88cIVtjHbD4598R9lA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.13","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.10","@chakra-ui/theme-utils":"0.0.0-dev-20221229143302","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221229143302"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221229143302_1672324424692_0.31775331528877837","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221229200356":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221229200356","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221229200356","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"179dc8a76f4b0c7129a0e6316049e77e226a4491","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221229200356.tgz","fileCount":45,"integrity":"sha512-jgbhP5qwKxYc7Q5PWz22+PrW3FduxrC2lZtrnKxE6cUNp3A99bWgdRdYymiMdz6wywv4H84lIkB3jw0GPSB62g==","signatures":[{"sig":"MEUCIAUw+/f5ctbTOmP9UoD95C3aCNefoEFMbnujQxPNdccuAiEA1e+7dTVDomNT8t6XqoncfpW5vxkLsCpr9eMKxILHC8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrfLWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMPw//aKIbGu/Pv6+cStRSYIRgf2G0U89FO06KuYhq+GDjSz+JhwVv\r\ng+JMvu6t/Obz0ewzanbT0/IVmUbKAJY2j1iJSi+294f2HZPs8aeQzGf+tcZh\r\np657c57hJzFd94Y6HmhB203+Pkc+E65Q3euSAZj1lUcOOBoPu0eToN9tTIkH\r\nS7HdJwWgM+OJVBJBdO/m02JRhmUU240hm7Q/3t3q41CZrnCAtwAv0pPC7whS\r\nf6iIPq/Sps+cHjLHe5s5lDGakkcu8A3ofDg460MY4vYYfjRY6xzZZZ5QsVDk\r\nwL4wTPRAc1GWblWeV+Qnmom1Sp7/DFNAftUoaSAICIdJ+OXHfpb+UzaXjahu\r\nLGmv5S3MR2L4S+OkPnfCD4lX827DNL6+Qa/fJoNg3XXdim8PYIgPngJ6Me2o\r\njrqbo2gIerM8Zxb5p53x+ylN6cu2sEabggs1PrdvKhemxS9BdYo5dKgpjfow\r\nKDcyGAHw0Zk2D7WiW1wL656LMKyn/UA79i8NCnnaPlaQBRE5ZLWDsVwYWv/8\r\n5OzfgSsqu1vvdY+0Q+s0vTUlRAMhQfNvK5QBylASdToh8R7s8isLpZFwGVbE\r\nB6pKnucMxoZjv7ddEH5bRBxipm1FUSGWD2jCqMzMxD8dy4PLe2GRfyUEsmFh\r\neW0UGo4M4pM/RaYAkkB0vFZcR2sNUlZxpns=\r\n=QAb7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221229200356.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/bd40318856e6435ac102d775cabdabcf/chakra-ui-system-0.0.0-dev-20221229200356.tgz","_integrity":"sha512-jgbhP5qwKxYc7Q5PWz22+PrW3FduxrC2lZtrnKxE6cUNp3A99bWgdRdYymiMdz6wywv4H84lIkB3jw0GPSB62g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221229200356","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"0.0.0-dev-20221229200356","@chakra-ui/theme-utils":"0.0.0-dev-20221229200356","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221229200356"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221229200356_1672344278805_0.5635870017162012","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221229202029":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221229202029","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221229202029","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9e8997b02d9f0b0e9e58e5d901ecfc37a3a07cd4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221229202029.tgz","fileCount":45,"integrity":"sha512-Ln7ThTeS0oMPCBSOYETVZcNTiQxsazur51TGF6i6Z3ZusNAU37J+5Homs1noxdDVdybrCUAeVMCZ8HTVMT3ddg==","signatures":[{"sig":"MEUCIGMAzDb5Hg77BVZYR2IP12LcjiSmTT/do2DZPnAnhDL0AiEA1fUm7w+AiiAYBGe5MpopdoVBbBNy5WtTnFHO/y4OjSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrfa0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXAQ/+Pp0aLFIrqwia2ZlUl4ARSwfpcvF0YGiBfXSaY+GB7//XAHB/\r\nRg+pSbeWMpCT9cts6DDJEzabHd71zL/jRyz5oDFRnt9gYyNLUeJV2uwdbxvh\r\n43//CS+k1M7EOHIzm/1zdIM3bqEsC6KVAdggImIXSVsb5BvGzoBrGi4uLcBh\r\nSzmLpz3BvZ97/QQJ7df+Y4RxF1k4hacb+noxjy/MpnOff0DOgWo92SPfOCUL\r\n8xJjHtQel5kCUHGGoHwfFe5RELQBwDuduEZMjN+sOpoKHYMC5KcbnpVA5YLH\r\nbM7YvWKG3rU1ED+jVZfB79dCWs4fRiz7jHHu2K/iv754J75Re2GgnPsj8mjE\r\nYtSymjUhImAW7BoXRNDfot+Fb7BB84OFJIMY805N0tR6bdfGZIz2mmG3BFAp\r\nrBpX+A4tcm/MilvJE9cMEGsiavJOhhETJtgpDHWZy6xBrIe/HIilywnfzCKh\r\nKr+ESGk7QNh57srhpFqGHEeeCXbLGfX4L2v3usVH+T+bWWZj2pUkNAyeS3lW\r\nyDXlNKD/EZpvEFQUaW8awizTGW1G5nb+1jQ0X1E/i9zluA71Lzzx4IlncCAc\r\nL/0QyvFD2P5JKcX1Zq1i1215Y6MQEZnVxjzXpZGr2W1G+r7o16/5G2066p/s\r\nJFWKSLazbtTZkTJ1djB2Hr9psqOjaerRdm0=\r\n=wlFd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221229202029.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0c434ef1788d805aa6ce73626c63fe8a/chakra-ui-system-0.0.0-dev-20221229202029.tgz","_integrity":"sha512-Ln7ThTeS0oMPCBSOYETVZcNTiQxsazur51TGF6i6Z3ZusNAU37J+5Homs1noxdDVdybrCUAeVMCZ8HTVMT3ddg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221229202029","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"0.0.0-dev-20221229202029","@chakra-ui/theme-utils":"0.0.0-dev-20221229202029","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221229202029"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221229202029_1672345268381_0.42334317577711156","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221229203627":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221229203627","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221229203627","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"04377424d8e35898f56c359c1bd182dc990cf638","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221229203627.tgz","fileCount":45,"integrity":"sha512-qghs0OiIg5dpo0i64ym1GxkOCvdjORN9JGUmeSAhuZJqV11kHgZgWMaF1Ej67rgzgz1rWYxB/v0WrAsQpP67aA==","signatures":[{"sig":"MEUCIQDEa4+EjXuB/6cR/b4Hdene1Mz2qyELVRGzT5KxQWWRYAIgEvjOrCrXzjpdWWVWxNXSXJVTwEcQNZrNnL43RdPIKbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrfqDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9hQ/7BBr8DlimR76vGZI+m0apo1q8MSighP8kEhHjvynl7ipbtoz7\r\n2ZuCUB+Azhq/+nWQBoeECBScX7YdRsEZcSdRIUxswP0clk6O6qF6m40TngAu\r\nEGdAlfQL0SxjGUm7tzp6e7Vh415ZxQshKAbHVp9m/vSztd2a2dZGySfuroVp\r\nTuPgSQHOi3idLpwwCoZ/GrNvXvKlhqQnxTTyI4wTmU26ijjfkEJwvYvh/lCm\r\ne607fZhbY3ECvhJT8Xr5OVuGiDrYP1k66c8qrQvTWGZj7fSmdhjDOqMcMNyj\r\n7R+DEdbOsshncKzmlAp1XtVRG0NbY+B0cDK5g+61L/CcYTTIhQTkXmvBSOxu\r\nM1wC09NDyj8ICKd7bPmhMQXqyYhUAbA1IuFumQmf+Nn+W3dw5TcjdlG8zTn3\r\nhAocm78HEgSErO0u5kJjHucvUEcqlpooHSOi2TpiotKNkcHRg9Fab8KPq6NE\r\nH2F3qQl6vK1/fAN49iPxaJQOI4crqB7zVciiRjdDQvRNLTq7p5+s6cXaRYz0\r\nj8F2gd96ftPiTwaG/MtRC+qstmnTlMDvSnzUHPbcVIyCfOVbhjCHVeBMjKdm\r\njaq9/B4V18J66r3vAz60JULGuMIhznQq5klH4K5G7aPdHcjFW6zPYB2wOE7N\r\nHpqyn6Fyvev7mOqUpcPAOG312IN1UyLkrX0=\r\n=Eelk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221229203627.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b4fcc8908ac7d49617099905a8190ba0/chakra-ui-system-0.0.0-dev-20221229203627.tgz","_integrity":"sha512-qghs0OiIg5dpo0i64ym1GxkOCvdjORN9JGUmeSAhuZJqV11kHgZgWMaF1Ej67rgzgz1rWYxB/v0WrAsQpP67aA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221229203627","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"0.0.0-dev-20221229203627","@chakra-ui/theme-utils":"0.0.0-dev-20221229203627","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221229203627"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221229203627_1672346242797_0.7521393498104272","host":"s3://npm-registry-packages"}},"0.0.0-dev-20221229212737":{"name":"@chakra-ui/system","version":"0.0.0-dev-20221229212737","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20221229212737","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"aacd902686264cecf6422ac533f31c47a370498b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20221229212737.tgz","fileCount":45,"integrity":"sha512-wJl3PfAoNL1ib7DRYO4w0KR/+MO506GOEtG/t2oNFcg3oiZoYYVmeJiqFWuMwGUBkSWInZP9OVQvztMHKHu9rA==","signatures":[{"sig":"MEQCIDpp45rpT+2sp9XttvStQ4IBgcyEEaMJInCQHiCd5c+mAiAsH41iqUDu2utTeO8f9km54NMvUvLDhAlvBaA4Qx3XKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrgZ2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC3g//cHXICPJkPzuJHdyzXGJOIGiCdk5spGvkQ/39dTY8A8uj41QS\r\nOwWB/0fjBSVG2LOjMCsQ0QIm2DlqUcwnDWMQUUw8tnSGWGnRZHL1MLM6Cma6\r\nb4azPmTU/YaFTxT/hiEog4H0wG5168j3W2T46WcePNi+z3i9gUChHxYIcjWW\r\nPL7ukGl0UnpQRepAayWHVV8DWuMXQYlLGftdtt1uGtUwsPKJyLSb8UPiWupY\r\nXvY+wpvBKmdUi+1W0e3xzLfQhCCidFwxUg+xybhyrp325e9bM72iE6A7ThkY\r\nssXsGTEnNTqvCptj+EKL7BGmj57caIAVBj5fndQ2KaKzsEo2975Vuc61fobM\r\nNLYeqlJDMf3cPA9aijvE4+xeI9XcqqMiHVcpwEwHbA8LBAXlG+pfI+xDvL9c\r\nTnFPPzBKklR92Eue6DEXfaBGJSBU8Fq0otasEmE+rDuocGyk+3L1l5P+7Twb\r\nxGtTG+jJzh9M05tFSXMVawuJJplwUnHRGOfJyfJX1Z5HxvjhId0bS35PAuzu\r\neCtdDO1sJs7w5I8y7ftMzMyRmzb3S7sVhDcQ4v5dNUQSxQemHpHYye+KDkbg\r\ny3VmbRjkELPqAPsfBrcQUOzh0c1OoHdKm1VR/hdyT0ciOYWwkYbFBC/tE0ao\r\nZe+xuNXZVW74mIxy8HQoQDOZSyYAe2exBOI=\r\n=jWRg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20221229212737.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/21726c75a02dbdee36e462354cbc59ea/chakra-ui-system-0.0.0-dev-20221229212737.tgz","_integrity":"sha512-wJl3PfAoNL1ib7DRYO4w0KR/+MO506GOEtG/t2oNFcg3oiZoYYVmeJiqFWuMwGUBkSWInZP9OVQvztMHKHu9rA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20221229212737","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"0.0.0-dev-20221229212737","@chakra-ui/theme-utils":"0.0.0-dev-20221229212737","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20221229212737"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20221229212737_1672349301987_0.253001226635057","host":"s3://npm-registry-packages"}},"2.3.7":{"name":"@chakra-ui/system","version":"2.3.7","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.7","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"31e8aade0ff43288c7dfe63dfce6be72cc049779","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.7.tgz","fileCount":45,"integrity":"sha512-sUmLyo+zjv+Im56slRaQA5fw04y7JuVGKgGW8xcQan+jVtMI2gGBvnecOUeNNiEWglpW/pZ/AE9rgJX9dKkrkA==","signatures":[{"sig":"MEYCIQCpSFgtda6wJ9BFD3HRhXKAKoV7Ssxye6OVSsw1gdEd5AIhAPu3j+1sIbD7yLy1nhHHDaNevTCyLQwv9UH5sK/7JZQc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrg+JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+tA//a6uPJLUs24ubA0RI8xMwRnYmvZAy2I6TVZZQLxihFaKpL7Bk\r\nycJ9H2hOHRz7Q+OUDXHc+kZLIbHyPtvUFhVLpJvylCsPH+MMqSgXulSzsRZZ\r\nKVBo7oI63oAyLv5sXFrkhKUKskul340nMQ7EkRavTdnkxg8D6rJnMkkNbGLx\r\nIRehbbjb87ZUHak1VCQMfVlDImIi6utGi2a7/f5zBIMxEiJM7uduq7NppNSs\r\njr+FSgw/JNt13Ujffa+YiSZfZFuTmGbbv6Ddo0W2mFde5+8i3IsJ97c8tz31\r\npM5X10BK+PUASn8MIDPKIlsGyfG2tgUhpBvnxGl40x1dYKFzC9zo7G4Bnuw8\r\nhkyQ49/MI8pmu+B1ssEPMHQM1NAMgKLGh5e6KJgV0cmWnmATWY50S44+uoOY\r\nIieQoU+bsFht0kFIpdPz4n236lRUW5bMWkbSfpJa1p0+gMdciKUhQ6ITxeid\r\nCCCao33nerfK1LFv+hlAkX0kmWpywh0WG8ZOtOzWuDtop6YDI+0SurCKSahe\r\nddSZHunwh6oelHAQ9xtX9EL3RLS0Eo12rL5K4WyleoMP8TSBE7uMlFc85yAM\r\n3M1B5e3sUjWHEOE+LC9JtC2pq1X11MEQzBU8zN3cYK3iubuqjRhA/lhnrnDB\r\nMw4H3WpjhCB8mcyE9SLBv4EMYZ6ZBb4rwIA=\r\n=xRIh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.3.7.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/303c8a5517cb8b91494110bc7979a41b/chakra-ui-system-2.3.7.tgz","_integrity":"sha512-sUmLyo+zjv+Im56slRaQA5fw04y7JuVGKgGW8xcQan+jVtMI2gGBvnecOUeNNiEWglpW/pZ/AE9rgJX9dKkrkA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.14","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.11","@chakra-ui/theme-utils":"2.0.8","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.4"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.7_1672351624960_0.009273316138767473","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230102093714":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230102093714","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230102093714","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e807068d6d325e51977a415370583e5d91c7e374","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230102093714.tgz","fileCount":45,"integrity":"sha512-j8r8+ijn3buXSHo+O9rOnrBarMQXcBpXfOWi4Qtytk6nYoTEEsHe3zgz+uvFpp4KQG6NNGXZmd8fSutddYJ4Tw==","signatures":[{"sig":"MEUCIDkuz79qYAZPFSxYGmeF6CU9H4xKaEmzsPfqY1x2js2NAiEAoPf9i3J1NBrjTUrqya1Mim4ZLK1YLuZYbfOIEXfIO2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjsqX6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFsBAAhzL8w3j942+QVI4DiVc+Wl5n6IRLcfq5ShnBIfxoq6Ur+yOk\r\nfP3HYU46FfPszcBg1ipssbfoSoqU8WgMxB4WiygUI1mPpKw+iZ7JXTytDmD3\r\nZOtlF5pD+/vWrOKVwIHzb0V85/yB/YRiuIKv4dYegh0V5hLYYE/7K4aay0tQ\r\nypgSHfi13zviv5zvt9FhgYkIA3DdSRIQ4YrjI++3vNjAn75/tFhTbMCwDOPt\r\nnWa4waOYFP2uaAPE1nSc6u6vesHiMAgYWEFlGqhHsOa0/4Co7BAdl3xsslYc\r\n42Cq28igSt0DCusn/F31hbL4NnycEghJhGh7bvuTN4kOuYQIMacflqqt/0jr\r\nROKPpZY0cPEdad0pBrccsB+s64eiVg0JK8W3iBCTMbzcgEmfdtrha26XKrXf\r\nkTIYOSwJ7FUqXAfIUWIzQI9jgBJe2SOwYznVmpUmRwXPPGeZEDVVNZ9lp5KS\r\n7UeYsIFi/2LDw3jLw1zzYMKhQgtzbxKVOB2rNHlLIHQW/HW6KL5ilKq9YpAH\r\nds0oZ+GlYRVsf1SpOf/9eZMaWO2WWoXfe0NJeqD11PXlXTjwwLBnKakAJzSn\r\nE0IJ/28HX99Cd/UuivFWO5wn2IzzPA9f7br4U273/QvsNI0mk+NKSNio7Hxj\r\n9V8a/SAQjj1xNGT65bxH8xPJG27AtmQ1kRk=\r\n=DM+m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230102093714.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e1995972a4fb2df7dd5da4d440051dee/chakra-ui-system-0.0.0-dev-20230102093714.tgz","_integrity":"sha512-j8r8+ijn3buXSHo+O9rOnrBarMQXcBpXfOWi4Qtytk6nYoTEEsHe3zgz+uvFpp4KQG6NNGXZmd8fSutddYJ4Tw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.14","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.11","@chakra-ui/theme-utils":"2.0.8","@chakra-ui/object-utils":"0.0.0-dev-20230102093714","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.4"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230102093714_1672652282140_0.2583637960593834","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230102095417":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230102095417","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230102095417","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"26e9ba110b362606355b75dd257684a3ec5dc09f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230102095417.tgz","fileCount":45,"integrity":"sha512-QpawH9O46CC2KWEs05g74HuqFtB2Jt/cF8lk0zIIUgtmONl+STUNG93F0PVMJgptbc3OfkVQGJpMZp2WhGB8Ng==","signatures":[{"sig":"MEQCIBr4C0U6ordwJ56MQWwc0RYQD4WRmvF6HE+IMUkGm6o0AiAP45LANVECHAhs67qgupB7jWwqUW8hC44cx48hg7NlwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjsqnzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlBxAAiYDCfTOEUL6Ug4un8L5srUsJYQfNJ5M1wh1bGpHcaFDluggS\r\nLLBokMcC2zm7VdnRwNpUsaBT2sSIQ1ihyBjvg4YP2auA/dL55j7xzLl6Impp\r\np50sKD5NF/kXkfK0lLnhS2KtfbYJGVQzgKZTU+Q5k8njoHKEOKs5sEfyyKJt\r\nHJ4Ztsts6WqUYw/nepl4++zOF1GzgIn9lj5FboYYiQSdkXvoKt73COx7oBVI\r\ngX77WUj4e4FnpZiCxbCfBeSxpdCHsGJTZXVN9bsNnJqhXKdxfIFLf8wQfA43\r\nBef8Tg0CpBrQZrbDLlymLRnG7L9Ji6ndHpAN02VsQjno3ko2dmDq0+UTJDfb\r\nDvQSql9kDmQZe49DrX2nr2syJcE+tFi4B2mV1bu2JX9sGY81HzKWN7e0Oi7e\r\nIputR3NpkZG2iUTbnY+WOhiM2PdaTX+ozB0LBkzBxOrkIuQcLE+BrMSo386z\r\nmjMAWm8LLz3QGbeCPpdNly+Tycw/5c/QAH9Verl216GX8zLoSa9aFYTKSinX\r\nSQ34tGvB/fQnHei2flhLbAHjpqsUXTeFOESRoxKEI3X1U/rh0I8ql/iPo1S2\r\njwKuMwRgFQRt05smCnG/YIi2oqGo9XT3xAITF0i/RrZ+fHeD82WVb6XORFfK\r\nO5/7K16DCMq5jbCV1+5a/16DUz6lRlsRVy8=\r\n=WPSM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230102095417.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b05b65d035ee802600e7e57f813981d6/chakra-ui-system-0.0.0-dev-20230102095417.tgz","_integrity":"sha512-QpawH9O46CC2KWEs05g74HuqFtB2Jt/cF8lk0zIIUgtmONl+STUNG93F0PVMJgptbc3OfkVQGJpMZp2WhGB8Ng==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.14","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.11","@chakra-ui/theme-utils":"2.0.8","@chakra-ui/object-utils":"0.0.0-dev-20230102095417","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.4"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230102095417_1672653299085_0.02828232041616885","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230106083209":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230106083209","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230106083209","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ccb59d8ff3f4a150b13764defd321ea93e8689c6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230106083209.tgz","fileCount":45,"integrity":"sha512-vsKDOEJLH1G1XnHowJ5XtsWNGrspwcpYtmPl9uQ0uRwQ/gON6Hi+FNPcX6yThTyvxNLQjP7FWktVwGelB3/RYg==","signatures":[{"sig":"MEUCIDESFQ88qZ5ozjlE5LhiiEj4Pp6H7xmLKnZaVwtihbUvAiEA14/73pjdeiBvtxaYY70j3BioQ0JgNaAV5AbevHnLPdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjt9zTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqevRAAiuzFgsL7QbS0GrTvZc2vkc6Fkhopwd1gnJ9xLEh+eX76vyI3\r\n4X/WcCklF//P+xc9VRVOi9/ikKwmVtXm75kvHS6vZo55XQWwlz8QtokqGykl\r\nXGHFgKaPT0p91qIBEqc0aS4Ho5ZHVqNR25uP439zqp1C6BYn2qN0XQ66oHWR\r\n96Ygi6+ojBu7eS4qTCB/6jnRz6pbXj5vwFNCV5uDpHoo/TCBR6ESjsEYjoKa\r\nIHqZ+ARs+MHHgV9wpu6Nn0qVs+0sDZPE+4YIHmP5jz7sC3k9KFIN5WPIMgpT\r\nZlqIMGUV+v6ao+uGdXuuN6iR6+4QrtNOWVOVUJzHv9sWbaMCNBmjAGILZPK+\r\nROaMz0kXa6DP83/T8lV5SJvednExPi0351/HQx6ErJZsAvf2q5Ft765yqF9S\r\nEIMrqbfWQCnohx1MZoI6myMFHKL8bhP+tmM9XCht07wY8//0RYwYFfaj9ENU\r\n488EPY8Jh6Uw8NUNMHIfzmn9ppuTrv1189/dnEjXCD1SEeKbbtsQRdLq4MJd\r\nHHYgiWFiIKzJrGQtgBJPnTBUu9x8MqOxaJMtehFMv5/roFyFu+2c5znO9DCT\r\nSn21++/eCOWzQvIYHvyZXHsv/cnyPUVtv2ZmKVGkb5mUg3/BkaHTDmMm8eC7\r\njlFRJMkPyaO0mWgvPvHVcU+hgLQmncNtPkI=\r\n=XLcW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230106083209.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2e7e4645c541444d4b079d7ac74d4b3e/chakra-ui-system-0.0.0-dev-20230106083209.tgz","_integrity":"sha512-vsKDOEJLH1G1XnHowJ5XtsWNGrspwcpYtmPl9uQ0uRwQ/gON6Hi+FNPcX6yThTyvxNLQjP7FWktVwGelB3/RYg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.14","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.11","@chakra-ui/theme-utils":"2.0.8","@chakra-ui/object-utils":"0.0.0-dev-20230106083209","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.4"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230106083209_1672994002969_0.7231047790435554","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230111055325":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230111055325","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230111055325","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e440ba3d64b55d868c490d7dd3cdd4cc695804fb","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230111055325.tgz","fileCount":45,"integrity":"sha512-KgJ5LSYs06KZoxv/JEw70RjaAkLBl0NgolR24r1T4KBz7kMie9JPqmHvRQ5fFOn/oPoORhuZU+LtK5a8tu28wQ==","signatures":[{"sig":"MEUCIQDCofagPuGM2OnvcyLHWA/XdDkDGIHkghxXaofVWl1v1QIgc0MfRGXX5CkUARWA27ZCPo6kLNRak/940gHWZKFHTl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvk8fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Ww//bgb+vuCenbaM0jdqo9mV+IBBUJ1tetqy0Uy4HIcmqDqK+FDG\r\nkY+F4cLdlQTCD75hxXeP3Yz/vkPohtpsw+yCfi1fe7snyW2cFWYU1KlHbL+w\r\nAqUWVYkZRygxKmr6qyrVPwdNg/Kl24tyH34xrPQGe1C3aAlkZ1n71KRjy9OX\r\n3ftsAB0pIhj3KU6Rlk+ySVEwMDCIvpXA++cay5TPXnyYFlBe8iiFzOheie4/\r\n7QZCbOBPeJot3FfiqggXJnynJCwb8t3YTqJqXyOLu3yh0totB0OA6iO23XFK\r\nw/AxKUQipXv63DRY6CIUmwz1nsbSgONhY33s2VM+VRWe6GkuaW5HUlXllbsY\r\ni8AKTzLxPwXkTsl0lfD8Lcd08DRg+IothhYtFcHQ7zhZe68fQ1nW+POKS56M\r\ng8vGxN5VYctStCVSz1sOy6jAlLqgO/oR9ssFp8p/7bwzF6LqK1vNGVQX6dJ8\r\nx28ZAoncWYBnNIUrWuytkRLGYf6Lby9uALSaEKvFiz0dkIuSFE/dfKn0C9YW\r\nHJ0naY52n1Q2rLh8OMaR/qIWQSQLy2RY+F1QzXJmAbh08/DACc5zdyL/xg3G\r\nfnImS7r8OyR5IUZjqqwLRlXsv3P8v1TGQFI8AdRuShcgHjSQHZTmTDm+su53\r\nHlYhD1aMY13Rh1VcZLneKdujYBwUPZOGPlg=\r\n=sHRk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230111055325.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/31419b2760d46007e659cbf61a2def9b/chakra-ui-system-0.0.0-dev-20230111055325.tgz","_integrity":"sha512-KgJ5LSYs06KZoxv/JEw70RjaAkLBl0NgolR24r1T4KBz7kMie9JPqmHvRQ5fFOn/oPoORhuZU+LtK5a8tu28wQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.14","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.11","@chakra-ui/theme-utils":"2.0.8","@chakra-ui/object-utils":"0.0.0-dev-20230111055325","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.4"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230111055325_1673416479488_0.4869103032704316","host":"s3://npm-registry-packages"}},"2.3.8":{"name":"@chakra-ui/system","version":"2.3.8","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.3.8","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7bf5b21e713ee0f62e5c65f337b702cc6beecbe1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.8.tgz","fileCount":45,"integrity":"sha512-ZCC54MahWIt5nCw9LQDFK4hZRefF6QTxVnPS9Sr3lRlYNzE15/YyzCq+Yb97/ApmQSUmIsnT3uxr1G+OwmuHAA==","signatures":[{"sig":"MEQCIANwe4FDIVVA6DET09QC1VY7R7mXalkF+S+ij12jqEqDAiAv9MXSCXd9qDRWWeRYsBCfoptjQwffNWGdKapBw/qz1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvmXoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRpg/+OAohCBNGYYLMC/KWNHdJGny/ombihWntqV9y22bVN+k4uU0O\r\ncI8eVL/h+xuKde1f05Yn3p+v1eERQuHEOT2HZ1EddVqPuAmP6Z4kn8mySkTY\r\nJpGCoZk2gZh8Q7SJcQCD0mPOy7zb8EfrQ0hKpKQXnloKtoscF8dFdkKD9ai1\r\nW99CV9TFbsHSXxxAVbteNhbLYyKDOEpFToDdM6VPNceDUKsam0jUG+NKgdqD\r\np/8MHEHpjaYpdm7H4xKYnApm7iGHEolDsd7Trlvns0v59eiitWHbV9JIcPef\r\n9ehUqVMx7a/klZ2Wm0BVnVnrhOItJCM56zocrpsDvbASesVhLfxzfKJ3WOiT\r\na3so6biijjN8r1WFbhhjgmzH+dPFb1XH2JnmTL+Wgl0AIm4sKwT++8eSY4hd\r\nrUwd4KQq/bq6AGord1Ts/2KWuUCJqoCyVGEpLWCkAgj9H6C1+/unUz7QRlNi\r\nI1ZNZ9L5DbHJtjfuri+mJ6vkpEjDhMMsGnNOb8NfzOJKkR7/J9vOiJjosRNh\r\n55D/Xlu0HRLBP/5RMlnCfWpHaOhKECV5Wmwpi+QA0TyIM/qpPqa2mh6M5go4\r\nlDLKxQtIcRIVM5hdhlKnjZcQb8U+2nxCylg4+lSxi5wtM4BoxuzVornUm7zk\r\n8JifWYYe0E1y4/7cWacUuk7MDJunvGJIeLA=\r\n=u+I9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.3.8.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/dd23b2729fdd53cb6f88920ef32f9a8b/chakra-ui-system-2.3.8.tgz","_integrity":"sha512-ZCC54MahWIt5nCw9LQDFK4hZRefF6QTxVnPS9Sr3lRlYNzE15/YyzCq+Yb97/ApmQSUmIsnT3uxr1G+OwmuHAA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"2.0.14","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.11","@chakra-ui/react-utils":"2.0.11","@chakra-ui/theme-utils":"2.0.8","@chakra-ui/object-utils":"2.0.7","@chakra-ui/styled-system":"2.5.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.4"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.3.8_1673422312322_0.9355568671569021","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230111211417":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230111211417","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230111211417","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6133a6ad3710d5ba921548062786eb2915f32d44","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230111211417.tgz","fileCount":45,"integrity":"sha512-XaxsJudE+c3bEGjJK/ZuFvWG/jO5IaN8kH0X3aeon49JfvcZ46UacQ9sZGYUUUeR3M29GVSwSILkS99+ODwoQA==","signatures":[{"sig":"MEUCIQCkCkA2SkOs8uOj0LNGqKFWukzfecrBzKTIf+MVOHEi8AIgeSrg6SBxawzYZ6r76s+ul/K0jdYdIoOb8DKul2Esg20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvycEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrTw//RVpk3dlcnS702k26Pjk0ok+yUiB/LlFMATrmFeSm92Kooci5\r\njKBWFOp7JcKOSq82/9aexN+2WIhYlFVY2zh/oknrAMW/ULgSKOq7zUIBrTui\r\nqsrqKc5LEAKIM2BEIguyNY7jZCJO6wWkH/KZLeWErLOPgLSxfyGgXfdhDw4g\r\ngQSQ7Eu/Q/Tv5/jQ2uNa0hSt9c87mML9pe+BL/ebQERBq05W5zFGaSfpQemy\r\nDhW6U+rqEkXDy+KbdrvKK+PNkBftsKIrMeoUYatgkj1w9EcOXRN/Yx1HhR6o\r\n8uskYylje9ItVq+fHEkkv0Dg6yiFzZRaGhak56seBPR4KLUEER7wVx3GuaVG\r\nchTqstMIgg7HBklxB+YPL/zxYvkgatp2o0aVLMPyZzWrFv9BL0WyiYg9RyOr\r\nWn1a6d1S9VXel0dGsGRpuYGc1RRR+PI99gXIrOKnLrHze7bqbct8+TJ0eL/i\r\nDe5lqvnPN+I5DZgIB4L4q3cqqXMTwTxRTLFCX8+Kz1w+bJkq50ZzeYuZrOE1\r\nqYLkfvbcAHVknLHlUo6RXhMS5r2Wu9bqKYMaQeehdBL6G+m5DKeuqORTBzg0\r\nbGW5WKAyVu6m0Vm7sq4bgZmTuLeyqHIbS5dk3vNGYt8AkQlLRTFdRxNj61Br\r\n9o1AmlnRNRIH8cHNIwi1KZ3ZodMfsyiizBs=\r\n=vZi1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230111211417.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f46f9a3aa612853f2ab29df60cf57cc3/chakra-ui-system-0.0.0-dev-20230111211417.tgz","_integrity":"sha512-XaxsJudE+c3bEGjJK/ZuFvWG/jO5IaN8kH0X3aeon49JfvcZ46UacQ9sZGYUUUeR3M29GVSwSILkS99+ODwoQA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20230111211417","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20230111211417","@chakra-ui/react-utils":"0.0.0-dev-20230111211417","@chakra-ui/theme-utils":"0.0.0-dev-20230111211417","@chakra-ui/object-utils":"0.0.0-dev-20230111211417","@chakra-ui/styled-system":"0.0.0-dev-20230111211417"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230111211417"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230111211417_1673471748128_0.2325056975919022","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112113621":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230112113621","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230112113621","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"79100ac679e33990691c74a8d6111c96b9e74224","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230112113621.tgz","fileCount":45,"integrity":"sha512-8uxX6THVyjU3u2lx+E94qwuuaJhrDW+B72772btEQ32n+jGEc3bSIdwbAHuTMuRi9v2WRGKFjhKdAlT3CfrR/Q==","signatures":[{"sig":"MEUCIQDH6LpKmei44xtpyelUIC7OZaEvRJRwE2vg08ZdcF6fCAIgXEoAZzYcPZSrWgh++q6QELXWy4PKxfRgUbx8RyDjGSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv/EdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN5A//cWJeIK9IClPoJz/ifGKOoJpYxpndiTU9Svg/UA9gUE5IYKkk\r\njAdiS4SCLKqEXvgLz+sn/vpL6dyWrbxR/Lp6e9zCqrqsp5ZnikgAJX8F1BQ0\r\nig6rfhJ6PakDokSIIxeeCWz9uLkLSyy7H5oFml2OoDbYlB7HPqPcxfYwIqGj\r\nHUxU74VDIXxQBFmLd5+tC40pl2ZaZFnyEhnyml071kJhAoE3kQNyTm9bUEPP\r\niQmkUz+hNnwT1TgZ+dwkcWOro1hgDbBeHoHFMpqAgjJZ7q67d5Z9n0qmLQ/D\r\nkJn+y9FtKMwkvI+qFeLUxSJKeqi3P66YtmA5b/xdHit7NkTN4RXhBerD67QH\r\nIJgOpQ2kunTr0ND4cS5LZiHVYML11vayHVl44s5Iyo88GHVlMlk67RptCzts\r\n1tzsdAZy3h6kWNMMqBr99dN2lySQHAvMMbf9EMLsOWLivSjvUH9bncz4fG4y\r\ne1i1lEnzmVI2mZvhQGmcfquTRQj4zNsPV8K4RPM9xH2nwlLy91J83aBlfpYX\r\nxRVP6+lXWX+ilrJYpryS+MxexDmF/HdB8+LV5v06JpuDjy718VRvHN2yxmYv\r\nvVA2Q8YXlIJm6RFoR2aXMaacgLrs4vmqIKpu06uIJf7ZLfaQG72HKdze36/I\r\nVgy5+QWKKsuHgKYcBqQEEAURX8HTk/q/dfE=\r\n=x98R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230112113621.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0b78577ba126f90b49b8df2c40f93e3e/chakra-ui-system-0.0.0-dev-20230112113621.tgz","_integrity":"sha512-8uxX6THVyjU3u2lx+E94qwuuaJhrDW+B72772btEQ32n+jGEc3bSIdwbAHuTMuRi9v2WRGKFjhKdAlT3CfrR/Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.2","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.18.1","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20230112113621","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20230112113621","@chakra-ui/react-utils":"0.0.0-dev-20230112113621","@chakra-ui/theme-utils":"0.0.0-dev-20230112113621","@chakra-ui/object-utils":"0.0.0-dev-20230112113621","@chakra-ui/styled-system":"0.0.0-dev-20230112113621"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230112113621"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230112113621_1673523485578_0.37851680662727105","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112141201":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230112141201","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230112141201","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d8a3ea688308346bfa241e7f2681e6b6f389dc0b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230112141201.tgz","fileCount":45,"integrity":"sha512-mk9z5k7odlepMfJrCMWdRUN6CugfxRZoKSoMaQ8jI1FeRCOjroq+u09ExCI0752O9Tge2GeSBf8aiJQ1j1PO2Q==","signatures":[{"sig":"MEUCIQDXdkqkKg2C+XsZHVaeTl1POElV1I+R8gc2R10TFGLE3AIgKaj7JZSJyHDbt7O+9I5G5LqwU6qaeyurTGCtOvNfehA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBWrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiEQ/+LCX6MOoxCjO9wTL6ztZ+7CTkmBrFd/jhWOrDfzWhDs3GeaZz\r\nE+01hn2uDDdhoFJooIPHh8OCl9InK1oKPA9EsHe8NPBIDpKYV6W33gBXqpim\r\nMHMnkEH552+7F6xOoYvGEtwcSv7vg5UqV6Z7HkSb37ndf87uU35izXF4fJ5u\r\nHXUqDu0ixIgFhgLbSqZp6e932Un/DNAKH6vlEznUeBZvdPfjUhT4Lhxp2y2E\r\npBKg+j9R4ZcFZ6t3s8wx1GbrbFHaIeXvM+wmakqSIbIm1aAQ8kmRV9smmuOE\r\nOjADfE1IdaQDJd0BZtsSYPmTD+7P1C92vUXFwWOV6dga+h+WCSYtmZQtX7lG\r\nMNWI/bHV7fWaiNZrp4WT/EF6nDQfNysfDXx97heei4FZwYsB9YruwNXmFXRf\r\ny6PqwwtRiWFWBrXjong/kS24MiR/MivGl9q5Iy04+wvKLHE6rQ5GThEP+ei5\r\nizjLPecw9loxoH9vQdhQeJv7cgHUR9G7vnZX3azjRQZvHw/BHBaSBOEJ0koD\r\nmxGJGgJt0O1Py60rKd5QPR+Zns98anpI9lz6GPHr5Ms+wVivEWDrGnLLObfa\r\n8KbNINJs2ri32ErIpdZNZpgZ/FgMGa70Fq5H/ZsBGReTRHEtQeK9cznbsqlo\r\nkkzi0M3/NshrwTNv7clRa7rwDcr5/XUePBU=\r\n=cxnf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230112141201.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a175b6cfe79a539c53855882e8f0a52f/chakra-ui-system-0.0.0-dev-20230112141201.tgz","_integrity":"sha512-mk9z5k7odlepMfJrCMWdRUN6CugfxRZoKSoMaQ8jI1FeRCOjroq+u09ExCI0752O9Tge2GeSBf8aiJQ1j1PO2Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20230112141201","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20230112141201","@chakra-ui/react-utils":"0.0.0-dev-20230112141201","@chakra-ui/theme-utils":"0.0.0-dev-20230112141201","@chakra-ui/object-utils":"0.0.0-dev-20230112141201","@chakra-ui/styled-system":"0.0.0-dev-20230112141201"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230112141201"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230112141201_1673532842811_0.5767030465175937","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112143332":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230112143332","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230112143332","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fc85283cac602dee93598f98d4990bd71608407f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230112143332.tgz","fileCount":45,"integrity":"sha512-YyMJnqie9wkyw8DvNSMakkPeV3nRbisNQ7SjzRVJUyw+QsNLK4Vtx4Y9kX5qxtimZ0FMz7Wr/xVwlGxOjQ3jBw==","signatures":[{"sig":"MEUCIQDb1qO2ogevTjjGWzEzvlmPZBAMArXXsnsrOk7vIh12ygIgdrBLE7fApae/IqxElmAaSQH4WnXPRp1NJQzcik+BaCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBqxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq5RAAhwGa74S+VdeelvpIHObAFh54QsaBufHTNWFFEFuK6MiNXwoK\r\nkS4igpv8Yhy9mq6ESynqCNxLSQq23EmWYc6mNLp8EImTguEJhS5vN7lI9VEn\r\n3CwPcJIz365OJl7LJidETIbwpPnXIN52tunUNbOZLNEWEBCvDiihtWn4jxPc\r\nZgXwaI6ngv5Z1DAuk1w1QnDnwY8X1/JRj5WBJ+Wk1CTmMnmDxcwvgJw2cvhI\r\nUgZlQAdWqgcvWl7bRbCR5OyLwdOQnk7/EurPaeVu2eZYSCD3G6vy8UpSAY9e\r\n1ynRW/laRchvh38F3dH5ykhVYcVZsJL4jCjuEjjmFTnREs/0JYGagx7UIfat\r\nhggJZQTF5F/uAIZLJROglEvpVotEdCsSOu4hLUmQKygvuo35wOKgdLF/Hqdl\r\n1ZAivjY5abzPrDON7inPmJkR/aL6SGrlCsUp+2NnbMBDiGaY4DH0x0Tyg+7h\r\n37gqirEfTBDwMdqPZIi65X767tV4dZC/BNy1LKFuizbdUx9FNzgwPc04/B9O\r\nvD5MY4pIGXY91UBLxjVAj+4DsxmaIB61ga/eMNuaklPOZjPkh2NXiVBL2fT4\r\nGIGzjF64pEOxtsZCED82TpWjMDUYcfM3yqNvVOOF6z7HYVhhMRyBV3wrstpl\r\neaOSAUCyMxKRXOXfYI/zy41ICT+UxsK1Oms=\r\n=A0Hx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230112143332.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b4c4d989a6120309d08c18f711746b50/chakra-ui-system-0.0.0-dev-20230112143332.tgz","_integrity":"sha512-YyMJnqie9wkyw8DvNSMakkPeV3nRbisNQ7SjzRVJUyw+QsNLK4Vtx4Y9kX5qxtimZ0FMz7Wr/xVwlGxOjQ3jBw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20230112143332","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20230112143332","@chakra-ui/react-utils":"0.0.0-dev-20230112143332","@chakra-ui/theme-utils":"0.0.0-dev-20230112143332","@chakra-ui/object-utils":"0.0.0-dev-20230112143332","@chakra-ui/styled-system":"0.0.0-dev-20230112143332"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230112143332"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230112143332_1673534129097_0.146724712264801","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112145104":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230112145104","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230112145104","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0570131365156ff4fdbd9c922674c36b23c32ce9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230112145104.tgz","fileCount":45,"integrity":"sha512-cU8p+qordkkvuJ5GFQ3/83mKHPpaCSQJF5Q8P6aHY1H5xaTAsRx9VOg+TyUz/lBZZqB0Bzncf+49wyiqbirLeQ==","signatures":[{"sig":"MEUCIC/zAbOyuZuVDPBc/MPgIvK0BGDQZl6+UMwvEMG+DM21AiEApRsED2cREWJeopjmsotfUhTlCZunkWD5f5oxL5m4wWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwB6xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrENg//VoPEMPa6+jKJpDTHd4BeVibeQJK7INWw3Ianp/IRVi9Pef+I\r\njEVQwFWWuofU+LE+FUfXaJN8pxrB7NJwF6hkDSSGKJh2AoICvaTBfc5k72eg\r\nWNQrDHa7CzCdPvJJfHKAOWfTYe7p2y4nFFUjXPftUXmdKXWDiQmxTns8j/tT\r\nf9NKYsEloo4Up4PflA7WuyyT6VOdyyMLccMqDiI9Cu4uK7ORPp76pr0DhQTu\r\ny9Q3bLJjiIRyz5SvrrTwpGOHp/GteYY55+wTDPPcMXFVBVkqn+CyOJ6q4CS3\r\nz52X56CVPPHUs8nCicCfs0PwlJE9alnyf514aKwBd3PmG4+VORQOlgvBJsP5\r\n9zqjYZiY338sVw8KLQqUzIXoes/Mooq7SSC0dfqGbHcBrGvvR1aK1kz/OKl+\r\nHDbbiEEBrk5qno6e7HK0b4HlMftr2P6S+ik/wEvWfh+aLT9y098uZOAt/Ehy\r\n48F4GggA5NZ8Eb3zxBvGSSnWVyTH0jMwoPSjWzndMXimBJBMKvpm/u07xlyi\r\ny7YmibmbmljIw9Vi2YMQv2A+0JcV4JyGZd7imXJKBB5ePxjIMzvbY1eyaYpo\r\n8CNO6SZuf6RQYNDKCEp7A9X+ZAVOYpnyUcgkKy3TwVPQt9y3oNOVOEhZg/yQ\r\nmVl9NqbMDLF3PYaZkBv4eFAI7QUxYicx0Dg=\r\n=bZFF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230112145104.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8ec219d0f036dbdc2ebe8be020cdf828/chakra-ui-system-0.0.0-dev-20230112145104.tgz","_integrity":"sha512-cU8p+qordkkvuJ5GFQ3/83mKHPpaCSQJF5Q8P6aHY1H5xaTAsRx9VOg+TyUz/lBZZqB0Bzncf+49wyiqbirLeQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20230112145104","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20230112145104","@chakra-ui/react-utils":"0.0.0-dev-20230112145104","@chakra-ui/theme-utils":"0.0.0-dev-20230112145104","@chakra-ui/object-utils":"0.0.0-dev-20230112145104","@chakra-ui/styled-system":"0.0.0-dev-20230112145104"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230112145104"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230112145104_1673535153745_0.04893309661451806","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112152756":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230112152756","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230112152756","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"59f4449254b42922871c9b5aff6d1ac44995b38c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230112152756.tgz","fileCount":45,"integrity":"sha512-JxYAV9LIyBz6gqLCytWh9JmVWfkwLqg21Uj2dL6wr0oHvJUfNhFrlAlpARJxwYW62KKQGrBUOzzb6x/sEXRCmw==","signatures":[{"sig":"MEYCIQCSUZoexFyS53APhy6smitRUfdpy5lAjby+qcbTT3gMZwIhAOt2pAAoG4h1FSIQvXeSJXm7ytNP10ehMIQW+1udWwQ4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwCdpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpgeg/9FEW5CLA23SJk2ZOdk1+cChywAEg+26N09Xw+RaJVjoFtgERA\r\njLm25PEkHN9fFgPlao1988zFX1uWoawVxw0Wj3FKF7aLiH0bdNTtekv8bLFZ\r\nH8LgBNoms8NtB66k4fejl2bA8gmvQnpxghHfkLNmXT7jnay2NtBZxKIpkcBW\r\nIb0ZSzOhkS1uif4W3Wma+kBCgCpvHoD+RmOWo2G4KBK0r226zXitx3OrBRsO\r\n/NK1+cZ6brnN/iMxNiofYM1rMEcAVz5DIJ22qnfruPpqdbvJiDQ10KzbQole\r\nYaHwGMCa3/7Yw+p4t7bSwRCbwgV92lzR2A42knDRzSsVuAZMmxyMte/MTg17\r\nj/b9vqrdIBrrBjdQCuEnc/tbEon0rOan9avJ5ns1O4bUpZnUOmXBLgd1ch1q\r\nx5Qdlg3aZnzm+9+YlVDZdBkbo2DvTOJlBWgmNDPi+Cq6DsCCiBxd2BLEJW6Q\r\n6i3/zz8jog6rREeoQQnYhDWu/4KOu+ro8q9PBjh2e1MCSk9hhbKoRmdQPKzM\r\ny8WvBwITCwDxbLSpx0OxqLY9jzB3xMgfrTosoj0aU1qe03h9D3DA0yAIikhW\r\n5o8yjg36wJfpUCF5dplXHdLH4Pf9PvDdqtGi+/IAYDcsIeHkBTo2liWwddAJ\r\n29c/zh27lnG7BvsJsftrlsHkgass5dLQ1Vs=\r\n=CaMA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230112152756.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/477c54517732f843072af60e7b1c8781/chakra-ui-system-0.0.0-dev-20230112152756.tgz","_integrity":"sha512-JxYAV9LIyBz6gqLCytWh9JmVWfkwLqg21Uj2dL6wr0oHvJUfNhFrlAlpARJxwYW62KKQGrBUOzzb6x/sEXRCmw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20230112152756","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20230112152756","@chakra-ui/react-utils":"0.0.0-dev-20230112152756","@chakra-ui/theme-utils":"0.0.0-dev-20230112152756","@chakra-ui/object-utils":"0.0.0-dev-20230112152756","@chakra-ui/styled-system":"0.0.0-dev-20230112152756"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230112152756"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230112152756_1673537384954_0.5896152092807112","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230112154520":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230112154520","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230112154520","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"66f86b8900f40b1e0142415d64fcc6d845bb6dd8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230112154520.tgz","fileCount":45,"integrity":"sha512-Ca7Et9qkbYfRlXHJiRSkpfOJQnTaKnXZmr8u2EuRJermzxykRQQY4BSKmlsIh83Rh7uPrLEDC/K34eQz7t0DXg==","signatures":[{"sig":"MEQCICrPpTZJzHZFoJWXqICv7PxM7FPVJY67+INUpE8Sp5DHAiB8e1nUzxvPg7pVJDistGbY3gUPl7EIPKhnTLVskO26bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwCtxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmox1A//eeECRzqfi+eoF++Mf/wujAS9i8TUvpHOqJN4Dm6I3+0Elkbt\r\nlDBpGg2DjGma63xy2fBuXUnGjmI+BqiVcXPpswjH2wMG8ya9cVBfE52cI+9z\r\nwxt+2eQlrvJHSH8dHjvravf1EHSbWzi0Z2jq5WtQ1bGj+sVikmFqqs3A/nRA\r\nFFdREtw24OJk07nKxdrqGjiIVFsAKaV2StiiKomhklErXwYQ7VEu1iYDo92y\r\n1e4vSl78L+vUZsvJWqpuaZb2Xg8rnnmE4AFlrEHLakH0UQcsYJruxxXTPd/A\r\njNK4HfR35e45rlQvpG88OgvwC33zCMVx3OVBJ0b1jNiLRuPL8yttJ9qhTgdJ\r\nG2aTehWA0KBetN6MmkFCTC+O+Z+0q2aBcmiCzihNCL37MK53LH8OR5wtphDu\r\n1/4u+7VUvfnbPMp7jyPY6yIDWsCTDIpLkKTgfRUIveM3S4xA0LanedzDv4Mt\r\nnslyeughOI7m3pcrTQlV5IGppkvfIrjP+rruZIsc+tSR6poIfObSWi4HlUay\r\n5jObJ6exqF4DdfwdcP39OEAyUc/A3Xgo+64fiAT/NLYnlR35eM4x20sZF5ll\r\ns5k1yYU1/zzIqDQ9VL5hE5AKMWr8NQk9QbxevQ+F9gIdu4SFx+57VRtw+q8u\r\n/s9GnpMlztO+LgxsIW/9+pyzQ1amRq6iUVA=\r\n=deFg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230112154520.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/225da8536c2c2888f214bdc36937c478/chakra-ui-system-0.0.0-dev-20230112154520.tgz","_integrity":"sha512-Ca7Et9qkbYfRlXHJiRSkpfOJQnTaKnXZmr8u2EuRJermzxykRQQY4BSKmlsIh83Rh7uPrLEDC/K34eQz7t0DXg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"0.0.0-dev-20230112154520","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"0.0.0-dev-20230112154520","@chakra-ui/react-utils":"0.0.0-dev-20230112154520","@chakra-ui/theme-utils":"0.0.0-dev-20230112154520","@chakra-ui/object-utils":"0.0.0-dev-20230112154520","@chakra-ui/styled-system":"0.0.0-dev-20230112154520"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230112154520"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230112154520_1673538417365_0.042006742910338346","host":"s3://npm-registry-packages"}},"2.4.0":{"name":"@chakra-ui/system","version":"2.4.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.4.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5ea28db6b76288e223e3efafee04566be9efe134","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.4.0.tgz","fileCount":45,"integrity":"sha512-gUX6OZVvFDMV92NtKLuawIWqvjhYc0u1LCAMeb1k3ktVBjWEYjIM4DBIirEhHjcADa8ownrTEHeW0aGxN7uxjQ==","signatures":[{"sig":"MEUCIQCQXJaQlAKNCtqoez9442wE6JxkENL4CUPdKPyQU+NkuQIgXxVwkaJBCWTPlmconN8zLv6ZLsgzy0+hTsH6PWzlqfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwC/+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF8BAAiZew+AyuUxWtQaeAXrIm6A26rfEAJnnxI1ZX1XQOiw72waVk\r\nUdeCPL12YFXhJBnZ+JU9cux8nH1eErO9EdEmYl6uYQalRBooYTi3hw49YJxM\r\nMe12uXHGIHNf5VDUwiDdYNo19PXpOmETJ0WiYBp7gdZXIEHKMq11Oruu9er0\r\n/RNP+L7NuAPB1Da6KFEZCdsuLsU2RHmdKt5mVE+bVJUkE0jiWomdwqs/f0qU\r\nOafBwBOws5l30edci7I4BqlthLTSFhoraw9d/4L+SAg5/Lk1BN2jQToOLPZ+\r\n3707Q8KZVdwQWuz0ubgMdGndLhsBVHz1GtlOKYAszanMbPNxSC4wJQWAHHVo\r\nFs5xWjnniEOXIE35IQl1q6LLGzeZEp0hfXSDkukP5ngFljk9oj2OSNRBCu4N\r\nDQSVvN4jBbCA0l/25Ljs66qDbdLDwQNHJ/BijEfD9tKG3jOkMydFife6n0FJ\r\nsGmM/rZeTkrHktNf14B3CJ7ghcP6UeFiKZreQgJIEaYEWc5nIdczWgsFw7Rr\r\nVQkNew0KHVMAynmKv2D+mz1uWppi61mRuZoE1Cv6cBAHje+V9wBOoC5gc3Oq\r\neZiZ72A+FKH4kNB1BqWzf5y3qa9GCc/Fln6rpWZIzQYpTjxlD8/+Pgdwsxgz\r\n1v8tZhWejNewV3QYhdU6d1z0uhVjQ0XapQc=\r\n=5XsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.4.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/922b6fa25bcf3eca5dfd2be00876035b/chakra-ui-system-2.4.0.tgz","_integrity":"sha512-gUX6OZVvFDMV92NtKLuawIWqvjhYc0u1LCAMeb1k3ktVBjWEYjIM4DBIirEhHjcADa8ownrTEHeW0aGxN7uxjQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.9","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.5.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.4.0_1673539582396_0.8517282376504276","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230206132511":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230206132511","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230206132511","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cab7631d3e8c9d7352586d5e6a4aebc966aefe62","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230206132511.tgz","fileCount":45,"integrity":"sha512-dFIZljgXtAPk5mCT5/9maHlrDSuOS2naaDnyndH/EvoRwsOrJ8fy0nkS3TcdSAS5M08MAKPBlyft1ycqzTAp3A==","signatures":[{"sig":"MEUCIFkBhYFriV4rw49kDroAMsZXmpKCJDrFNknfsFcUN6QQAiEA19Nt5nnycYf83pzDfQTq1SPzLqgj03Tri0EAXQzQjQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4P/qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW1xAAiBORhHQCmMP+V07m1Hgl6ZTORjtzavlWx7spjeO3jn7Y58hQ\r\n3Woplt5zR7rmrM7ebTt6kqXb7nmHvnKzXYlAa9SXjeO+idZInmDexqw/JtLy\r\nQt4u9MqFskbDEhQugPiceb968z3Wa79mJlaoz+RSpleOIT06nYPD9KuDIP/q\r\nvMSUvKs3MLHJYlWeU2Gy6/Snbrgi9cQ3wCa92E4WoffV4OeeBdQwruVrR6TH\r\nEBDPgxZT2dnXvZ9A9ugEvayWw5iJ162bSpWk/4r+izu1eJAYnBQqPhzXA/B6\r\nR0P6YVP7YzY2co3Lud5Vjk23MPFIjVypQ8olqB7UdCyftpv6ExLsxb0qzViG\r\nbOueejBtWHqttMpbosvmViAPNYE+YSWAuMrD/MIEEQu+qo+2x0Sz2WHa27Vz\r\nLOgFaofoMtjM1fh0IJjopqOmQieOvz+fxvgxfpmxYTWvU7tCMtzTrSRPRJmE\r\ntoz0UtSic1dUrsGKMvK+sb4lEzyq2nM7QPHs0RoU4W2Pj/VYLA7s+3P6y9QT\r\nN85Aus71DswPvcpv+mhdA7KbCOF7lSYQtRls+xdTMADr83qTMriw8OdDmTHp\r\nCgtYyqf/8xCP1yvWHQn6+H9TUv8eDI+iUjAoaZb3RxeMLjkYubALPTCOPa5S\r\nOtYN13CErIrQEQS3yE5E9za86e7503vjwoA=\r\n=S8cb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230206132511.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8be1840f10a8ba5604715ae86a7fb763/chakra-ui-system-0.0.0-dev-20230206132511.tgz","_integrity":"sha512-dFIZljgXtAPk5mCT5/9maHlrDSuOS2naaDnyndH/EvoRwsOrJ8fy0nkS3TcdSAS5M08MAKPBlyft1ycqzTAp3A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230206132511","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230206132511"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230206132511_1675689962702_0.7342686946439649","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230206134100":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230206134100","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230206134100","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"da785a47cb9ced35c68aa0f2a9bfe15560c994c3","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230206134100.tgz","fileCount":45,"integrity":"sha512-eE48t7mAK+Ly6jLip/bHpRI+k2W0KCkFB0DdXjCnTQu/dbIEf0zRshpC9NIvXCpyx20xLYeR+21GP9ghs7hRTg==","signatures":[{"sig":"MEUCIQDF6BasXSxn6U7SOrnTcXLSnkKF78KVs5kJTbQ4jLIRNgIgMkXvIgSMjhzAy9zQuPmqZKFfoBwn/Q62gnZTRFrWp1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4QOVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBqA//VbjW6ZywEk1Eyd9cE/1KK5xuDnGOrj/3td5ROEgYXTpoTvDZ\r\nVSVBLGkNrOtjtfvaDO9sV6Xh3aw86Q02YMPPlezQHTAhYCXANwGQ2nMrb/iK\r\nHK67Qh7cyGdSwGkeI11T9eJmk2P/uo1A3Q9l7yjE6dWjrvGlRuHt0G4pRgJa\r\nY6J4oYaOV5c2KsAdI7HVK8j8F2P8djJK2yFuyHPEraxqtro5dx86P+FyoEPa\r\njZDg15FcoBCR68gMzxBXAYiOiysxLGkGzDuM9UqXgWnU5VGHNbC8P00xxIiT\r\nY7+s6OgdzFFuxFtCG1D9ctkPk1QF0Rv9hyTqHTr5XVzmVsJAPAcWfYCgEEst\r\nRH1KxrBAFcJlyWMvKIhNLoq0x24TqZg2g6/FmDhPy/yYk/V+Ia9zWgwaUbFM\r\nIZH6xQoKiK+O2/JW00RVx902SA5W6QvFoYVDGHgIwu7riQF0qP7wkVGVXY5u\r\nLDSaTEfigZiZ0vYIp9rWbxxKgigmftUi5k7Lmxe3I2j473ACq5bppXiAochq\r\npJvL12O9QMGfYmUb9vYS4W4uIELJJn51RTF3LB3tohzq4JEujw0VqTxr1IQM\r\nYekBzt0dquqhYXUQ6qTgjlW+b0p07jt263mD5VSoI/3sOFD18MK77tWBMbM+\r\nRxh9xwKRZFufPaIOKzxxZSGRj/Ksxs02bnU=\r\n=v0fa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230206134100.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/cca6179cc6a669fc326bc1eafdba5c7b/chakra-ui-system-0.0.0-dev-20230206134100.tgz","_integrity":"sha512-eE48t7mAK+Ly6jLip/bHpRI+k2W0KCkFB0DdXjCnTQu/dbIEf0zRshpC9NIvXCpyx20xLYeR+21GP9ghs7hRTg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230206134100","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230206134100"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230206134100_1675690901609_0.9712197525836546","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230206135638":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230206135638","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230206135638","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3bce0e22a150b88e24845dde5e7e669dfc8f512f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230206135638.tgz","fileCount":45,"integrity":"sha512-8dCf1P/Rbj4MDJXTik8Sr+/SV9JEmJm2Er7RHLLhn2jagNZ4vHIpNmji9gr9+WjrCDdcTV09y7iqRUdSfDaVtA==","signatures":[{"sig":"MEUCIG8KqyhJTfV7Ymlr6JoFZSzfVm5J+qc0Q/1k0P7dwb/BAiEAlIyWYcWNCh1DnijJZwzUWxSMB5ilgUpPHZg0lHBk9qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4Qc+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjwhAAmQ+aRQ+3/4Yzx4ESs5ErS1H1TcUogirA7bZXy1YKwMTlXZv4\r\nesuDi58SXEVMxm6rPHFQkqJZX3+wX4v0YCpDXiP6my8wPrLAyTvCd+Vqul7D\r\njREOdO6v3iO15oNOiWlQeNWOn7XMTHf5OM778J2Kt1V49VXwYBuo7Q/3dygi\r\nX9FIdUVykpNAXVUoRCfMs6e98/y3RsuHtai9uXR0CncsoR0QIYimt4b+xrm2\r\ngVa5p52kTqQvxlsl17PILl/XnVZZuO4uFfxifAtiK4CHk8Pfsw7DYKI1b3a+\r\nCVVb01UR+70iYMgeDWi/a3BmX1TrfCXMudBI1afDJs85G1rNTIRnLIu7rIXD\r\nW8OIpWuXAXk6gKBKW84LsS2WqLs9AMz2Ws17/6tlu/PWW1SURDCszhbo49BW\r\n/FHf9mPQLNhn40rv8ibqicUjizXx5ltH3tcjpZ7K982OQcs7r3ubm7P8y+M5\r\n9iQfjtCd/sfJGNJ+hOWKFS6tZhSys36swuFz8RW5ziMS3UU+CwcWr3+1XWny\r\n7jHmo8R/v7nSjXRtQoF4jskyR6zpjKjae8naG9NxyK3QODh/nUpdrS4WeBcC\r\nLvdi6414IUMQmrcCDYfguIb8q21EmMQ4GnLrFs7xCzg1WNznwf0m9nLx55Ju\r\ndpNT/XQnFMob4iwn4R5cMK4b6W5T8pDRWPg=\r\n=fny7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230206135638.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/eef62157225bd0f64357f97929657e3c/chakra-ui-system-0.0.0-dev-20230206135638.tgz","_integrity":"sha512-8dCf1P/Rbj4MDJXTik8Sr+/SV9JEmJm2Er7RHLLhn2jagNZ4vHIpNmji9gr9+WjrCDdcTV09y7iqRUdSfDaVtA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230206135638","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230206135638"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230206135638_1675691838518_0.7877449827085463","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230206142400":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230206142400","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230206142400","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e8241cbd30df1c4fcd3e067cf83e8a2df766d120","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230206142400.tgz","fileCount":45,"integrity":"sha512-PcKecVgUPnHYR7foncK+Ia3GElVgjmACzdRsZWdH41WPjt3NwZ7qC6BbIcn0dQijpY9WvCJ0SlYpPhXZCdSYKA==","signatures":[{"sig":"MEUCIAezzsoHSe6l8XfK4Fr5xbXJUSHpMOhMP242TEAnYrKpAiEA/mbirWzC2AfSvfBqYTesFhxLulb1cQaVRno8ytmJGTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4Q2yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyGBAAlghrzN2rKVTsWAT8LEZAXsXRZDx94hhJDbpfSmhhsbyeyxoX\r\nyKYnoQQho9aI3l4XJ6sSZIQFCdfUftfLAqJCTzieUty9akiADb0LTxTv8eAe\r\npyqD/wuJkbsXjIZ1iYTP0Si8tKJIIKS+6Bk1MrefI8SwfeV09gnVbgGG/fRr\r\nmbdI7AqY4lu5GJR+uiltYITFvbGF6A2+YJKdXlDS1Npo7BEYzO8LYcmdknp8\r\nx/zDEwaQREQm6IOJxwxDCcMZ/9ByLoHyWjXkGdtZOKH0Gt19qN6/Z4KCqY39\r\nIG3u7CqY2S5O/Ee4Y5IeccdOSxJ8cdf79hHh2LGD5Q+pBS3GPHczDX6opa7t\r\n865dzZOes82/afb4+ucxjR3WaMdwjQwDK7mP3GwQmrpxgMYThIBmyhXEEJu+\r\neBGCtVvNFWEfDDUos7qys1aBXYjhwo1R5NWhTVP/maQLk0ZgkVVlrNVwnywX\r\niKMnMnLSGm2QP/nYkt1HV51Pn+3tpCPOb0PrOKesaZqpjXGApksn3fMGT5p0\r\n87SuEcUvYh0qnXdh1+4Ovlyd/2/1oXpS/SIgH0JxOCookj+VjakALHdUgOXw\r\nk7ioLHBC8s50ShGDdpyg06923agh6z6WQ+GvDwBa+a3Sws6rJuBCghI2/Bq/\r\nA42suZkRWdnmzVbpqdA1LGGfGsbWWJ0BWxg=\r\n=FLih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230206142400.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e6a7671e0592f619ebbcabc08579ec2b/chakra-ui-system-0.0.0-dev-20230206142400.tgz","_integrity":"sha512-PcKecVgUPnHYR7foncK+Ia3GElVgjmACzdRsZWdH41WPjt3NwZ7qC6BbIcn0dQijpY9WvCJ0SlYpPhXZCdSYKA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230206142400","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230206142400"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230206142400_1675693489810_0.43873764731583864","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230206143950":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230206143950","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230206143950","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4c01bb988d9eef1f6cb14b50ec2837b48f8fc3cd","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230206143950.tgz","fileCount":45,"integrity":"sha512-1EWDokwHwrovY7jWvpYgNfMyAjU78vcKEZ9jfuQzcE+/0Viz1MEj33j+yY5lX7OxIo1mtUFo8LtgjkX7rz6whw==","signatures":[{"sig":"MEUCIQDWQCB2QHO6OojnRcvpPEtyZ9ZnntIyLwQs0nYBmDv65gIgdk/cnl9MoL+cnPgN+ADg1Djaq+8j/+aN64lA2/k/TcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4RFeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogUQ//Sz8btIFd5DRKwCkiLN03hdenAhCWw2uhPanujrgrNbOQ4yxx\r\niNgj8p1MQBdqvmNID0iG7iwH4JsF/mf6WDO1VgFI4nNHKYbk9+KeDpFPJ0KE\r\nfWv3YIqky2hkYahSFcQIlyRatz9Ws5T1RhMlBB8gJPZSna2ESseN/+hQ3ufC\r\n18r4FgdxrymT/Rm3C9L2xsnSKz26BK3D5iqAWILsJ2RTDL04HMOvurdb7+Qw\r\nAC1UECmN9OarJPYtJ0JHvNmvBRNbFQKdDQ3cgv7yrRl2X4Ovv++LS41GrRKy\r\nM7uZpq80n2bm4Qt3HZZIrCYPY5NvqoNnHHzEI6rwffPuhgq/Q7+ACF2dj+Q/\r\n6u4QZIPnDqdQXQytPf2LqlZ1xUvArOIDYMX26JRh9h3BNRxYIuyV1OFGjqyw\r\nJWvK5p3QTXZJYBHRc35D2uS8CpEdrW1wao8PjSlg89ePc4aVNK4Pud4tRH5K\r\nKlkOyiSKBEEyhRkyxzoQp7/IDf6nkJYHgef5E9bfytjxE8wQXdaecBUjqslg\r\nOA/LI9Y8YvXtYo/4MXeUG0NtdOTKxh3/lnu+7OvxdZQHVhbCOhNSObha+QfX\r\nktGk6qy6RwXDjG52I73V46EDYBEU7VSrF9gHN0lYITYohCpG+nyAyzyvp5FE\r\n7InR0hzdp+vyCyFXjjPmRcO/6o4ChbitphQ=\r\n=jy/i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230206143950.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/94daf517ef28a45ca7bfcff2b06466a5/chakra-ui-system-0.0.0-dev-20230206143950.tgz","_integrity":"sha512-1EWDokwHwrovY7jWvpYgNfMyAjU78vcKEZ9jfuQzcE+/0Viz1MEj33j+yY5lX7OxIo1mtUFo8LtgjkX7rz6whw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230206143950","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230206143950"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230206143950_1675694430494_0.8572879621827867","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230206161237":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230206161237","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230206161237","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"2fe9fccf4a5a0eb1f9e5220b9aa143425f53ccb4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230206161237.tgz","fileCount":45,"integrity":"sha512-c1gwJcz8rhrgPshGCd9fgOciTnNfx7C+L515G6fSdN1o9+eGgIc8WYeiDlyXlCMWQD2y0iryZM938G2OMSYWOQ==","signatures":[{"sig":"MEUCIQCdgu+WLNiPUjhlHMeio3qZTwxu5q4SmtHn8aktvZ79fgIgceyTT/AzP8x3skMSbzSTkktF+ZqzUL9Im0r2ojWHACw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4ScfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJlA/+KtizJ++5Gs8RNxdzYrzH91S8PtcmnPKjfbH6XMWxV2UixgqW\r\nKpWcnjF8GmO+Uj+mrOKJ6Ev/0FtnrLmUmUaJmSGxV8lU5KKPevLWSKBukikA\r\ndRxly4hTpqDRbu4b8TFj4TH+2cA5zi2pZm/2xJV00WkGjMdE8b+57v+A0MPV\r\nQreMIsviLLN+Gbax/2BNuMa75YByrMtP+UZOoYGL59YCMYlPvzPvY6vmEUBG\r\n9HCCX8tGQsHKuc4CtIncIkS+Z+E18xZ8gcHmd7FGwaSSjyrnJJWoN/daqyuT\r\noxd4BuQ/gSykpVz6LKPZzVBl8t39WR5IrXdc674hIIe325dLztNeG55Lfvrr\r\ngQpBtXjFDR8nM6Ikqz2lPX8HDVq55sKZyHkYZhXzW70UFPRtw/Yedp0C9Kpv\r\nCUEWcdA9EV58D7DzmQGwRx+uaV9Teozuf9Q7FUBpa67mygTccVq94EbcljOn\r\nyNV+cEfXKPkgdI4zZB8H1Uat/w9RlLCp/P1JbRmoP+WIlSXQZ0eZqa5VuD4Z\r\nKal9uNzgMY8ONoL/ifjadVIsj2giooUK+P8Zx1k62cjkfiaXl3qWLGpPtrJz\r\n39+KC6EP1Nk5EPOodN4Z1qMcWMpLM0/Sam13uFW6H63DcC73TRmh84mERL5D\r\nAEn8PF5MtP6cynohvN6FZYiYVK4L51JSFmY=\r\n=Iu5i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230206161237.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7a427168e34724310f2ea38aa84df2f1/chakra-ui-system-0.0.0-dev-20230206161237.tgz","_integrity":"sha512-c1gwJcz8rhrgPshGCd9fgOciTnNfx7C+L515G6fSdN1o9+eGgIc8WYeiDlyXlCMWQD2y0iryZM938G2OMSYWOQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230206161237","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230206161237"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230206161237_1675699999532_0.5129036532146358","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230206162801":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230206162801","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230206162801","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3b7af34e0c601d5e07865ae2acdfb313f5068834","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230206162801.tgz","fileCount":45,"integrity":"sha512-0nJmPSEhBf0hlxpjmv0cJbS/QrCr2cDEuxvC4WzQuA1aewZyW1dO0jMYbAkZX4FFfpIMPigYIhaEd+d4eQZGQA==","signatures":[{"sig":"MEUCICiTIo+LTZ0xNGfQlYx+ceDZBn97+S++Zd0QrQmBl/J1AiEAwYokFsAhBtreT8ZYvGA7FzpmFiRB+3OZaK2sfptK3oM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4Sq5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQnA/+Kmo40Og6qaV5H3/K+fg4O+ZQLBzFsNrxtFDyiHzN3bqB1Vep\r\nm13kJuE+D1evSQXlZcTjZXGJHjbxdjLp8nZ6kzwwYF8rrlW7w2xVhnyC0VWF\r\nWUZ37GxYMORNcxY+WFwu4cdhk/2SH1l4HDgBE6jBms4jdWWHv45LRUohmsJL\r\n1RzDg1Kpt+CTUk8lnjMdNjSbTQsJkxHOso8wyPzKJK6RvmS1bLEnuKPYGKOk\r\n6Ft7sQtZpnq3d10AF37dK82227KoQZ6IuQl8KQFHQKoiwkLTl94ZfHemdYe0\r\nz/nVkeQLuA5YVXXZcXq97NOjsmMhBfJlX3a2MdQ6Bb8YW0foxSXi4Cq8AlKk\r\nYmQx1enYpHuvpjTeBbr1QCUEe2EMUdIrx+YtX8lAUz4NVToOoIZBd61o2SSu\r\ng/FTMYKjcx0FpJvb7yAoRxDk2O1JSYJ/P9JixCvaX6i2Zztn6LPkNUGT0cwN\r\nDFsHS4vnxkEozT5Ddnu0CA5gbfStzDOC16CuxB6AjQ4luTj+c9MwTQfR636W\r\nX+xZiJYhYej0jMYpUQaId0jm8LPU8J42QI7b8cKs3yKGFBs9AXjysllqsE5Q\r\nRcwwWn0HG5hvfcIsQzySZk2k0ATKwqFoGeFlJDyTqant/8JRzXs8un0Nf8n0\r\nkp+oNkjWrFoKfrgP01pftASXIym2szSkp7Y=\r\n=5CKc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230206162801.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8bdb1cb1150233e6cbd59ed63c05c3a0/chakra-ui-system-0.0.0-dev-20230206162801.tgz","_integrity":"sha512-0nJmPSEhBf0hlxpjmv0cJbS/QrCr2cDEuxvC4WzQuA1aewZyW1dO0jMYbAkZX4FFfpIMPigYIhaEd+d4eQZGQA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230206162801","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230206162801"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230206162801_1675700921451_0.8360942742880331","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230207150933":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230207150933","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230207150933","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"81aff171c33498ccbb120ef988607ea3e8573b5f","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230207150933.tgz","fileCount":45,"integrity":"sha512-8nVPbLxL3lOtOd4wVBJLTDTRh4xbkv68zvM7IQ8mPHRIRymCnGi1oNnslj+jvPJiXpGjG87XQd+GoHLSrLByQQ==","signatures":[{"sig":"MEUCIEvZ8y2IAFB2fe0ROlB/9wFT8/O81Ak8zgoH4IdmV4q8AiEAi8F01+sBs74T1/refKhvhTYwTDkMI6ZvEcJV+0TqN0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4mnVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1CxAAhQJDdQnUpkdTGN3qPHi6uYdhil2NcOSXT6qwW8JOsA6B3PdS\r\nnThKSBZEmU/M+3gL/dDvn0TB4OdG0RNFq2b2pwWH3IJ2iaVDwLbP9hwe6KCN\r\npMKPXAV2hCt5/CzyR1NdETxtPxEk5Gvw92gIswjUFLI/Brwt4kwf4xHvVAPf\r\n8wXC8zraRA/rFAYbgJwbHpRq9hU7xrJR0m1dSxkhWgpVQoOui+suJMADxuoL\r\nB+fv4OHF4yyB0a4PuBGGDLGLLW2fwWxf+7NnXLGbiMmVrgH9fgDJxWLKwt92\r\nx+8LwYvdIx98jdAYbz9HwKE/nP+6jhdzcdhzp3SG5nvpxT3p4JNWS//mZt+4\r\nq9++oQhZuqy1/429rXrKwCXfKr4pjlf3hXhKz1xeHsAgyomp1MO/94jdoEiT\r\n5dJKh08pxdZM9ib+UIwZnKvqQhNblf/SveSdrKraCtjuYNLCmJFYi1MMhcW0\r\noa9tNU4BFdr29TEhc13U2ONDGhMgRPUTg0zsBwEX9fulDSoIHn5l0OLoi/yO\r\ndLLXGTEixUiNMW8qUzsIGEUDYZxAKIw8Yy0nFOgQCF/Lf67c75NSazaK7DHr\r\npZj5TsxwYHr95EB5X3D1KXZAElmIR8Qd0clH6MBRedW9E9tT0tyWu15985HI\r\nQsVZ0HfjVEII4x41OkRZEq1xQaoJGYry92g=\r\n=SRGA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230207150933.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/22524f8ecc9f481eae7c0af5df34dfa8/chakra-ui-system-0.0.0-dev-20230207150933.tgz","_integrity":"sha512-8nVPbLxL3lOtOd4wVBJLTDTRh4xbkv68zvM7IQ8mPHRIRymCnGi1oNnslj+jvPJiXpGjG87XQd+GoHLSrLByQQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230207150933","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230207150933"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230207150933_1675782613336_0.28458040801909346","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230207153012":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230207153012","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230207153012","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ac12d300ff178a8e5cd400bee5631d9d15daa009","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230207153012.tgz","fileCount":45,"integrity":"sha512-B5xFv1tX/OmKNhi90THFU86TNxtInC7LeyVVxVuLSr1YxPK0fHZ4M7DLsisYZZdFyYc5dt96pUoCF/cG68v/6A==","signatures":[{"sig":"MEUCIQDPCwudUg7AqJPqjdkco0jJD59Lv1/epGLEyqocZBqyzAIgYXgG5tqBVYwT3Nf9SlGblUAF9+oJ1ZwbD9EM3VwgFLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4m7DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob/Q/8Cz/u30SZ0wm7AQVRtqrjtt5H75+/8Dkyuosu+v4mf7C6HcRo\r\n51+FeArPKBmEJuTU1v34L+TSHkbgOpI9JT2haT95dAhahYjqo9c/Knar7+VG\r\nUdgZZFI3T8+1rE4jFejG5+OYITHuI0G95tlZYXSSZM4Q46p8cNzXmnjTCR/B\r\nw0JRio0lNacIDVPhDmNU0BzA6k8OkPhadghma5pZc6D75A6xyeM/KBBT07+h\r\nTDRjWkHFSk71QuTVlkUfLmrpl3XN6BnHzYlkUX8J8TtfmFaMk0T/EPmPApxP\r\nafiRv9izDc66pf2zWu9lxdeEH5++rEXCagBgZociMk+5PJ3ZN0sM+lbFhHgs\r\nzqrwpKeqwHsCSLhb6XLKHaca2yp1aZazroW7xns5vAXGha7Q4YuwreqIett4\r\nQAEpz/uDhmvqy9Qq0nprTuRhnuJXnRJ0WcpXOub1JcltZRCJTJzb1RURMk21\r\nri0oPqlYEVAE0yHFSXEadeEXhHmmPjy4BbK/n280JwNTgtUZbfCL42lt0T1H\r\nu7R2hRkxRnGOMLTPMYuCHfEmLf/RyQezKSywVRb47AkbbD9iyqCK6uHyeaD3\r\nKssHsUi70a4xo9IUio4Nt0HMMMshy6YBV0r/MzMzysTeMTLeC8gX8Iygck2E\r\njkLecqRrA1llZ5dkVEp1IltQ0BWvbQsvVDw=\r\n=hFVO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230207153012.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a94af854697fb7d9120f40c5cc822ec5/chakra-ui-system-0.0.0-dev-20230207153012.tgz","_integrity":"sha512-B5xFv1tX/OmKNhi90THFU86TNxtInC7LeyVVxVuLSr1YxPK0fHZ4M7DLsisYZZdFyYc5dt96pUoCF/cG68v/6A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230207153012","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230207153012"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230207153012_1675783875219_0.5448477807987833","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230208112929":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230208112929","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230208112929","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0591005ac7bdff104cde702e118c6232c0c1d77b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230208112929.tgz","fileCount":45,"integrity":"sha512-tefbLa/FTshF/USpYFSpGx1PJl3erYeQOd4HmFSrGR4TkEqer3gSyYGJC181yc3rZm57zZKtUhCabpBGQzV4Yg==","signatures":[{"sig":"MEYCIQCzj+MKFMdu4TaZ8zHS7zY7j8MQdQTrRJMkTWg+fluzxwIhAJcYDUnbzlb6UEF2IvLCo2srRmK9aGIJyQ+BEmFTWkYf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj44fXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqByQ/9H3sPNU8EkgYlJ0m7ud6VaM0tVWB7ts0UeloPBZS3kqYRp4zi\r\neyWoN9UFg+V3E+B6IajAMSkBtPoLP/VBM9KCp/LZ2cup2LZ0Ond0OAY85w1B\r\nsmROmSPpOCgIXayywZSS+hnOb6CDiay3YDQmKrmY5ekZEF9goOR21/XMyqBF\r\nEL87KhgmYVAikJQozsiCUG+DtdKp0/YjbeHSM9uUSkjq2yhMiE+rzdY2/Zij\r\n6wtia6rx6wyB7bAh3Odq58T3u627L2gffRY2WyopEbEPdoPz+LtXb3zPq21n\r\n0socXMf63rw9i5HGk1wd/CoFct4EXPUquKQhzkQHSAOXwgDj+9OZmdhFNtJJ\r\njnE3dyrKAzYS4cHEuIF/iKNS10nNbA5FOoM0eKVkvtaU2IL1qYFw2JGAHeEt\r\nJLJTc0c9Zo7qY563p7s4F4NzEME78FqHQGXItRByjwUxv/7EltWbWgbd0pUO\r\n48Cr68xwZ+kqKmTDOjOF+zXqXGEScjvvdBprv1h6HhWuRzbRAn7VjQJ8gXTo\r\nltZUtyXccOEd4aOJMC+L8UtKJbJddt1yuMIUqb4QETiL2xFt9c+UJnxJiLOW\r\n3LezcGqBtBWa27eUDKH+H6EvXi2BUyUDe8clQfPterb3/bvtUZIoKrG0IUDy\r\nbO0fAgpI4XZHuEGq63G0UD8ghJg2FzvZ6WY=\r\n=1nnW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230208112929.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/340e3b5e21d7d73ea4762c7e0ef6635a/chakra-ui-system-0.0.0-dev-20230208112929.tgz","_integrity":"sha512-tefbLa/FTshF/USpYFSpGx1PJl3erYeQOd4HmFSrGR4TkEqer3gSyYGJC181yc3rZm57zZKtUhCabpBGQzV4Yg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230208112929","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230208112929"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230208112929_1675855831307_0.9830708836213982","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230208114919":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230208114919","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230208114919","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ecc0da2f1c19f5d315d5e6d7c3e899eff043b5b7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230208114919.tgz","fileCount":45,"integrity":"sha512-DapLtxfn6dYxDMhBWLoI8slhQUXMYZpWmbzz9TjzeYdlWMJGei7ZjR+Hbwy/TdJkzuoh7Lpz4kGsoSTe56RqaQ==","signatures":[{"sig":"MEUCIQCAVnhUoVkcdyR82TbL3wRnvfyhjXPKuQvXtRa9TTGsKgIgcs5VHN/+mZxBrcH5V362qpOeG+mO6W/HWhAdrgQgbG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj44x5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqHA//RRKYd7iYJUfXnl/DaYvU0s+ShaiGEfo4kxL50I6iNtOat0gn\r\nX5ImYHqCJrMUUatLWeXmtvr2nuwB5NQayFdGZwnFdwkp1QSn9NVKHJ0GsRl3\r\npU7WF9cflltxtxPV8I3KV+PQVBKxW+S4paQxkdJ04B0YTGxF63GudyzowxBF\r\nuhUOnYvdAuS6WwRUh7sHN6Z4xfDxTdpEMOzTfr9GNT7zrvGEyWDVMuBSgDp/\r\nMM0DvVxMHgA8agwtvES0loSRInftwoeGoxeJcjAVfkRYu/bbDI7oKPyoDbSx\r\niXvycX6/emQkFl9EAPvZ2KaC1kmJz+a1vll4jEABuUXMCpvkMsql8tIDB25R\r\naaIvQEmM7O267qiFU4T6QYsRaVJGHQtKKJK/qYynfZDmXuxdeg29kzVb0Ee7\r\n1Zrm7/08AXv8OUtD722TSf+8mT5H0geVzknNwo7eRDZ7II4wkQRdVmd2HzKp\r\nBqKO3HfKfZkBHL+C6RiFPVNHTg2TANZ/RyvjTtF/T4t7Gpt8r69qgW6YKjjz\r\nnQ3cHl4WzU7JIcJD+FfUDy48cVc7Ohnye1eNtVvkUyb82Sg0jsgKE71XRJN6\r\ndE3yGmCH4Ls3GVLIYm3o2r/Mg78UJZyNnh86rfLfNxfkBK5BMFFG6grzOyX4\r\nJz6EYNqli44cM+Opn0JCdY1WC2ybEjDtKnU=\r\n=qLTm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230208114919.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ec1b64805b82acf8fae381301457e536/chakra-ui-system-0.0.0-dev-20230208114919.tgz","_integrity":"sha512-DapLtxfn6dYxDMhBWLoI8slhQUXMYZpWmbzz9TjzeYdlWMJGei7ZjR+Hbwy/TdJkzuoh7Lpz4kGsoSTe56RqaQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230208114919","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230208114919"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230208114919_1675857017765_0.7366895588861391","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230213123249":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230213123249","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230213123249","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"10fd578fd98d17c16f91bd3c20246d93d131d5f7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230213123249.tgz","fileCount":45,"integrity":"sha512-dlcrm2SlCrPZNt5GOToDVAjkiD3xrS/td7n7WVxMnUwQ7lgDTlIDMXC2AlE1hp+HGO7FbTxuETIcO/qe/TNEOg==","signatures":[{"sig":"MEYCIQCorCFsRXvq0yEfcCCcQ/nv7bbSoPQW9aPEG4l/UUNtqwIhAOTx+d/HG9DoDPbmBJAOumkWb3249MZgc8gTrtJ9EPA3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6i4nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqE7w//VIBjCfwVXO6rX5GmjMfqTm5qoqSNv6t5jcuK91VsMcOIAxoh\r\nL8zp3t1focbGXCPIR7WYoazChZ9s4UqIfP94QznSsYtcmZnsoNkgEnT9fkEv\r\ngF8a8DQL3KVjeoodO9yktzu8mR5PDKISjD6rOOPCB61deRzTotDsECm2KOSW\r\niMcsegwWEhd/La108CtC1jCQ/+jLBN856/36yKQmcQ9CnWSvq7Ivn83XDS7S\r\nhfk63nF2ELqb7axj7O0MbwkqG2IdWyLbZKCrFONP8LGUKldaJlazL1YpKmbH\r\n0eExTuEGDkfC2AJidxAa2mE63XYBCO0sfQd4D2BSAT1AJohkngBxqcWWY+kJ\r\nwXnOlsEygIwL2u8O22ArYP0S8t/v9e7lw7MvflnTco/Qv3pTJyvqLhNzXb66\r\n4a9xMBdQ93GoEUx14cS9kixtnsqvLSzyZTLmHrY7mRCHeNrC3hOJ1mVIGL7r\r\nvWvDZa+katUGbMqPL7zTTGK+m43OalISXj4RXCiBfVkGBxKdGmapxQWbKH8L\r\n+14GIVrvOxXLe2pbcBpXFoIY7D5wAPj1+b+3VIrzqSRHCbhC7ZSDLflXHN+L\r\neU5/WcxpuncSEsxfzNkxOhijM05aNe7VaUIqjTc+GpwoUBgQ4gN+knXJIQKY\r\nV7QpHDaal4iX6IAP7rr6hGzvRVzHHB+NT4Q=\r\n=6Y/z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230213123249.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a6e065236c33f186c9795da82f14f12d/chakra-ui-system-0.0.0-dev-20230213123249.tgz","_integrity":"sha512-dlcrm2SlCrPZNt5GOToDVAjkiD3xrS/td7n7WVxMnUwQ7lgDTlIDMXC2AlE1hp+HGO7FbTxuETIcO/qe/TNEOg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230213123249","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230213123249"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230213123249_1676291622929_0.8990850683582188","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230213124817":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230213124817","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230213124817","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b27535df2463c5c6b8620adacfacc36e921022af","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230213124817.tgz","fileCount":45,"integrity":"sha512-qx93lZl+zJ4DZuWBkDVa85b8khQxopQItXHUxvSn4LHwmj/Xl/UU0E10kwbt+xRi137YZeN3Kmcp6Ev869IiWw==","signatures":[{"sig":"MEYCIQCJPZStE6y0sykcHmZXzcu+C2I2oKFyzrwDSCdO6CYIegIhANIGIM+TQOxCOTvT0oo7n0zw92jk7ORgPF4qcDE7uXCJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6jHGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNIg/+OeaydX+8VmwA9rXN6S6sDAJRSK7UgJpKuWdRvC0U2pFe+5FC\r\nhH82uktGHWjQJTxPTwOlbvQS0+heXvfcDol9A13bxHISUMmIhhWCFUjFdFzp\r\nFf5f17EQuAJvBtn8nrqTgQBN60PWuG248EaAX4sHALbVkLAtcU1CYcDp4z5G\r\nEecqSCyG+ZGNm4rZpVMwQVbp2MsZYioMhEjx4dhaSKX3jMGRAoOpjD9HRsQ2\r\nU8TnSHEp7H0C2OAhlULM1p2S5vrE/OHqEcBqJVvFkh/Ls71p6oN+079V6EJe\r\njYGn8j98LTyo83Ktq9aqfYFYIz9V2PxYIPmW4YqYjqR/3f0h/ZaQCo3beNZM\r\nAqnPa7d6EcFak+QgYMJZeG7Qiwhjhb4kHudBDGofi5uq12D5Q7NEaj5zyqfO\r\nDOngDCiauhm7BCADTAsVTOXLhT7HPh0LTfdpVqMkEQYWvs3pUjaIRdfY5OZn\r\n4tCP4VfJ5THw+KVLb+JzVXb4ENvlK6crTnRFoUXegCpjoLPAdd+lliLVfUyE\r\nEJwWhx4f2Nu5KnVQdzOKwGF6AavjPBh7zVB3NtYJEtdM0Et2Lf27Rxdg3PJ2\r\no6Cj/I3zhI0BInVqvKow0GgR9JMJ6m0SWfExGbWarIzISy3l6uDi4re3O5gk\r\na9Lg/yRpu/nvRtDqcs6cHC6mvumdexbSbTk=\r\n=Dkzi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230213124817.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/475269ae295ea100a5b5f388429d3dcc/chakra-ui-system-0.0.0-dev-20230213124817.tgz","_integrity":"sha512-qx93lZl+zJ4DZuWBkDVa85b8khQxopQItXHUxvSn4LHwmj/Xl/UU0E10kwbt+xRi137YZeN3Kmcp6Ev869IiWw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230213124817","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230213124817"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230213124817_1676292550569_0.08191584739406665","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230213131136":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230213131136","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230213131136","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"145c16390c9eebe757fa864ae47f1cccb30bf2bf","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230213131136.tgz","fileCount":45,"integrity":"sha512-Juy8tarPRwAo8DErbftVPsepwhiNYiZLOITZTIFRo7TCRRadj7VC/1v1p/aWb+29Zc+fHJIBIoyfn6HOlLo2cg==","signatures":[{"sig":"MEUCIGt4M3pnDoLaNKredCbr57VDCTmcUPZxEgARRMcxIzqwAiEAgGjUeepCdgTJZj52NMRqhBxEIgw/ISHWIqiV9b6dePg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6jc8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqijhAAng//0vgNzx2fxv3cxVp0kT470bfRig96ltg+mGUHvROcG7Bu\r\nB/PqIoxMhOTVIP2OITQp6VCQtglzn/d7uwZ4GNfXPpz5GI0i/V9D1CrJWmtn\r\nC7LpOvW8LrHUSKSGSblHqPbmgsgWMfPshH6m6VosW6XCspqvDIlWvHhsZsiF\r\npHhdci8pQ2WeyEzLdJxBF7Wcav+YdFIe1yaXhE+HrzAbNQuqLL8b19bm2ItV\r\n9SIe+hz/lA3aIqku2ZA/aC202n4Yh/ij7JU5cXzjCYxT/MhR40hshifNBKPv\r\nYykF2me+xWAK1uPvJ790ZKkuprvoVz/AdE04oNwFoD9wKxSyUaDn2NIRWlQl\r\nHVIVF1gERMMn8+vluDMdjYzGm+WaWPfiEQwFw/yCeZoZdBzDivtzhUc6gFlv\r\nO8zin/ThlTkohxr12uRPebEldhcx8HtvfaWqbBoalSWLgWc7EHaGLY6zdi3E\r\nyUPwJbqD/gZLtqgjJOaLnivzNdppxwdZwyM1Eq5YR+beL8lX4OWpR3HMXBO3\r\nWz8OTs46oY9N2sI1VlodTYlhZJTF7eTZugKfmVf+9XTXdOR5EYkNT9CYUgj3\r\n2GYamsfAJfqBw1Xw5kIHhm4qri4bfV+hAwe1G6WGUeJvaE4ItxbeG4odW4HQ\r\nNAxLRKR2aTLeq4nQRIwkuQM5DvHQ0w1lRqk=\r\n=LQP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230213131136.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/30dd7d951bd773b12505bd93bb5737c0/chakra-ui-system-0.0.0-dev-20230213131136.tgz","_integrity":"sha512-Juy8tarPRwAo8DErbftVPsepwhiNYiZLOITZTIFRo7TCRRadj7VC/1v1p/aWb+29Zc+fHJIBIoyfn6HOlLo2cg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230213131136","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230213131136"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230213131136_1676293947730_0.08873901393159023","host":"s3://npm-registry-packages"}},"2.5.0":{"name":"@chakra-ui/system","version":"2.5.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.0","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"03a6c5919d985ba6dfa617af5e59ece460020828","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.0.tgz","fileCount":45,"integrity":"sha512-Gj31pElDy8VREFHNQsG1sMTbXzeMrmmStuejsOOea3fITHcP1Zo5PYxfhWTudcjbtEZsX19lpEOK8xbRnq8KcQ==","signatures":[{"sig":"MEQCIA82ZZJ+j0qzKaghNGt1WEGdYnznyPJxE/dZqfcfjpFuAiBywVOFwZ4g4F1NC7R0WZzNApY6PRaQrE2AJPzApJOoCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6kZOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn4Q//U5Gc5D7heMAD1xEvpJY1Kg3MbFOKMmueDXxDI3hzeP0+kXkP\r\n//npDD0rjDtWfzNgjwR19w4K/+nzC+o9qVSOUytA1WN3bGxn0MPOXCnSq4ee\r\nLnRIsCQvcsXz+VaeryS02GTsWFxwNwwAWor5OhXsDMNc1YmsNmsPhPNupdp7\r\nkMZuepoOjeDq5EY0QSXOeAS9DsXOl5yEKf7C/HPQbVpcaDQokMWv9DL4cdzi\r\nrS9fQBttdWVX4j0exS5aGMXo5yrURCzRnQxFJQrBdGdJvv36RpFNcnZPFGOm\r\nUkOBi6frfLquw/8pXwKI/rKgofSDDX/U0Q8MpuaXXVFj6uhV4onu3uQIO70w\r\nPsDCsoG45FZq3jcRdj5YrD5zL7/b/KRo+L2d9ALSwuxWKU7IibXBRj0ktM42\r\nhEjqy7tRLjoSX5Db2wulbJLarK4wXfQziW20ryHDC/sKXRVze9l+gijv0Akm\r\nG7cxIBuoG4S5Xjk/g78/TstmJoEDhKXTgZLcb9ctvAtqVIXL99zefCiVbu9c\r\nzlKkfpSKib+0O1QnWAC9SFjWXSA+LP3dluBlD2sIUiXxl7IPmNHCpAWFNaY6\r\nCI2LmR3bMbV//n9YrfdSzqOSwsx7yRt4PPE623aj0JDRqJ90JPb9Wqoqjxr8\r\npQP9mEvt1I2m3QwxJd/Y7HuOH9gPGkEagSs=\r\n=PpjM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/01c6d10eafe64c37002a943ac8aff47a/chakra-ui-system-2.5.0.tgz","_integrity":"sha512-Gj31pElDy8VREFHNQsG1sMTbXzeMrmmStuejsOOea3fITHcP1Zo5PYxfhWTudcjbtEZsX19lpEOK8xbRnq8KcQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.10","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.0_1676297806357_0.7346781867195245","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230215112011":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230215112011","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230215112011","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"004aec5320c24547f76a0397fee428208982fb1e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230215112011.tgz","fileCount":45,"integrity":"sha512-fwbFMJqoJtxX2BsLqCSU3q6AOZRHyxgky/CWBnKbMKRE2jUveoTs7mhLz6Amyxf5SlXTha96FCja2NbM3JBjQA==","signatures":[{"sig":"MEUCIQDYY5YgAUgNzjCZpQZvQRpg9UyXRUAyiaQPf9WZPk7ZcgIgf4pbgzCzVuHnbYr+CFW+Z02eui2Z/2rL7/pyRm9+Pqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7MAXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZSg//exZPp45+6HcfjpncUfsPh/v40+ADwbU2zxjWr3l1HZ7BAcn9\r\n0ecJ3llr+wSm2DX2PeQnjBsntsQBKsUpD6cCqRxYWr92ceaFJd2JFZoJNOty\r\nZbK3xaQlTqfSuwuBvptreC4h9aE8Ygm8cPAYGWoCfTwbXwqTdZb/LGP7ppKe\r\nj5friclPYirhvkoL00kdz48BR5izgL1MwGxERlbaEItw05aY7d63TwEB5bre\r\nBsavw3gM3aocfVcvNfH5fmZBi2OXs/DyltsKEk7x8LQ6J5rEuNNuaNqvsZ5y\r\nwrbLj5U+KCRLtsAgH3jiEJxDXyasNONgOx9mWUVM3f+QwKPyhyEAZIi32jS7\r\nweR0iwu/LHB4pObrMuXKMK0MkAUctiAnstb2NyNRbuHd1bOjZNj25IWDW03C\r\nFshNp/GttvU3RAJzFVDAlBPxwWML8TmQkI3ep/l8QIpVl5pc4+Xraw0823BM\r\nXgJmPG3HqVWTTOl9q1wUwmeSF9lVtpcRp4vr8oaY1H474LOsdOGTjnG98JkW\r\nuNfRnep2plOdyTO6okYEOG1jP3+t94ppfTwMNUV4lMUZgB29Z5kTS0zjBSEP\r\nTA/FRoDWpNyJUVxLtf+IuFQbUldvRC+I8GZVTXoPmJAT4GObpyfEGCYUn2ox\r\ns1L3I8e7TiPKup35PEY2DpFdsAefDd/YsSk=\r\n=MaS3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230215112011.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/401d15ab119fb048ac02fbfead97bd2a/chakra-ui-system-0.0.0-dev-20230215112011.tgz","_integrity":"sha512-fwbFMJqoJtxX2BsLqCSU3q6AOZRHyxgky/CWBnKbMKRE2jUveoTs7mhLz6Amyxf5SlXTha96FCja2NbM3JBjQA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230215112011","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230215112011"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230215112011_1676460055023_0.5527913656333834","host":"s3://npm-registry-packages"}},"2.5.1":{"name":"@chakra-ui/system","version":"2.5.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.1","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bc03a11ae31e795966c7618280548d5cd866f47e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.1.tgz","fileCount":45,"integrity":"sha512-4+86OrcSoq7lGkm5fh+sJ3IWXSTzjz+HOllRbCW2Rtnmcg7ritiXVNV2VygEg2DrCcx5+tNqRHDM764zW+AEug==","signatures":[{"sig":"MEYCIQD3TMlFpzz6Pu3k1H2DFTPtSFmpf/wybk6mxE/3NKNP1AIhAOxR6WpQxku6Mdx6we05dJvfiVnbL231TUTQeLbqUfLh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TLNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgcA//TcZPMkaAX64q2z9QjSPY0OlwKL7ybqDklmkI/0oGst83cWta\r\nxZaZrBCFOkrI3IpzSgXiFeSN5ezcgOKSZIEBUb3LjsoyhIaecDy8iqY1EeCl\r\nAtQp3KDCOhKP2HFtVvG3+f7YOeYflTCvDMxwnGeHs0BIJ1E6vncFF1qiGM1b\r\nviihchL0IvFFjLvC8JgqzBc3Y0Tpu3FGyJ9Mi5G0ii4f7a7+41ZclQzpzHST\r\nR8eKAUVhWhFwhTK9ARmS+xZ1aMGVUaJWiGl2Z4mHW7axf5+ZeUcuhhq5JITK\r\nUnAg+C/WEuUaYOcx0th+hyR6Bm/KDpnkrm5IwdNpUfd8g6jhbM2MPZKBqIFr\r\nQ6xbhXZTLFB9MRdFv3seew19qP/GhDO61qv2iDti4OClkAzBl81kakXLLh8u\r\n8WBD9NWx/JqfUczyF6tLjvG5LCiJMw8YMtfJlYz/dkz0LYgdil3PzAGWOBh1\r\nyFQWMWYb3IsdbqekuRqlhDKKc52pXmrtOBjndGDwBUOp716Lag8Wb7XH+VsF\r\nHydKnjfAhq7OQAmk81mojDGjOKXiX1lKcU9PC7od5dn1AuClLJTsq2OGW9Xr\r\nPEhMQZpv+YNCtXNU7y84s2QXkJ+oWIp0Ynf0+wjW8vwZ8ad7DW5Nx4F9B3EA\r\nnMPvvbMj9uQZqCc1MFghw+A8VYCcv2MbFEI=\r\n=tIXR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.1.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/84ce0520792b499aa906ebc3cdeeb79b/chakra-ui-system-2.5.1.tgz","_integrity":"sha512-4+86OrcSoq7lGkm5fh+sJ3IWXSTzjz+HOllRbCW2Rtnmcg7ritiXVNV2VygEg2DrCcx5+tNqRHDM764zW+AEug==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.11","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.1.1","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.1_1676489421441_0.09822798674917332","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230317190235":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230317190235","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230317190235","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d6753e9c451ffd6cba3116afb510133aa7b77ba8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230317190235.tgz","fileCount":45,"integrity":"sha512-jwS4I2r5PusAF0KTQxK4Hl8ERuzMxSfYLFiMeRckLdwKfvVy25w/OI2i6pZ1UCU7Tw7QwAF8K+Kszsv39sQkDA==","signatures":[{"sig":"MEUCIQDDf+BUjppiUeWn3jVFNxTMbUoLKkd94iyZ77O5BI4NqwIgQNDeahKfbZnbHtIsjWfpe951k/muE3nZiWpQ/atLbac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFLmGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSXA/+KPQqfLeg9o2WWTdTRV1tKW2CYXen0/7mpvdHiZ/V5KoCrDnf\r\ngKL3LAAIzZnMIEAIZJGfS6d4RBztbnzi/iyn00pBEi5YRvlqnRPg5QfNAbm2\r\nFHw2YrvnAx2hl6uDuCfDJ2EPmRvSqFDDtUz54zeR8L3OJivYhD02ehTX5klB\r\nrLD2v1otUKyAkSkCGdzW+j7OCeF3nPozqVh8ZNalJVh4/SjHcF2R11a7g65/\r\nDcratNbh24y4KT5wP7EpWelEVfbJmJD2tDQmATZcgnt9y+jrwTknMVRRvT5g\r\nAR4mYMf1pSvfUe8ueX5qw9FtlEt1AYLxwv2wMJRBLU/l0V7s4DQm0nijJttt\r\n2pxtBMBQdMgl5MEY2ne014VIKVhLqFzztcnyvYU6TIsTqI/17sy7fqizpHnm\r\nL7NZv2s6B2pJ9QEud5/xLYnHEQfkrItB7cy2kEMy6JYwo8EUdH0+u1J6t2RT\r\nXb1MO0ImbDvI+pPz4GtZEPabUQJvkzgECWWcDbQWVhQvi2AHWFiL740je4JV\r\neIZ3MSKOxF5JOoaLaV0hgB1heonuuSqRvwJCl6DaTLfnWX22gvC2jJfH+qcH\r\nomOV/+wOK/oP3QyS26dzG5h29KzPFCZfmqH6S9nmcmm2iOYjqoQl6REsT4HA\r\ndnisUQLALNUaksuVt2YANPdufvDXfsfMdHY=\r\n=fbse\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230317190235.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4b35b2c0b1e0efc5f9edb9fd93386ad7/chakra-ui-system-0.0.0-dev-20230317190235.tgz","_integrity":"sha512-jwS4I2r5PusAF0KTQxK4Hl8ERuzMxSfYLFiMeRckLdwKfvVy25w/OI2i6pZ1UCU7Tw7QwAF8K+Kszsv39sQkDA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230317190235","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230317190235"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230317190235_1679079814428_0.4970766044508519","host":"s3://npm-registry-packages"}},"2.5.2":{"name":"@chakra-ui/system","version":"2.5.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.2","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9f21ac4bcd9d5db878f186cfe6f7843f40d66405","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.2.tgz","fileCount":45,"integrity":"sha512-nmQZi/YeI6u0UkUHIRcS/iJ71DZDjD3Yk90IGElkkQdGMR4dYKGV3RwBMNoIbpRUKZXDuqUGsXGSLERXwwiqzw==","signatures":[{"sig":"MEUCIQDbQcD4FcbtjcvHwIrIyioLqGNfB2jjriaBKYXr21mf8QIgPCn6Me8ipAecThkApusbXE+aSNTOSw12Mh3YsvcvycU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFNAoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNKA/+PFyVKUYLJSAe8nlSpBg+uqmF6h+CgNp5CbWXYrZ9W9VPv6NW\r\noX0Vej/xEucIB9HHqYZ0Qoj0zzm+9ib+RrFoYbrO3m1kWfeah9Spf627OUd9\r\nu1FNKZoh9HW+UbNsGUHPEiL1nWZdeIIcdlVy3dhRIAEkWnhzREUlIFMg2DHe\r\n1wb5vcF76pV+XG8Hrpuutw9+u0Ai7t2H1FQE3PHgUYbFakrnDy5cuaDRGFH0\r\nLJLYbNSKSA5nmQgSuTBZr6KKm7rGhCcoYj4Uj6efiGnsoHqvxNR9XoGbbWWw\r\nArYaE0dDBdKtfW8gFe3pPzyzCKga5yaMD99nVic29UeZMScf+qQRVmt2RuN8\r\nkdeWRCb1pgc//iXsxIcVpWLpA8lmkG6nJCTUD5oxB8yJxliJbiY3wpEmiEML\r\nNInF5DsoQ4LewLTMu5TuHLtnHTL258RVGdeWflfNyBlwyCge0qCYqg+mx7MS\r\nQdTw8vtDg5Vod8InCOcizrytR4bduLTAzU4asFYkOpBSUJRimNoT1MqkbyuG\r\nJn+qEGyPyfyv6vlqVcT2Zyao7YbxOHAYrWQARByA/wDjYpAGpqHbabG9LJBF\r\njMnUlG4YVPHlCaFHD082bzWV87HJbL1Woh2rnC28M7/ov+EDUqph6j22t/s4\r\n5FTwrztzSSxPP5wProPHMSKU9XktwkCmgj0=\r\n=ceZH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.2.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/09983cfebcdcb93a10510fd6ca495d16/chakra-ui-system-2.5.2.tgz","_integrity":"sha512-nmQZi/YeI6u0UkUHIRcS/iJ71DZDjD3Yk90IGElkkQdGMR4dYKGV3RwBMNoIbpRUKZXDuqUGsXGSLERXwwiqzw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.12","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.2.5"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.2_1679085608717_0.8625777442754523","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230318150808":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230318150808","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230318150808","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"411ff614d1f571d52c4f7197f1c6be0c87446ad6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230318150808.tgz","fileCount":45,"integrity":"sha512-ShH2XdmwBituwVOMlwIYyNoskMOrDcyK1HfZX6Q0N0Mfj/F7x3jZ5mX/1IIwypGaRmGLdD3zooWZegPqX88x6w==","signatures":[{"sig":"MEUCIQDezL2h+GzQV3s9u5P1Zwa6+wIZb1P8eEMbUBnT5ZfAEQIgfbEwSlTcqygobEdfB4tLoZUeK029zLZfzzOOFfeNIHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFdP7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg3BAAi8heurOVxcsM77IXZr73mCP1Fqc2t2hgZvk6Me7SjcTf+FEn\r\nKRB6cYbubgZ7eGbezJDh+FEHWijpaJgi3iGRzkcom5Ve5/ahQ61uGhJa2Y3k\r\ns93aBTGIRVy+B/aZRg8HfoeNkrLnUved4sGMVvui6HLvomIm3H8LEUjbmJss\r\ng2vBCd16DnIdKq3/BLJzWMKsmadXGcxMohvDB8WG2z9X/EKu+szaMhzmEgqg\r\noQ4ItGZxlM4DFIqw0OOlG4oR96nnZNiMj212E+zFUDyBMS52iYGBikLN5yBJ\r\n//IotHCJemiuKvSIht1Y5FpLMdi12W55NfgR8wOE6IF6TddLGyDn2xAUpwNq\r\nfsYk5CNXbCGYE+X3VTa6d1IGPC67JhNG4lYsFKHzIkPjWL3KYSGBRFM/Ra06\r\njkGLSX8mhDtLsOsToWZR9ZiYOFOR52Oj/SCfQKTBTVDQgv8KuJSg8OJ5bzvp\r\nl6EoL6/6tUqGSHk236DHN1OHC0NDVyrSsymlYwr/E1nINXcwpQLJIf79HqKB\r\n4IXY9q1U8yp26MB5YwqgeK9zJQy+jconU1GmXUhDyieRFmGvGcUwKtVvW8P/\r\nkSuqvzd6sgr4zFcyZXlrd4cP4C3vQ5vMYhsEB3l86DdBI6gReWmBZ4lFhNaz\r\n/y4+bJvVYIJiIb3ILYyJ9dTRfSNLjVjY+Bs=\r\n=EW1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230318150808.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6578335f6ee5da09ade08deca8cf2ac2/chakra-ui-system-0.0.0-dev-20230318150808.tgz","_integrity":"sha512-ShH2XdmwBituwVOMlwIYyNoskMOrDcyK1HfZX6Q0N0Mfj/F7x3jZ5mX/1IIwypGaRmGLdD3zooWZegPqX88x6w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230318150808","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230318150808"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230318150808_1679152123197_0.7019481111054082","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230318162751":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230318162751","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230318162751","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f86216a489c5622c77b2709b20a796dc7a768473","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230318162751.tgz","fileCount":45,"integrity":"sha512-0PnaJH7lOjkQvyqoQqsYdApFlRc0ah5kELlyEDN0F/3MiIBs6BILgRqgUolD0HoOoAwjoPDjjlQvZr20ZsELCA==","signatures":[{"sig":"MEQCIBy0+RDHKX0FuN1tXcfgHbRC6o7NUTxEx8QOx27l+XO2AiANAZalgm52mUIuTzB+Gft6ibAfCUeN+7627r1KXEQUUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFeasACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Pg//TsOim2TW6tN8h1eLT1Lg6Jptj1/i69naNl1/KzXRSSLRHSk6\r\nVC79d7tDVRPpFsyIgrTeSxPgee89whjM9CdvsP1FvJby0RkEo9p6HRSl+BpZ\r\nqAdaqLxtn3VrXaWzZyxD8Xa2rjDytwWSXbdfUCPd/Ic2XiUj2O+DXOgDGwnJ\r\nBppfQ/HTnugOE+thwPAGurOX2LaI5cgrny/wcq5CJDgB8+ClxzbVmAU0Mi9D\r\nHHhhQ1u2+cziRopMEjUZBHIJOrsrb/C6leQbZFW8sx77m3bs5E7pgUDBKoeh\r\nhM1psy7/6snlNEVXh71YauN+NF26y7PlpqRVkdjKGLo33El6945hhg4AjXNB\r\nRpByw+ocIv341h9ptA4i5n//DZfoMzfsvo39bHT3v0w0EoEzS02lyDu90Kcu\r\naBsgn/P0z4v4B4S8KqxMAVurqumoIZdf0IUH0plkIHt5AbwJi8/0P3fPV60z\r\n0R/Xx7lYU/rEM/ycUvoi5F2FIuKUvuxz/WA0VbhLQSDRwltKylLdY8qzi+I+\r\nZr5udJA4HVcWdFbixSFQRP8xPcGCXkmLDeVeq+B2pclmBNzKqvZ2+9LN0xyZ\r\nbDpL8B5Kixm5QRLrWXNsA4R9umG2w+4X92TvVkj/4bxK0xwI4ck69irwYXur\r\ni7fdh0Tu+3YiWLIeC+GmpHnv+ZYhKTeoQtY=\r\n=Aq0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230318162751.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/be3e1c8612e56b36ffc2334a34d6d75f/chakra-ui-system-0.0.0-dev-20230318162751.tgz","_integrity":"sha512-0PnaJH7lOjkQvyqoQqsYdApFlRc0ah5kELlyEDN0F/3MiIBs6BILgRqgUolD0HoOoAwjoPDjjlQvZr20ZsELCA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230318162751","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230318162751"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230318162751_1679156907989_0.18607280660169812","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230318171948":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230318171948","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230318171948","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"23085fa72389a6a5704dda82c8ea0396e6e97f71","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230318171948.tgz","fileCount":45,"integrity":"sha512-Rd37+OP6Jigu+KIVyGVUVhsvDePnkkPQjqpb7JRyaYF9Wc62YYXOMg8xncyjRL/AOFPEw4O8ePoG8NyjVWp1gg==","signatures":[{"sig":"MEQCIHa5NYF4ZG/nZY9+rnEqYQk3Ud5z8G3EVu3QsSBpvs6aAiAtkwhWWvHtLKpNff8Fkxu4SJ4afFy3OASnYh5468QxlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFfLvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogUg//WiA9Se7pGcZRpRKNBSjkqTcdDYiXf1/upSuO1mdPpNRBKs0I\r\n2+VaL4zOqPgubINPD4n+bXSvHwupFkCKBNcxdFBCayR9m/NsmQmMjD63Uj3S\r\nojeSQepw1Ze4Cvzu6WIGm786eD5JNkmbG/bjo8sAfsvRGCoqlIC7dHtDAOgh\r\nc2qdyovL4nL+yo9LanLvpxIbefGxDFyGTn6TUM+F4fDlN0kAtCpUstqd3M/v\r\n9D9YOEwEZ5cy1eh48vS2qx4jbPn08baoE8lE7OmKth7v/OyWRYCIRLbEz6ca\r\nGZX/HA3ZwVjpdturYeQMAtWzKOjKac/0GfiObJNOPSfO2mIDa4TtqZRl3Gr9\r\nkUdf4nhMTpP5HTzKaTdtIEk8l/9cy6c8FdtpMMUXS7nFJ7M32xpPYi6gjfV6\r\n+0UmqQvqdlfWL79b3Ucep8Q09CSZNg4uvV4YL/9fLnmG+biVD7fNNjsD/XSE\r\nL8FVONyBIBBXmIffTKJHfFTgQnjIGdf9J136+to0P3upLzbt5VwX9HPGcQ14\r\nOQ5CB0m2CIUwzR2RzAPrHr18Oj9AFypTV/bpQQihO55JQ2e7/RoDzIw0SpU8\r\nxHWcJmmkIcgUsGXBsL7Fp6EZM6xtMGD1sxJmlF8CX0AE06dONlopY/A0BLcm\r\n1vXL7OUeyAGnIScEZ8U90Sg1TSI+iC/M1C8=\r\n=vzWC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230318171948.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0ac3e54efc620cfc649f2e819fc2a549/chakra-ui-system-0.0.0-dev-20230318171948.tgz","_integrity":"sha512-Rd37+OP6Jigu+KIVyGVUVhsvDePnkkPQjqpb7JRyaYF9Wc62YYXOMg8xncyjRL/AOFPEw4O8ePoG8NyjVWp1gg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230318171948","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230318171948"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230318171948_1679160046940_0.14726415913785518","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230318173550":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230318173550","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230318173550","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"e7fa1715af532f9300c7429c8ef56f63d7a92b32","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230318173550.tgz","fileCount":45,"integrity":"sha512-0zYr9w+yyBzzF3r9W2vqkzreEzubkBfGicv2WI2kkzuadQeoHYgRyggOpfZJmPz7TP4tA82dGa+P+iLre9XDjQ==","signatures":[{"sig":"MEYCIQDGqK+gnFqUM7Cklh+yclZnmYI+bmGuO9fOf3hFgVdoWQIhAIG5oDgXa+UnRYvegUiy5qvCSQkkIs0HXTMQEguXssRX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFfamACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/VQ/8Cqv71wqFemZbwN5GFtwganqKqz0ckxgxbJY7BqWZ+QxJqpS3\r\nByy2bnvx2GHqseyB7RD5IZxPWGj8gs30qzCm+r8fATUxo1/icXo9tgG4GbC6\r\nKetz+nNKRreJoFe1Q30wnM2Mv+86Ri0P5n8zxq+fwfBurMBNNdXHUy/vR1ga\r\n3TLUanFAyrhI8Lfpj7ENNOnYKPw80oOi+DQHR9WNdujcolzG12mffHj0axvU\r\nprd5Jtmamv/wKvogpQjVP8Z+PswD8Cgl8KFWtI4c3v5nut2++d9aMeMTgROi\r\n/Cq4Fy1w5jsyLmpk9ryVOUprMz0XZctwixQ6SjVE9YLv1kEIqQvastqEspP1\r\nXpTDEz4cbv6C3XfMt6HRaU2gqZdJrbToBV19oQnVRvl8PQlrDCPtCiJMZYUt\r\njSzdPzpfCvU4Y9lr9AVXm5EAPb24Ur8SlREO3MYcx+i6y5LG7mPjpLY9Kmrm\r\ntHLDqsoYKnyv1wwak2LRGYS48Vi1+DL3j1Wz2kCU4vuoiwwBY0u7fg/uNaek\r\nnDgUtRBj7dEPeWcDgj7obwlmzNGu3Gbiqxklbao2BHt1Ogn5FivzmefUkPlF\r\nBb253fTvetDkM72phjj+yEar7+LiuPANAV0bBsdwN8P9Ddcz3oMBHtgwFt6P\r\nFyO2VRvb4dp1Hr5AMbUAXxWiN4ZYGCf5El0=\r\n=itO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230318173550.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d18596816c40d4870c1b192aa8ed7984/chakra-ui-system-0.0.0-dev-20230318173550.tgz","_integrity":"sha512-0zYr9w+yyBzzF3r9W2vqkzreEzubkBfGicv2WI2kkzuadQeoHYgRyggOpfZJmPz7TP4tA82dGa+P+iLre9XDjQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230318173550","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230318173550"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230318173550_1679160998639_0.5613238698565033","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230318180604":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230318180604","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230318180604","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"285105e525c3d8bfb5e22257cfe994b8bb569f07","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230318180604.tgz","fileCount":45,"integrity":"sha512-IRVhntMEIVFAqf0qA6DXv/4lS/1SKSbcKS0IEyCzybZd6MeFfKOlJ1jHevwwsvOTeQNntFJ05lttIA0i7WSbFQ==","signatures":[{"sig":"MEUCIQCumxQQg7DOtUn85K3XeOhZZWDWjjlc5H6g3YRgndXxjAIgTXdwrcanGicDeonwud9u8HKjH8KYe3lX3A01p/UwYwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFf27ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/7RAAiMStsW9qVtDwPK4He1W4qGFE+r1ADcwulHxVQTwejK6klwhL\r\nFGLFyQGgd8YWNdJeFEbuYcLO7K7sRVMSMibghbK4VfXOghN083HOfsFW3WKn\r\nAF6lQ1kL6bVlY+OP4IllJASbg0O/kC8k8UypqhwHgQMP/x3+hc6EYI/G+D4r\r\ndaTbC4Kmz2tMM9pjHH2Ww/AO2ZiaLtGdW2gYDMLhlSgfCZIjPzrOiB2bEDfB\r\nUmEpA4oXsy8k5rTD//hBNiKmqizSzDZKGqKrdkLo976j3Pa5DK/ReCy+X2q8\r\nXPCw8yu86VehrqgK7TF55LWeRoasdgwt3qk5HntkL0cnCncRbv4xgUaJZdsN\r\nL1m71Uq1DtS+zAoiaDZ7fnyWipCwO7Fv24whgzDtAsqtispX6EjC8Q93nET0\r\nNmlyhGKBGtOpch098NhyraCVews6KUmxTQtbU7GMCudx6A/KNKJ2g9+FqfR1\r\nnoODaKrKC6PFjfudSIsHPE7dV6E1Lx66Hsqb1wtFIlK0V92qtET/YqXliEA/\r\nNWyzGDSIiIzNI2Sc1TKzZpGcZoyrM1UnFpMM2bR6nDKhBJU4gjSV21dG/wHU\r\naR0Jxv/GTrHay9SWsNVtYX5hk0xCneXTTBQnug1KKYhYqX7mjzsTSXJSkCgt\r\nxBAdB5A0nLj/JaW7nllkCOPEgOh5yitsmCo=\r\n=ScXA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230318180604.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ddf9c80d8d8ed17804ad9b7647517076/chakra-ui-system-0.0.0-dev-20230318180604.tgz","_integrity":"sha512-IRVhntMEIVFAqf0qA6DXv/4lS/1SKSbcKS0IEyCzybZd6MeFfKOlJ1jHevwwsvOTeQNntFJ05lttIA0i7WSbFQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230318180604","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230318180604"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230318180604_1679162811626_0.9879689095882072","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230318182221":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230318182221","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230318182221","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"92f6a9b6bf8fcb191ef2bf58fad354fc0c4a435b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230318182221.tgz","fileCount":45,"integrity":"sha512-g6jyM8Wf4uQLZogIi5UJDEpbCJ43qyjh18KnKMPTBm6hlRra3Y9ycmmFE0uwQMRvcd2B5K4n57/P7GuhIKB6Xw==","signatures":[{"sig":"MEUCIHquEJApmLknOj9/7rOwk/+FmQk1N3+zcHk9BcWocc6aAiEA3dHck4Ov+hxzgmo4tNGh4CermRY8syYVjUZ28s7/n1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFgGOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUnxAAhT+RbwNe0MiViAvjLnNAPVABJHwKFGr3hqVvzGXr5+dCWYLS\r\n/OgbT7E7tTZ/YaZnfYrycBbpgGkEWViga9c1ma/FmNpTsfPee5GTpx8hGh0g\r\nUKjKUmsjJDYN4xAP5LbXuP2hMgZ0HF9t66iQ0srbeu+SN9OHZINCv3KzAL8f\r\n7EgeT4nCC7+xPkY+7+nl7DuZ7RGQZgyw57OK1aRR1y8ffgEB569cyXEmxQQY\r\nt3bSkXieJGJEyapC9JnzrvkEXoWMv9whGIN4R9k9ML5Pc0L97LEJUmkuJE2f\r\n4zZrKkz2D2Xk897cUWKBNLo82fmgMxpWywS5Oq16+oXhyshG3l2DeM0Uz7Rk\r\nHfvtZTagxcRh25MMGvAw528aiRMxb2RYyMNpzbxR8IIGHOCk6qNdnsGRjWJr\r\nvqC3KGqT07gq5UJS2u0JBNp39DYIYRCzjiTMvnDbCbwHkPsDkxIay6BlupGS\r\nsFJARgO96yLSO6iqtI6Nak0IpG+hjSfr5yfYjFVgle2hRa5WrL5oYrU+T4Wv\r\nNJ01wWrPKjRIeirdqUcIw6m0xyMO8/pwN6ESmXszhj0MWYdCsdwqp2ICBCTE\r\nUaQ3K+wqUC57albKvmjZ9Y3F7jBCyA2AgOdwpgwrS0wMgJ8ZLmpgpJOK0Wcl\r\nYFtTw/TOwf56zdblNrEoXxw+LT2zcvLPL8I=\r\n=Fd6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230318182221.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/92ba2d589669de4d072643d1af7a8266/chakra-ui-system-0.0.0-dev-20230318182221.tgz","_integrity":"sha512-g6jyM8Wf4uQLZogIi5UJDEpbCJ43qyjh18KnKMPTBm6hlRra3Y9ycmmFE0uwQMRvcd2B5K4n57/P7GuhIKB6Xw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230318182221","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230318182221"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230318182221_1679163790668_0.8322039136607573","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230318183840":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230318183840","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230318183840","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"da35ab5580fe37e3a6bf1b632348ef3ab02e8707","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230318183840.tgz","fileCount":45,"integrity":"sha512-aKEp7W0ke/fiI6OEIbHgkdcFOqY5Rb/VolhZs8RRhC/8tS6WBlRAadI/ntUR7cNBupSQ5Vvpw/4POv+dG4Kmdw==","signatures":[{"sig":"MEYCIQDGkoWkaqT9jGs8nwA2a2Pujx430puddiPbmT6NKQB/YgIhAMTZW3lTTIF50596MJOLYgozcJvA4plDM5dJwe+D6M7Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFgVlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG3g//bK83gHNzagC55bRfxU/zfRhixXReXikxS/tfjv4QZi5CHYah\r\n90B1LMQRuFZ3/AnNnw68WPnsY+3nxtlYVpokOgfokPt2rpN9BL9XQ3HxHJSa\r\nK5uLxaG21m1B3l7RgiKbS3i/v1FJCEvRCrMtX87XSRkgENFxD8NAecuhw6Aq\r\nzOxvNyFEhZFdyGjeDLGQjNE6WsSBA+2ZsPSS0QsU51WXuynyDN7S8CbYkLID\r\nxZ0mwbnXuf29ui67dADvgAkNicq2eqwrZvKZD1kYyJYYhk+aeUUvogHh2cpw\r\nRT3WFwOmywJYBOjioVdn9rOZR1GsOAQ6YUBWDQICFOMGC90yrI+UCzoM/KO/\r\nLS+DEemjLXddPaBupHIVAJP8P1L6jLCtUMRgqD44zSfgsfoFhJq9Pj1EDhvx\r\n/0f7FOTbmzkJwSpwhDqJhma9MBw/vjNk346XoUiCGZXfOo8MgoWUXg33Mmiu\r\nS8I2Vur2hnCnDVGPnjUdkZx8up6stFmzTtJUQU6uGJSy+OAPqRv9wazAkfWW\r\nyn/+PZMwQRylXUxrKwGr+rXn12veTZdqQXFsCZJbdYXVGbD35oWrPl9L1Z2B\r\nh4z7LpL9IpnoCH4fEtBycDFA9N1SrcTBSrxC7OW/4E1f8mrNSmkCSpEJ2D0l\r\nWYJLS0LOkTuySqa4d8qadzEAYdfrTq61F8o=\r\n=BlXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230318183840.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c692d858550bca23efc039542497ce6e/chakra-ui-system-0.0.0-dev-20230318183840.tgz","_integrity":"sha512-aKEp7W0ke/fiI6OEIbHgkdcFOqY5Rb/VolhZs8RRhC/8tS6WBlRAadI/ntUR7cNBupSQ5Vvpw/4POv+dG4Kmdw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230318183840","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230318183840"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230318183840_1679164772834_0.6057302242263616","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230319192154":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230319192154","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230319192154","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"39703945bc841f768f9b518161ecc01346fd100e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230319192154.tgz","fileCount":45,"integrity":"sha512-2JMFVANcJ8jLYOuFpN1siYrVy5/OXxaD2p8JplJj4IMYlXMo80jv86h8C4qiyT1mxOy9vZQpD6MVzrgKr1Umaw==","signatures":[{"sig":"MEYCIQCxSOiAwS9gnh1vHH1v80yjv4tm6TsfV7mNGIHspptFrwIhAJyXLGj4JOrIuoRNqMxeM1jmocJpEQdar+Ol8205/KWa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkF2EEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWXQ//eKbaXUXaXD6C2eS9fI+PWaTWKC0NkanzhIfxMJGYqpYL+ESv\r\nuAJd8Ma/qzXx3jFwIo2bQYviA+eOfFDpZ7hHRQLssupoQu6k81mmo0+lhr44\r\nu/nk0v4oWEq0k9AfTY62sXDKmsUhX1ZGo65+Bz9iddE9KYBVThYvExicBDUf\r\nA7/br9PQQFmvBYaDxV3I1xjj07jMcoNVLyyeEbpX6vp6R6NzgBlB7yXV0iXB\r\nr0WAbFiQvd+4HITCtB3ysf4thDhDVioZzhcw0zOIKTADs/r/1gtjOs+bmccE\r\nBiha1Qe8JNnoX80yx2dPswmKUkqk5InzAh0DvSZcpPl+ZY+jwr6lzUSHqvbh\r\nruUxeP7q+m5OJwR/J8DeExdx2r5CeI2Mu51CAeV7jFCx50a4ZjAG/nA7O7K8\r\nX06vH7z4Oh9B95ZwaHH6IguadgMOfJss6nQtSkTO2mwnv1rXcdcLN6897Vdq\r\nJLYWOVYhLbZteNf7NYMEWZ6dQa+D74VJki6j57epKpwHJifLVEIoow7Trk1H\r\nPVz639Cm/uvlu2a+Epe/qpWBPgkoFr4neDq0H/balrfXBTCugXM1ZIbXjNBa\r\nbeFgbQkUSYRcWFekP6NQe4L50J9A0EKVYNUrDUFm9OiajODb1xR89W38EVWH\r\nAgHY+egFlliXJFGuZKbmz2nVg7P+QT3MYYE=\r\n=7p7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230319192154.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f68ebeff27bd41294d157c52baacbe7b/chakra-ui-system-0.0.0-dev-20230319192154.tgz","_integrity":"sha512-2JMFVANcJ8jLYOuFpN1siYrVy5/OXxaD2p8JplJj4IMYlXMo80jv86h8C4qiyT1mxOy9vZQpD6MVzrgKr1Umaw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230319192154","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230319192154"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230319192154_1679253764472_0.12281766480135792","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230319193708":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230319193708","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230319193708","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7392176a5d029105372f9795465554c12ad90be8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230319193708.tgz","fileCount":45,"integrity":"sha512-GMfbCBMCRkpTSP9uQIIRiQP55a7xl2VY9VH/RzqgezBplw1koPSv8AF0YGHV+3fXLsuEAyZb4Q+d+7aInvD9/A==","signatures":[{"sig":"MEQCIHN/cq5q1AG6zEML2f/MvScMKDW74T64P0ku5PK3z4aNAiAnEyHtXm/e75j59MjQKgVL9oBkrM9xsjCZTTF5cUl44g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkF2SWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2Bg//QEKIIkMG9FLnrXuVZ5LXKgV0bwO7KBHryjX0Hu5SymNieZ4q\r\nfrLRrvsTS3USv69SthRdtBAj+9ZwnUX7IRlIzG49QDKdM9dAFh2C5q+3CLOz\r\ndxey78wZhwLT19+UVAz+E5tcbk1RBixYmQaO7bPtb/I0DEwMlRNk4k+ISHsA\r\ns5qO/OGl+RX+8kXF6C18ex3KCHP6lYNdUYWUtdX9Go6ttaJykzRsvKW9xCbW\r\nvc4GQ8bUdNwEGwm1KGkNxJuDS+PTSe88HSJ5zISR48Ejye2Z5QnXJ9aAzJFd\r\n5IeoUcfHIEDLxVCXLAVLIcJgdPjF330JnSIQNd7bFpOEFuYpADTboG9PPG4i\r\nDuXRgbEdQyppQct5vLIG/t20LZ6gUIjbrR+SA7LWP8pY5DggLD6koYb+9bfq\r\nm621GVrBMHw26w8Hr3aODUYxvgtMzt1qSB2fRKVQ/7QzI5fzVjZA/TZlU1gs\r\nA0EOtQyIqg9mJibK+ZpO0O9yj+yEzO/iJtRIqrM1Hz42LylxqAsVBwDYYsrt\r\nMcsZIBrz3oxAZoNB3jwrq0GnC/B0J1kZdzkI/pfPHINiNihbU88jHCy+H8bY\r\nXzPfQKSABryan2NCXER1a3OpiY7XU4kJNCgxU4L2A+7AacbxIhMZBcY1N9GE\r\nvuU/jLPowv0t/xuXt2JE0/WCxM0uhnCEEYY=\r\n=nz20\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230319193708.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/21396e8344037007a75459364fb9d46c/chakra-ui-system-0.0.0-dev-20230319193708.tgz","_integrity":"sha512-GMfbCBMCRkpTSP9uQIIRiQP55a7xl2VY9VH/RzqgezBplw1koPSv8AF0YGHV+3fXLsuEAyZb4Q+d+7aInvD9/A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230319193708","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230319193708"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230319193708_1679254678162_0.29583006006802504","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230319202046":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230319202046","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230319202046","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"31e955af281ade06e04546ecb2b8ab1936dbce0a","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230319202046.tgz","fileCount":45,"integrity":"sha512-kdy8D6ZpgA+BTWcZ8yE+yKGcnmR2BYLA/UzGqbVHK8xa97sydptGXYrrUVa56st+3j7VP1wLHWt3n1oooUHgRQ==","signatures":[{"sig":"MEYCIQCF+RorDremAQc32cTt2D6xtRarTpiFRrHmQ8YdAEAS7wIhANmtMBotWzEBTk0PgMZacctRDqpDprC+pH5PShZq8wDc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkF27SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwShAAkAyVaIMtRKCgoWndTRAlWOo7pSuu8VfnyEb7OF3O14upwcf5\r\nRhVygX5yHyTgvlb4oTQ5yAvemi761Ume4jR6GhQYJzq7VmU2X2+MeFL7kN3i\r\n6V73VFbmQtAnYA020NRfNaJZfiEtMnvldzW43+24qp0GV/58hwTSVJAKSP7Y\r\nJOaLTYmyh93tCjnGUnxtumdrZMy3BVN4/0t8RiVBc0u/S6zwS0swye1VEfbk\r\nRGlzthAmuR0scTmrXsuPRV1DQU8U6wGxHBC2Oje+NKSiT1X6qBiVRw8tKJST\r\nQVOdmWygLw8xgH8c5MTx5w9jSVekXzGVtyKEY6FZ4u4nQFKlW+fNmyVMrcFf\r\nvUe2ernwLNgbJXLYH0XRjJFmbrjR95maHbg2w1sPemV5wqhhbYkr9I1ztaCe\r\n/glUNMPZYEmo1TBdHHYCgliOL6KRrFRQNMtJFsKlsv/Opda3CEwHlG2prq3P\r\nHQlo7Tw5XjpH6x4s7ylpfEZonIH7HV078hFqmc32vvqmQ1lOTJwuxCWtRzH3\r\nFSuixa86/cK/Aqdz32q/BKE9wWWiCUl2YN/s2J6fmM1Sm6kahACXrVJtQONJ\r\nnm9iJdGLnEahrwm3cd8+uRDrvDtTbhqE31rSACU3zyL0EAL0FKVDgW7LVuul\r\n+eKicnlpXGEBsnM7jrpEmN4AOlPCFHeqQnM=\r\n=oZoD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230319202046.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/76c0d1343b1e7437f657845fcfc82b70/chakra-ui-system-0.0.0-dev-20230319202046.tgz","_integrity":"sha512-kdy8D6ZpgA+BTWcZ8yE+yKGcnmR2BYLA/UzGqbVHK8xa97sydptGXYrrUVa56st+3j7VP1wLHWt3n1oooUHgRQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230319202046","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230319202046"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230319202046_1679257298591_0.8509047466780049","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230320183136":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230320183136","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230320183136","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"819a27538cf8320806b9491b03b65e6249d05611","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230320183136.tgz","fileCount":45,"integrity":"sha512-zB3H2V42wJnhj/PfjyuGsWpdTAMENXH0/QMmM1jWIA2SjK61XXjjr6m3K4MlrfGyULLz11W9AOz8UJwnBefOXQ==","signatures":[{"sig":"MEUCIQDrVrmwcN/Lv1Yq1UBB+vU8YQpTY2AUm+byEA0++nztJgIgDMlboGNfBJX2PeLhVWWFfgXL+iyktdvIcou1By3tS98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGKbWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBOw//e6YnbRoyieesX+6mZoiuS+pI/tptqfqBP7/Yh5DDA7NLaLQD\r\n/E+agVQoUSuLsmNTZbmqxKNFEOShAGo0MxoTfL9cR2XyD7qYWqv4PPOi5njc\r\n+ByLeu1mLqUgK+JYC1IYYbRRaypON9xUhWM3UK88v/WOaKrrPkuhTt7A3W9h\r\n3xkRWVvI+VUpnbycjdqALuLIqom9njlBLT7jgctJEQeMulwlDKSAMuyJqijq\r\n3FE7mnEDd1qWJ1GNFqI7M2O6stEPpXyBgHAV7avAWvxDB/ogIwMar/vhrVYn\r\n5OWDtTv+z6Adjb4F41Ts0WVHP3ClB6xIKUnQdkOH+Wom91K4RD2Phv69gU1L\r\ngFUnAFQRkK0D855ezFtwd+S5gZfbCl65sv/Pf3PedYeywKv1zWxcO9SN5AGG\r\nOYoMUH4RpsLvYsc9Jb0BJgyaXJZ+G239C30+yjcN9IjDzLunPC8b4Fdkmfku\r\nIWqNT+0pwJOYqq2B3drEyfdPUu5SJdDQGda0lAuVKhmArCj2dP0k1k1PwyvQ\r\nzej08jb2cyRggve8xaAafN0V1/aX8NUVEzYLs2ShB67Lkw+E305NtRQd5ap1\r\n+5Q/PALz6bzK04S1mOvtT0mT7/LcMW2PMkj8i0bS/etW8HEyyZ9K7neJY25y\r\ng0CXdbsRs8YYA/rZ7+38ALbr651eut8Z2jA=\r\n=W6oT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230320183136.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9f1f7fa72e1d425d429f7027e2846f24/chakra-ui-system-0.0.0-dev-20230320183136.tgz","_integrity":"sha512-zB3H2V42wJnhj/PfjyuGsWpdTAMENXH0/QMmM1jWIA2SjK61XXjjr6m3K4MlrfGyULLz11W9AOz8UJwnBefOXQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230320183136","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230320183136"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230320183136_1679337173945_0.6834042404717491","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230320184810":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230320184810","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230320184810","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8fe9739516d8807b63ea550937bf8251f692598b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230320184810.tgz","fileCount":45,"integrity":"sha512-TTAQw2pCdnDUo8y59SrLQ+qoWvfkR5paqxG590DJZJWsZhtN1xIlNOidz7/qoD7QWjh9t0qKlDaKm8YR36tBcw==","signatures":[{"sig":"MEQCIE/aHgL0mpkrDckAPgpo/LQm+Nn8hOXWSDv8RG/ViwprAiBX1j4IlJ5g7aiemRiD9PluPw9kb12zp60OiAFJE1mrGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGKqvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn9w//aF6kz62bURYLDIGPMJPiIsPIVftqoNipx/ZnJ1htTJOw6OTW\r\nxQmGPm66X0HJWcL+VNmfCvpgTF5O3V1FHOlztv15PmrAqu6YpravQBYgnsya\r\nroVJ96Zlg1hvrCxwk1PJIXSAFYPxYCYL96621Zhw9NH+VL9yCJ78vNL35PVp\r\nNhyX5sBzQaM4BeeXFDTq/3Pqj2YEz1i74rj8Et9IGeRf0sv44xaLyTrKn90r\r\nGfrF+0FSQ2KRjUFw2bGFbfIJDtRL4wWWjcB5SEd+vjwtIJuO6y8txnimkgLy\r\nqpHDNwej2LaJoBeHhfpt2PlfXYLUE/Ej873T4iuIhfS2x4dXRut5Q/9QGxOp\r\nSB8ywNCxgMianF6nz+XcgukqZnhbKsUEOvH7y7+RvprWNms48jQkT7drxPK4\r\n7+bsDTcKo4FC/D2gaQoU8QYGR/yLBUzIaoidH2BpTBIT7SarTFGKbJxgDa2F\r\nlBMm3KBuxOLHrLVXUSkiyNNIVNd3wa/AtsxcxNbc/kMMO9M59DfDJiNRDAAz\r\nhF2T+0eSZfrOFqrm/+s92AZWr2q1xf/2bl1xh0ixdwGGh4s7F0/q0udUbo4L\r\nbcemo/jvw5ND0032ub/E1rJgcEcNcTKcENGuDbkD/sZrvC0DQD6CDy3loKro\r\n0m2JBBzjczG0bocfy4uZ13WSNeaG8T9uxRo=\r\n=d9JC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230320184810.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/50af4198b87e8c780cf73ce25eed6585/chakra-ui-system-0.0.0-dev-20230320184810.tgz","_integrity":"sha512-TTAQw2pCdnDUo8y59SrLQ+qoWvfkR5paqxG590DJZJWsZhtN1xIlNOidz7/qoD7QWjh9t0qKlDaKm8YR36tBcw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230320184810","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230320184810"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230320184810_1679338159524_0.43437387673803585","host":"s3://npm-registry-packages"}},"2.5.3":{"name":"@chakra-ui/system","version":"2.5.3","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.3","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c664fe8496fdc03f7d1e805190d58ab38875f07d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.3.tgz","fileCount":45,"integrity":"sha512-QwIy9yg8Nh5NfI5Qfmp5GkzpYlep45fRNUYECgvcqEvcf+iSu0o9xMZMbxwKY/qSTnd4uEmaqhGcksRzhfcqdg==","signatures":[{"sig":"MEUCIQDqJZQb/GG2D7iri+1pGZN36RBsnpA0QmpzwHiguMyp0QIgJMY81QWegRwjFGuci8Lb0WNctyLBAIgkIwkyG95NI8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHCc/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNAw//bFzV2VVyFrmXN7VREu4QsuM4WUEMBNg0iIN+h1ESHJBELKAH\r\n+PEACb549Z+dh/dbsxKAffEsV8+CddpdP4DvnFjt49PTubjJ2n/awY0RmxAH\r\n0WeEP6ChJsRPBbBqzt+N4G3a7On7ETqvz1Labve23gOt0goIN70pX5JupYMN\r\nsM0/d+fJ2L4DE3YbnY/EScY1jjOXrNLp+AeG80S7n5MpY0mHtfWLl208PHBK\r\nxnnZXcTrN34F+iF5MQc6lq9xJWuhCrO1ZGR8eTe1aturKXHkpiQyB6D9IuxS\r\n/KR0Un9FeigzjekSFMckHvAr9rBRHw99ZHSh4Q216LXzNIxdBJJIP4NKvaSc\r\nkRvMimxnXn5WeUcZRRb2vDMNersbly1HOuCFYnlQ6cEM5WSmVeiYZRg4q00/\r\nAtJ48Exwf++RFdfhehFiwxopJmFzZr5q2XU5pmCjeqzCNd9hfXCi3N8BS+0B\r\nXLzG9nokaTDQDHogM7xEU85mgxmay0hYgVQeIgGsYSeKDM0+HrZof78y9N4g\r\n5/qf7XsxuVux8BMBm56Jq/9dOApjgEziOUH4uNxjjj629Bq1mEr8HQ5BO79y\r\nKwn0oAItBKHsPXmNkdG7f0RHU75t/4+pQ8ngiqlBQT781wks8GPIzrct+4Ai\r\n8qljIRZAb06GYa/OU3wb8BCA089rtBzwIzw=\r\n=q1dS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.3.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c89b7d1359c3b0c54c4314c41d22218e/chakra-ui-system-2.5.3.tgz","_integrity":"sha512-QwIy9yg8Nh5NfI5Qfmp5GkzpYlep45fRNUYECgvcqEvcf+iSu0o9xMZMbxwKY/qSTnd4uEmaqhGcksRzhfcqdg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.13","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"2.3.0"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.3_1679566655730_0.6315777877703468","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230323203724":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230323203724","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230323203724","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"52c6747278b590ee250c35b79fa86addb5f9e4e9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230323203724.tgz","fileCount":45,"integrity":"sha512-t7OBpyPktkz0wmASOxU0iWST7onXGEHLpEEXyjUqerA6cDZ4BFLVQNjwx+EvD6Uf4Ig03oO81+H3PDSurPLajg==","signatures":[{"sig":"MEUCIQD3Bd1BQdZ/2+2R3xTfOZd6UA1zWDwEiWmocBJT4V88AQIgPC+687NmRfBqi6JGtrCSYGSPAJQPWIdGpCNV4a4jl8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHLitACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ6w/8Db/LBEDiXi6IU7YmQK46RSIJ/GJA+q+6tBN1gYY0tZN5YJYB\r\noVW/JeewibFhQ7G+x3dflvAxG6ajPuzMXLvrwjWCRX1juXnckn04ylHSCF/k\r\nwl/3TrcmCbJENvCmb4BdTjcqDtdPSMvMN+YV4WUIeh1qUwbvsPsToKFP/lTH\r\n78QFZWHmOQrwOop3aqTsCOdJ+YaXU5OtAqRlzXL/pE8QuQOeSLnMyir4DE8f\r\noqJqY8Hw+weF/4wGHM+PAs+KcbOWbxnsF8gwdL6EhZuC6sKeJ9Y5ARXlsvzI\r\nSLAXLp6baY1xziT8Yoax3DgiyM8xFJR0EEZkRfacqnCqYIgeV+i7eB4Auplp\r\noHkPPzECpqaU6sHF495WX2otL87dThkp5oRZNkuJbeBkz5GzRdkmo8PHrV4a\r\ncxNIiY9UJtKJCFBgvrAWGEi3PeCdtI61q3i/21Xzbqq7eHJOuth95qEjWY62\r\nqm9HeQu3Ish/BLULx6xCHsyjyZ6a51G11HxkQGCcENqbfj8X4Pst9Y6kqu1i\r\nR/XZ++wSuiHk1uFannG+P+kfm8djQTuC/FxXGcv/SE6w5RLWEbJirot0Nxop\r\nSAcLttQxkaRq1bMmy0Uw+B8nw8ZaZKrdN0GYC3HhOwZi0Osdzvyx21BCYoUj\r\nvWkoIVkRTcphF6oPf2n6eaxEeg8n5UYF/18=\r\n=2C1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230323203724.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/308e3b7dba96d143a745fc8f1338517a/chakra-ui-system-0.0.0-dev-20230323203724.tgz","_integrity":"sha512-t7OBpyPktkz0wmASOxU0iWST7onXGEHLpEEXyjUqerA6cDZ4BFLVQNjwx+EvD6Uf4Ig03oO81+H3PDSurPLajg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230323203724","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.6.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230323203724"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230323203724_1679603885461_0.8888502691574776","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230323205240":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230323205240","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230323205240","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b4c8898fd332ef8602ee77ddb2b130a31ae46d85","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230323205240.tgz","fileCount":45,"integrity":"sha512-De9HAmpkYJNdm7D33LDBcD/1YoiI3DuioDtxFw+a79P4lSx6+Rwl6I/WFSW0ySgHR3IN5oQoOcWtKkz82+Acog==","signatures":[{"sig":"MEQCIEHf61bTN6s9x227XWcpEQGu7daqtPpU5mYkj6/rH1j7AiAbpO1CT2tXj9OWOS0Ck0OS4vZ7VWgNdqmWuRX+tJfvRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHLw/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNQBAAhvHoSwcd6xIfezV4XuNdi4vEuUhdT++ebMnAGFvItUCDR6I1\r\nLE0cdEe42I7JP08Dk0j2iEfkwOye4ay3qMWhLh9IJ0xgFTcEq0TnVkiCQOe3\r\nJhWLoxZW/ECa2eKPz2WuUhtqIPjxf/RagOP3QWoqNd4cApWaKkd3/yocPQBd\r\nY2KvC1aQW0QqldcHMraOumAifnb0Jvchca+g3FqN7cvecuwKYNQsbhxaGNF7\r\nFCaKX6nFuW8Yd1Si4UX7uvoMKW1rioG0hlcDVSAE97bKvtbTZ9WW4ImNBk46\r\ntScV9YtgpJMJYFwyqayp4DHQrVKTYDX9qxMLZGZTM42QsmT2o9Z2odPpCN+v\r\n3epxWZzXG6mVHy6wPqScxkHfmjPODNUTsA/mF9i4K52Ruw7wl8/bQ7KaqTv0\r\n7no8evmX7FVhh0st6MA8Yj7ZUpwUsl//Ttk7rtQdmRFziCi6KxJfiXKbk0Xl\r\nLUo0mH/iBL+oxtVw6TiHV7d/bFkJaV8kFv64e/bNFcB//hTaQbsORmZi0SuG\r\nWCYOjQuDcLrhjrFbH80Ap7igau71E2rkEre3Gdyvy6e8HC1Ae0/P+7qw6tGw\r\n+3na/ERzwjBYJQDp0UksClPcm+4vyoV9qN6yqJbAtzbOo0t8R4vvPPw20/Ch\r\nwd+IqloGua5F/3JdWR0oGXgk+KcPZyPbbGs=\r\n=J1CF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230323205240.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4eee2140d1f10795c0eb4a5e6877a5f2/chakra-ui-system-0.0.0-dev-20230323205240.tgz","_integrity":"sha512-De9HAmpkYJNdm7D33LDBcD/1YoiI3DuioDtxFw+a79P4lSx6+Rwl6I/WFSW0ySgHR3IN5oQoOcWtKkz82+Acog==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230323205240","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230323205240"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230323205240"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230323205240_1679604799436_0.9291751104111028","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230323211647":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230323211647","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230323211647","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a61ea004e9e7ee840b7ca502fc7728fefb4cbbf7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230323211647.tgz","fileCount":45,"integrity":"sha512-lC/GWeVm9ICWH8MSpn9WieDq442Ea7fx8i3T4q0CJd8cwiZLli+/HtVZQbgiicMG7swRloFuUrenLYic49pPiQ==","signatures":[{"sig":"MEUCIHJOX1/m5df9cG2OeTFHSYe/bDbGq6JftY8cB0eEQSnXAiEA4mKKNR1633Jnlu8nOX+fv/3PuSASmQmj1/KpWsdFVGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHMHwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ+Q/+Ocz3MT9OAp3XurPvUveKhHDKL+1KYyW7SB9oytz4iRkTNOR1\r\nQUD8qLp8FlgBD0s1D4S3MvvFsZRRBSoHA1exd33D7PsCKzEqr0CNipw9ufNo\r\nOA8wnn/jMHanjG+45M/GuRoHfmncZAUqU1BU1CxpxA2sdCa9/m1RB1+MOSR+\r\nLLYw12ZPYY774u04PSc+FrGc/qL668qxjOpNS8RCcFjAyc6eTKsmPkpxxAcA\r\nakih5M0y5ejI9//DxYO7dSYb7Edij4gMBWG/Ver2VkgsmMsX8GCF8Zb/f/Kd\r\nI78F6BDFjsKFos6OI3Q3rbKdZ4aNHxbG9EUv5Fe42EN9saBOwcPLchdtvG/6\r\n9fNdcpGZKb2Mie716HjA19VwUZvZtacB2hYCkFNvTkymI46rkS2CFqXISIRY\r\nUOtBsT8kh6ZkircxbFvy1WQTkdkyeqewo8jCPb/M4HYd/R82C5MWhppHzdC7\r\nTcIdclMXtQLWIxryh4Xaf32ELFOINzP+w4BxlJVPksid6FKHYOvTGutmfwGB\r\nOwDopW2CtM69MYZYkCsR4z6+I24fUz9MtwwUwdqIuPsaSKYFk5szN0nsqTWz\r\n+WSSZ0Vl4MPpnNtH/xTVad+VMMTp9RsBNKHICPc4Ri62VFFY3K1OiGW5/JAk\r\nGbJ330UkHK4c5UMTcXlsRGFaLZrkiF/utJE=\r\n=BiVV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230323211647.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/723fec2097d5598b73a72591efb30f74/chakra-ui-system-0.0.0-dev-20230323211647.tgz","_integrity":"sha512-lC/GWeVm9ICWH8MSpn9WieDq442Ea7fx8i3T4q0CJd8cwiZLli+/HtVZQbgiicMG7swRloFuUrenLYic49pPiQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230323211647","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230323211647"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230323211647"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230323211647_1679606256189_0.6039233372510735","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230326141955":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230326141955","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230326141955","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b24b64f769400f97e1e952071d97fdd77f74885e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230326141955.tgz","fileCount":45,"integrity":"sha512-xCCruysKo04vEsszf4P3H5a2pC9F7xTqkEYFuLFmNyt1tRlASR0SNhnTqLbh8Fbl/g1tWzUNFw33bbYmjwrutw==","signatures":[{"sig":"MEQCIDsiinJfPvIQ8mr3rKJ8Sm0fClwtTQJzxIAfMjIOITIzAiBCC+4sGtbU9uMvIVbiuGsrkhcBKYucGgdycPNVFqmAOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIFSzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNqxAAo/GcvNN1/HCv7/wqlEtb+D9bOXNbkYJ5i3vTkuSXMVRYuY0t\r\nNXUUv2UXloau1oSXRmO3NMnwwpgl3Wwp1LqaI6tRYBGUoC5gFu38gv9AlFj/\r\n8W4tLPtqYT1p83oY+UBeIsGv+fTlSWcyUuF7NEysPZrrHv99PZcJtjrqcnxo\r\nEundg2zF6805d/ISLop0AOcj9Ih5mFRkN9n87jj38IxB0z6m9ATcEmeHSWjT\r\nUPGg6bhK8cjUk4S0FMIa1hM32s0S0E7SzNUD3teeaqVejRGJu+nNDWFsDaKX\r\nZXuE58R7ji8LOtG/JxBNll+fxdoSCzj/sjXNToaJyuophEiWw3/rxZKwyQ7T\r\n8QpC0aJjwdWGu05qMBMKjWoTeJH7gFhkt2NAEgF5QKMZZVcmDTbcG9Wjkrxu\r\nTJ1U5wcFGSZ7/tpKW6EJ0U5etlyy50lAlCmKvkvn3NCvMVQ6WCLptC9fptG5\r\n5bjVG1tlqH4Nf94HEmaDZOgue7p95I+n+FnQgYcW5zi1HrS8RhbRtD1A0JJt\r\n7j3C9v8/yjFfVPM9Lp0CIPhJVYnacoz5gINiGilbi3FL5kC3HcoN5omErCSc\r\neYbTPpylWEAhUHurvA+SxLGmwB3YFY9JhOggFE2EHdiWHwWKxdp2eJuQdLFw\r\nm4efvVw9rwaG5Vfrf04sSe87+JTQykLD+jM=\r\n=KPff\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230326141955.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/3ac9263018e89a1c71c1d06280a78597/chakra-ui-system-0.0.0-dev-20230326141955.tgz","_integrity":"sha512-xCCruysKo04vEsszf4P3H5a2pC9F7xTqkEYFuLFmNyt1tRlASR0SNhnTqLbh8Fbl/g1tWzUNFw33bbYmjwrutw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230326141955","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230326141955"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230326141955"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230326141955_1679840434955_0.07469352221546988","host":"s3://npm-registry-packages"}},"2.5.4":{"name":"@chakra-ui/system","version":"2.5.4","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.4","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4b0fd1fcb7ee5936e695f14e4c814613db13532c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.4.tgz","fileCount":45,"integrity":"sha512-Eg1A6ZSLbj+XFuiQkb28/09mrSg8eGJ47F3vJd4K2sDDori5FyHSOPrPFqx0qhXzSq+lHXREBhS7izLN4xx7qg==","signatures":[{"sig":"MEQCIA/jKFvrpgsp9yMn9FhiBfYG3jEZole7N6Nof73oRkYrAiB3sp25XVR8mcm/QRX1bDWYl50Fs8ZOEy2fATivlvHiww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIXf0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLew/+JHzQrN2IXnPS+EqYpp7xrsnHadm08Wvjpe8LprbYurHAVxeU\r\nlS3lqmw+J3xpgsdpZyq2laHJg0pQce/4oIJJOP9h6T2B4vMl+Awf5pSzloXD\r\nbt3hGcQmTerfvxV53he6MyKmCL2SPnU5NzuBYcL89qlOuIpOape65YSH0/8c\r\nb96amb2NGsPruqT+LIrToh+Z4LBsXcIOQWuBtG8/xNi/pXCzbFogicq2itvW\r\nrt49PyLaqpFt5BxFzGzj1xDQdmJ23ITpDz5Mr9DHOcG8NeuX5XuzF9mGh042\r\nCD/6ksjVN5OaYMEfSfcP+e0Nnj9wR774jWjtus5pIUMoY1cToQsYBFfrzRPV\r\n1PhQ22VX6SSUYAplyghkX85I1FPGco/s+aVUw9NWNbdeN8Bl3QwL4OEnIZwE\r\nQ/pgKglIQbLn3s050CN5XMk8SzQ8xjD9cjeSU57Jeae5cxbORMwHHjkJO1vB\r\nCvbF7Iz6g9yRsbaXtf4hhKC9Hc4qTy9dIHLQ2XQSBY8Uwn5DTAKLJqOej9yU\r\n9ejmcJTX+TcbRbZbjrnlVskaDNZt8le4L2nJGMsOaYx8x5kcPMvWpbjDbC0r\r\n/lW1sjwckgJZp67qlyBmOKSX9x8PczA9+A8161N5MPLAf09OZwiL+ulbQEiD\r\nqWfGbWjj59aETa9+dD3riyZkLf7/OTT2RNw=\r\n=GD/q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.4.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/343cc4a4d223c85490f68960e371fcbe/chakra-ui-system-2.5.4.tgz","_integrity":"sha512-Eg1A6ZSLbj+XFuiQkb28/09mrSg8eGJ47F3vJd4K2sDDori5FyHSOPrPFqx0qhXzSq+lHXREBhS7izLN4xx7qg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.14","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.7.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"3.0.0"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.4_1679914996565_0.8258784220748234","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230327175739":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230327175739","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230327175739","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ab116f8a7024043b7450af67adf9287d75331441","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230327175739.tgz","fileCount":45,"integrity":"sha512-Lhij62+xDl50Y2Ow3Ou2gSSf44MgUh7e3r/4w+YXORtqRENmF6Lsa8rEYzIZlR7VCjfFsYjXRMbbhvkamymHRQ==","signatures":[{"sig":"MEYCIQD8M7yOrRts58LkJVyAsdFIOcw67MOD59c16c4df2NoywIhAJC6QtQxvpe5ko+z7F4+bZIsVaZhYt627lcLbbcfBGMM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIdk7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXSQ/9G10M27eGGytvbRM90GAiaUv2KWXzpZW9ZBTAc7OjhhYLJ93+\r\nv6pbuOluKHnp/2t7YcmIfjjnCsgvHyCPIga0UktfCCfIVomRfcCCgjl5L3rh\r\nbI91A2vFSfA1gJaA1Vau3pcW40PjmPQ+AT6mSybMYfY7dlsTR/4enQK+twub\r\nXCLFE6JyFDbJakhqIm8E0k0V7ELsyC6uJl/By6VrgyaQbv2b7LVnAja7rOlj\r\n0y8R+2aBJGyPGw1DIia3kejm+mbr9RpqP0JaKbZkVp+DlxMj479IwpA+zFOi\r\ndz8dnuH5GgpApTEnIi9WhE8ucHZCpD5J4vPSGVsDstrSAr5gJ2IFXy6f+Ycg\r\nSMH4eYPkHjbkIhnLGLGKnyCVl6xt8Ov6I3YRb+1OAg5gJfqj1o+USEY0bm1O\r\n7RcC1u9SA9KZd8G/ScDng0FlmWkUBsWnLZaNTL8NC1dY9Rv7LcRUptgGgTIG\r\nf7lfwX57aGy2C4O8B9PTCMELfDb5REN23G3OI1mNgcevHfxoNep6v4agOETu\r\n/YHejsm5N/QfycRbaK6u2EkzjnLyaalOSWrBW0gkH2DAGTX0EofAdg2wuBkx\r\ngcKKsOi6eiq9gdNnNg339kN9Etdmp6Ibrg6EgdB4+hjHnADhhjhHPCrhRacx\r\nb4vzBBVPJFIwqPvHLofjjQlT6MY/XHGo6lw=\r\n=Tl10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230327175739.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c0305852f903ebe6add7b2dcc420c474/chakra-ui-system-0.0.0-dev-20230327175739.tgz","_integrity":"sha512-Lhij62+xDl50Y2Ow3Ou2gSSf44MgUh7e3r/4w+YXORtqRENmF6Lsa8rEYzIZlR7VCjfFsYjXRMbbhvkamymHRQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230327175739","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.7.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230327175739"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230327175739_1679939899678_0.7321487171462848","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230329123951":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230329123951","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230329123951","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"55aa23aa0a0ed505b43b388f37afb3d4ccd8fe44","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230329123951.tgz","fileCount":45,"integrity":"sha512-mekmsSHk6379FK0YQmRBbnL17jgnwWpupHnszkRPxrOMNUC3e/AC+X4v9mX/IJREwJxFXJKFyPxKV5O+AOx4HA==","signatures":[{"sig":"MEQCIHYoFI9zANviuRr2ee7zSh16JZHrAkpWihTxLqQQqE/+AiAxC5YnIQYrLHvHpEeq8ph9COae/uVsPFFoy0Pr3eSrTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJDHKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP/A//dCxtU9BQjeT81bRvSNd5tYVbNYHSzsXX6wnnunNhzanGuAQV\r\ndAnHQQ+dfHOZyaE6kp6hoHIHBefGv20AKyoVZ55NAhMvUfwGkEXQi2EDq/SP\r\ncq1jpQzK5SQzE2QgYT8+5kVhBkjbBnZLnn7wzqhgYfrutxCGO2J/OcuGGSio\r\nC3O0oD1ABx7re2zxakq1nJ4N/RGCeHGJ8PGPzNbA2Iv0btamh8WkZYEitynC\r\nLI28ciDsi6clBKmWoGIelUCLqyYJ6isBew5ver168aL6+kzvrSprJPC8QluN\r\nPxxVIP3qZNb3aiwuaU/HR9e29YqCfdJbN6+uLD0wl/Nd19SnC25WfReKv2a3\r\njELAS8JHciyZi90r9hD2JT5BXDDRQvzYZqkxJIevHpjGSiebCF1fWnWfuNeb\r\n3jCPKuNHQweC3XckLGY4jf5QGpo/fxydwGBCQ7M8OXJIswUSvEo0k0koJ77k\r\n4bW2KxQyU9bwL7kW7bRt2PrUqNkj3WCxOABj77fxRmOUunBOjGDAyE3JqHqD\r\neawiPxmNRTbLkdBvCsk+dORlby+uBQ32ctFdX1qCh1cl41M7C4pHi35XQaw2\r\neLlr0Z85MPnuWGHpNzt5uHLWhzEHezIncCyUOCTc9NSUW/dvXCCYVvG3pYR9\r\nunTmj4QyUPt0QEBFj+qE4nJaaqhtkYe09iM=\r\n=JocJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230329123951.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2acbc34cbc455177a04e2139e160ffc6/chakra-ui-system-0.0.0-dev-20230329123951.tgz","_integrity":"sha512-mekmsSHk6379FK0YQmRBbnL17jgnwWpupHnszkRPxrOMNUC3e/AC+X4v9mX/IJREwJxFXJKFyPxKV5O+AOx4HA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230329123951","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230329123951"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230329123951"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230329123951_1680093642053_0.4344105338744155","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230329140150":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230329140150","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230329140150","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6921d7fdbbcd18ed4864c85b15b91672ce7123c8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230329140150.tgz","fileCount":45,"integrity":"sha512-elmXkwk9Xz/WBHznF02rUQ6pSYIXDpaIJmL6X33nCFSziyx83ZB9ANmkyZ8Ey+Mz4TRWYmSRAqYnCVsLg7iJkg==","signatures":[{"sig":"MEUCIC9RL5z9gF1SDiOBTBZ2A4e+w1iQKt3g3k55zg9Gj1i7AiEAmoxqgfTSh1IMn3IaI/dKqeHc/asV+9Ekmc/hyBsVHDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJEUHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw0Q/9G1D8B4WVfWnYNQzROv/J0reeSGWa7TJDjFo7dHv2nzus51Ec\r\nEPe5qQlJxFGfPjFOPUVWx38hQ7LWaFeS37ISXeCvoSN4O8Ygtwka4naX/+Ps\r\nhaWza1lEHbw+tBvUTIYuQIVhEtp8mNVdywNPidn/wssp0Vpi9d5+2hAdN/xE\r\ncCRRmguadnxvC7EEAiOSYbrfdGnDVb+Gjo/Wz5Yz73pTcSqbHUPm6Gzmnf1o\r\nU3KfR8GmFa5cUTIQacxvlucRFu3ln0t8w1BByuvQ+y7jWl4tT1/fi1qfajZx\r\n1tt2E8FIObw8UBU+BqyqFUq8nJlrObxcbNbAc9/Eu4B3Oq2TsjMJj9Z8lVp2\r\nJzjUvgP4nypnVySXNhK3xhrpAxXJAv33R7ndW1vWpq0TSuOQ/F6P0OBhUk/o\r\nYMcZdaHhsyM3uU2/gPFD2P00qQiPlzPqMBoPfwdS2i17lfSM6FfLs7UU37Ds\r\nrAJuJQE7Rtkkhd9FmjU2D2LnYkJSD4ia24eQIUpybN8M8dHCwzEe4h3w09eQ\r\nGoSbhd4SH05loNQJK3P3opr8Db2SZMLyv5k5pJSwzFa+KFIQ2feFpW1B0QW1\r\ncuKQlcSfve6bnmA3We3mJ41mI0Ai9g86+yhU3+HtfTp+xuoRk5YiQcxGZ2wE\r\na1HenOqafROEaH/tNSC4319YLw7SX5jzTjY=\r\n=lv79\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230329140150.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9c91eaa07d5cd633faea58a319a4f788/chakra-ui-system-0.0.0-dev-20230329140150.tgz","_integrity":"sha512-elmXkwk9Xz/WBHznF02rUQ6pSYIXDpaIJmL6X33nCFSziyx83ZB9ANmkyZ8Ey+Mz4TRWYmSRAqYnCVsLg7iJkg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230329140150","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230329140150"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230329140150"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230329140150_1680098567394_0.9856379126253145","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230329141708":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230329141708","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230329141708","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"fad5dd9b0b2901273c10d9dc97661c157e044663","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230329141708.tgz","fileCount":45,"integrity":"sha512-wSLHagUH3E5blZG2tAPtjb8xxHSQxYh0OYjF2CY1+6GPBueMdcZDkiCXxrMz8dpXiNu7d6fL82+KoduK6PXxVA==","signatures":[{"sig":"MEUCIQD7Yz3+XLzC2WM4QDyjz9xBHxFqPQFJPwasG5SPeRsjqwIgcUzFMJfpZewTUKpvsOzYKiVufurH9jSj5/rdEJm3acU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJEicACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquMRAAiuqYHrRiQJVOL7gL7akntULHhzwlvN0iZhDUd1xW/qg+hJFN\r\nH9a2PpjrXA/K3YmLZOzrkvuMZapqfIc9HscRFBIp7EPai1Gd3zVPmdvfwdBo\r\nJ0ICBBHwZKwOnZ3eK4tLnO5EZPz+DMBv/f6W54pcS64vVHHt+zL7xmMQlgj8\r\njLeQ8Wpl9gCixn008+3Z+28fZVNsl3i4Ql7lLUUyHlU4pgkPwEdvhgYXlWJ0\r\nlMUNIm/8qCOUfMSjHd94yWCPHlG+XEHeoVWxoLMrUSWL+X0x/1fC9xPaaX7t\r\nR1ZDWk/gI5OqyJYYQ5i92W+8pExIgvGVR8R40KUnWzuQPo0JluY10NZVS8RM\r\n+78wKV9NoiV22yJNAbLklkg7rxKDk+deO7//k8H4DrFmEM+HJzTbQOPbResj\r\nScY7RIa8dtKD7geqwn8snxZ/5mLfVXt930xrEDKL9PUPQu4FcW/Vp4crZ36H\r\ntnHgEmaM68NtPELZ1S7WExplHYN5+9anEcg7THGysP0+ZQa7ssBi+spEzUWp\r\nQNuEO/wq+4BZgpiprfOw4zvWUFwduYOTjGP2A68MsbhjLOyc5/iW8GYihxds\r\nrwyorWVteWHwu+wfpxhR+WFl8B8hHYmaz1s9OdUmHM/EaymAVGW/1XeNnm3q\r\nXXzxYeULG0ea8HNYFKEimkjD0YhFUXAM24I=\r\n=yRj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230329141708.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9e8db0bd622190a23e25b740df638bbd/chakra-ui-system-0.0.0-dev-20230329141708.tgz","_integrity":"sha512-wSLHagUH3E5blZG2tAPtjb8xxHSQxYh0OYjF2CY1+6GPBueMdcZDkiCXxrMz8dpXiNu7d6fL82+KoduK6PXxVA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.0","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230329141708","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230329141708"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230329141708"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230329141708_1680099483856_0.2680314785846769","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230329144927":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230329144927","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230329144927","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ef1e5c37bdf16184681644aad856a1b6c64b9bca","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230329144927.tgz","fileCount":45,"integrity":"sha512-e+DGwtbWmdfD2NbvHvmhmwwEBFjXOQ4Hb+e3kqxzYjwHR9liSY63f9T9qzZ8O1uol19uHc/tPG3BEjaneqcTXw==","signatures":[{"sig":"MEUCIQCGFQV+h1ATWMh0qWgVl44YwotQCPXP3vaHCOL+6YsdKQIgTAOFjs37GcTPMjbc1WLQrbZM0E0Jl6z/djTLuIEEUmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJFA2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9+Q/9HS6GsNO+L9fyawgzVWSpPWPsZ1CecP6BicIP2TibUITU83L6\r\ne3w1Ls0HqUnV7DPMHcLClnauCGcNCc3xtBvPuH114OOuz7Y3svz5wZHscDvv\r\nsxGaN8bDXi/sOCf9uOkdtruMSTz760y0kXxLmFrujhjd1pCPXhSqFtLuJwb0\r\n/2GPjScMtZuF8ZGjIIDZHGilxBNOriGU1cpEPKgyXmqhRYrNLMI2s/SUtjT6\r\nLpR4b+rGhGp9fWohecXmmc7rtkH+3V0dl1xJVojFSmKs06MlJoTNec5QufuB\r\na4W/KygedNeMJ5ic6ezdJqcxXFC1C0tbzSgykdoevCnqYShm1Po37qEIP3Yt\r\nNXgOuHcGvO3+PGs9q0EdQnoSfPlK+tj0iNWlG9QIcrDeiMezZwhEBZr1usjs\r\nU9lyAmBajkn+Vn6LxiJZEPdbMzS+eC8z3COtkBD6CeJ/+dCXFDjzap1iN7mN\r\nwc/esX15DUzZymyCxWxLr9PV3Y7YuUpibxYfkkhTwn4rIhhwQsmg2K7Kxxlo\r\nQP4Ydic7yQC0MR2qIBgK0ahlGoz9ytFF9u/ckjjS66AkDGR6fINLPD7RcVfb\r\nO7Dn//f5DLr5GfxxbA6UXInKKBELWr+3+xp2hjiX7XSVCMghHx+OhYlSS64M\r\n2/YF1iXbDvwQEix4ymIKKw8OG7IHJxcYN7Q=\r\n=y43j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230329144927.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9d130494dcde36df7718d8f4b1c008ab/chakra-ui-system-0.0.0-dev-20230329144927.tgz","_integrity":"sha512-e+DGwtbWmdfD2NbvHvmhmwwEBFjXOQ4Hb+e3kqxzYjwHR9liSY63f9T9qzZ8O1uol19uHc/tPG3BEjaneqcTXw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230329144927","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230329144927"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230329144927"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230329144927_1680101430546_0.40622974631172193","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230330123203":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230330123203","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230330123203","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9e7bc6fd85e879d02b6b0d2ba66f5d416fb3068b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230330123203.tgz","fileCount":45,"integrity":"sha512-lM4dpuWCF6c372RzRBpkbt8cY4vOq3NSlt28XRD4Z0Owp7vPK9JnfkqmOPcmjAhsK1JljHrPs1gxuoh1YaxUFw==","signatures":[{"sig":"MEQCIAIrVAwQFnkp5mSXgjhkr0enyLzHuHgUzPfVIIp3s8TUAiA4EEgSqrw9S0ImJxyDah4bpabh8ix19i+Oon6YU0rmEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJYGPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrziQ//S/er6WEeTU4rOYX0HZrxYmIhkB4n/XTGjmoiaimA8zy4p+7/\r\nb/BVZZsLALD2EjANraoMjN79pMqUzoM9yARKwk+o7lHOU302pyoU1i6Il1n7\r\nY8sitZzpR4gyTqQOFWJr1F9ettmmo3XWEtS7zuA4/t3svX6eoG0IVv5ouXtq\r\nMMHuVFq85oA0oOp+gCNQvJlxuBbejsnC6OGAYwbq2uURlJcK+FASo1P2N+Ue\r\ngx0dfTyQmk7WSBGAt34wdNMHkJ3WdmOVp5/FTW3kOPj3/7xp/dlRKrW1ncoE\r\nWF98VtXy2Tiv2tF1wDFHqQZVw0SqnS3I4uhE/gTj5YjWjiBGlYlQvaiyOdmY\r\nnkUnEayckfSYIXGBT+vtYC4S91nAvSREOXhZXE0f2ehfMYslONL6ser5xZmg\r\nh91lAQrSmHzV4qGgkL60w1N3ggnZQ8fyiW6nndFRGYRv5yXMzyWLyDxYpV3F\r\nVly5EBFs4YlAzqFSKebnvmh1eOOhyZuhoS5TXDnUJtVLnjVNvQN9PEk6SdZc\r\n5byGuSOp/XLUK0iRoHWvhEhLGfOWImwQrj/zfxAA6wxatPN1QdaTiJhrZVP/\r\nzLftZ8rvWOQs1/oldedbdFGttiWHGWnlf8k4zj5OZKAgyggOSO/tJphXG61A\r\nT5e77c5csghjm+sWN5tsdOetPOQoKDTiz+w=\r\n=1Mb4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230330123203.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/51f50de449610b91b82770ca2d55cd66/chakra-ui-system-0.0.0-dev-20230330123203.tgz","_integrity":"sha512-lM4dpuWCF6c372RzRBpkbt8cY4vOq3NSlt28XRD4Z0Owp7vPK9JnfkqmOPcmjAhsK1JljHrPs1gxuoh1YaxUFw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230330123203","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230330123203"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230330123203"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230330123203_1680179599635_0.18244979429561448","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230330124619":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230330124619","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230330124619","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"17615a5befeb7b37b69504dfb029f4be47781972","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230330124619.tgz","fileCount":45,"integrity":"sha512-jfCX4d6UEro9kapdlpr5LiW6jIQUOMTzZZ8z4KfAkIJ3bKOu7GosvrkN+LYv/lgdyeo/1+t1GwOZN+0j4HrVkQ==","signatures":[{"sig":"MEQCIAxx3/BLq0fAemmSy4Kz/DLTA2ZAwEy7yNIfHbK+oJUvAiAAuJ5IvZW2QnoTbfgxEoKmIFipqtpBAqAU70wDOhrFOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJYTOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqgww//TGT1lg0g3oY0DkQJ/1tfllozbtEJFMA/UBs8yI12Z86MG9rx\r\npnyDuasDxIf/jE4ikvJZLx37gL79M4x2J043/j1862Hag3i+7skvnkQJEfP8\r\ndMOdHgy2urItDK2aNnSZX9FE8Hd9DdT55P9uwzc7+MXWs3BjjjKlpdIm+Ydy\r\nxrl/nurMU9oWosbUucFyjnbQ6l3VJd3wqXZUeklzGctmD1I0UfPRbkU+b4bt\r\nmVCrmCjRB3x2/zsp/SCeVjT1H1IWIy7XWI1pYodAB7wa22xNE1/yj62OI1hz\r\nYAMX8DA4TLaIhIIKlpQkzNExOKZG3PG/UnirrNW6nhivZP1XGyP0wHLAdIP2\r\n5mSWHLq+H3TSGKPK1Fnag4zAZTiNaD1t9k4XhMAjUrAQWJ2Y2rO2oazbGTGU\r\nWfZ6woPO5jQeH5LJtw0dBv05Zo62AVLRtr00PKuwOrs4DFEc0n/IgfB4ey83\r\nFM2cM40c6dHc22c5AXhrZsBrxXPsLdR6X98ivMExN+ehlG9PQyuLz80vQcWS\r\nvgbqVlBHzaiz7G6T6Vf3J1VjI9tDFUZztLxkOMlCATdafQ3Apq+C0dYQg53X\r\n/OdlkkpPQS80qxAbyujnKUJNYMjksWYex1QbtF3n9KaGtOXRnFbXeaQsyKZ3\r\nfUATMjj6mkhZE8phD3NiiYkzlqGx5d0Ki+E=\r\n=EQza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230330124619.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/07a2e7759a50ca86e79923988b1b2a50/chakra-ui-system-0.0.0-dev-20230330124619.tgz","_integrity":"sha512-jfCX4d6UEro9kapdlpr5LiW6jIQUOMTzZZ8z4KfAkIJ3bKOu7GosvrkN+LYv/lgdyeo/1+t1GwOZN+0j4HrVkQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230330124619","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230330124619"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230330124619"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230330124619_1680180429825_0.3280827818579666","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230330130626":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230330130626","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230330130626","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"72fe9f359265f126d7d4301d9e0e5928bc95e6fe","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230330130626.tgz","fileCount":45,"integrity":"sha512-fHJghijBqJZKv5IIwk8drxfc7GUD2fEHVtj9EY/TKb91YMcGL4iySp59Ypc9+NaOevdqDPIvzSBvq/ggFvBFVw==","signatures":[{"sig":"MEYCIQDACKyS0OXB6g0pHMVno1pQ4CCxap3xsEqwWNW3w2mBCgIhAOLW/Kh85Ytzy+DzRr3mxwi4PZYAX2u2LPZKQ2yzHjQF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJYmbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA0g//TMCb77KLq9xqdUfPp8bQ64kxkWnBKl9i9yB84CJzggvYH8G9\r\nRbJqtQgVvUwKtnYFclCRsOG/JdfBej3C7kdmql/0j9N8y5i4apme1BfutJkL\r\n7uWh5xWJ988W1CHdiihA1ZLjQUfeysSNZ6eApI/TV6RCHH2LB8BHccOuhzdZ\r\n1O4ARn+cdGkrR/4J9rKWLgS3R4BBwHG65IFNAadGjuZzmjWrKercU7ZJYVbV\r\nz4i+2lF1/MAa6e7+0iOUmbQPcd97E1ymb5oDvkDeD5vQBFXMp+fupJ2oDZs7\r\n+4K6uG88UzxvCsRL7ji3nueDdsiE/jZ3O+50ZceVN1iX97IqTgtiJnbe2IMh\r\nJ14VpKjjSdMvyjW2AM7ddUBrRD2ROXPNiSppfeDvzVSPpXZhDC4ysMGjx7Pp\r\nUtnIwTjP6Ty/pUQyOFGOQS755IfXM+3s+BZWRvgoOIOgN6DRM3ZMfZqr6iR8\r\n6BrUXrUiOSSh1GCreHPMnjEg5z5M1Hrs+tesxBnvZi1YNu8iYeBNXIVgNbe/\r\nEJdLkBu5zC6vZ2q0pDmCMXBT0LFsOCtLYchcVfWL1zgkn4Y10m40dliQ1W7E\r\niOS6PsCSKIji87JcuLY2ulFd4O0vCVHu986Nda8E+0chOigMCnk37ToVejjp\r\nuQMtPftwIDQeiTYNFJGtB6UvdniimMlf13Y=\r\n=E2ch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230330130626.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/43d6c13acaee747b903a8a4d498e6d79/chakra-ui-system-0.0.0-dev-20230330130626.tgz","_integrity":"sha512-fHJghijBqJZKv5IIwk8drxfc7GUD2fEHVtj9EY/TKb91YMcGL4iySp59Ypc9+NaOevdqDPIvzSBvq/ggFvBFVw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230330130626","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230330130626"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230330130626"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230330130626_1680181659262_0.4276025948455153","host":"s3://npm-registry-packages"}},"2.5.5":{"name":"@chakra-ui/system","version":"2.5.5","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.5","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b8b070d07ca9b0190363100396eea02cca754cec","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.5.tgz","fileCount":45,"integrity":"sha512-52BIp/Zyvefgxn5RTByfkTeG4J+y81LWEjWm8jCaRFsLVm8IFgqIrngtcq4I7gD5n/UKbneHlb4eLHo4uc5yDQ==","signatures":[{"sig":"MEUCIQC/aN8ctTggEhcJ7u/iquoQcjXV2ljuIaacSRMnFBMNJAIgarhQVl6EPMnAWkzElLsWPsQHbOMp82A0t9mEAYagFFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJdhNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAhA//cete3PwfX8Ka3JuV7IA5warSOvH3pptEZWZIOaQXUBi4juxo\r\n8oQ3X6bqdhbW3OftaAQvBk92zINQ1iUVCH0VrxvJyHF0t1yTvS1HApFSaadC\r\nCaKzX2Irfdx9dIGkVzCEbhsoJZX+SHz0MKqFBZTt1R5/+BPgrtiSDxcnovka\r\njHjuoaSbhDlaxfL/VmjQ+CvXPUGOi9pag3SyC2n/OwgQd6KkMUYmfnRYQOMJ\r\nGNXYQpQSRIUE0Q9345DIC+BzsnqPGMiTxDcYFK5u2oGFWhXKxSX+dKUkLbgf\r\nSx+LPDwY56it+lwozmPfApMwSD7e5fOvCKP0DPxNIfJgbnRqKBpqQGsQqSoj\r\n42tvX72RwEloXKH8b2K9c/eJlmZTefDjBbcST2MVzv6RA5tLT+Cv++u6vkBx\r\npShBNg0Q/QCwoh736srggGgj1N5H7QRjLXEOzB+aAUen70WZS4wWltwTlVNK\r\nozuyK+xR7zG1QjXvXFFkb2HeWfSxb14c1R9ffhZPRxpMTX1ZUwPk5BT5Pxrd\r\ny3C0B4wI0daGUdqiUnb05DfqKKStZcuG76fiOwQu/x2ny4kmuWTFhB7+csLA\r\n236wfodxgWaJiANf3LTToz3k1YEJS6ervnSs9ujNw9SCqDOvCx1r0i+shUPz\r\nnIJu+0vT/gQVEMvGkA4bVVLso30s5mh+BfA=\r\n=ivdU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.5.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/40736fc4fdc6f52c7774481143170878/chakra-ui-system-2.5.5.tgz","_integrity":"sha512-52BIp/Zyvefgxn5RTByfkTeG4J+y81LWEjWm8jCaRFsLVm8IFgqIrngtcq4I7gD5n/UKbneHlb4eLHo4uc5yDQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.15","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.8.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"3.0.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.5_1680201805575_0.2831008157395378","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230403072857":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230403072857","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230403072857","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3dc1508e34c66e48879d70099ff266f6b698f8e8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230403072857.tgz","fileCount":45,"integrity":"sha512-HXdeOP6Ci5WD7hT5nN3QssH3dbog11gV1aMmLePd0S/j4TjpXHGW3vVrQ3E2UKTlj1AB4Nk91OOFWoeU4mamxg==","signatures":[{"sig":"MEYCIQDPklnrNbnwjN3hiRY1KZm9GdTfg0BCxdU8sONDt6mtjgIhAPUul83gFL3XQB/zf9X/F2rNkfleTZJrnzafReF/lBns","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKoBfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/UBAAkDHs6ymNYrd+EuPQu5KfkTDPugvE4b4HeNukgN40FtQXaz3C\r\nroadXtdg45gLajLX5MaBM2z3meHAOj87WV2WJAl5dOwJrapnJflCq+cLaeF7\r\nt0pThf18LoAMSYn+beeAX1tVKygtTHT513bKjsDQ4TkRI8CB9psj8Ekafjqj\r\nmxGvn7w8BsZLxkpRHLXQahZfOhbW9Wpc0CkoyqadyC4hVhm2R9xxdOWm1npg\r\nG13N3HoceQHwn/1IDiietPhBQbVhB2cRr4JwQVCl1mFfx1B1bc1CZgKYQh6+\r\nJTQ9p6rHumsnYQq1Yu3eGI8xjvvEGO7BzFXjNx4PFpkk6jKpwLF+pOjx6//z\r\nKuCKCSbRQ9+GeIjDKC8qK61/2v+tdqjQ3Cg09MN4cW+QQbLuA96XsIN7grek\r\ngXe9f36HjA76Lx+4mftt3scrg0NIkgJ3C0ALYWU054bqDDDVDftvLbUXf+dt\r\nU7/OJ9+nIxeVr+kAQ2zVxqOak4+nIQpdgsqKVxWxKV9tBEeXHcbtYVQjvqLI\r\nRto9RP+B2/yudlhzIpJg/kjoaAfMyB8/rFqVOvaAVVw21EJ22TPMqOh9vqyP\r\nkU3oTvW977ZET7B5dHeOyms40hEZnD40WCG6T5HLGhKu6pk+9qBWtLymFKEL\r\nelB8Q0/fxY405IxMF/0u7XWmzOiWyTmwS+o=\r\n=n1HR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230403072857.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b32e8bb88b77e899e57b2f6241df7d8d/chakra-ui-system-0.0.0-dev-20230403072857.tgz","_integrity":"sha512-HXdeOP6Ci5WD7hT5nN3QssH3dbog11gV1aMmLePd0S/j4TjpXHGW3vVrQ3E2UKTlj1AB4Nk91OOFWoeU4mamxg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230403072857","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.8.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230403072857"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230403072857_1680506975027_0.09021023044959398","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230403120345":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230403120345","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230403120345","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"db726891644c4d939c136f88d8c5c91ce980186e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230403120345.tgz","fileCount":45,"integrity":"sha512-PxR0Er5oWOyQSfLHHbpsryf6eqIOg4akWSm1KpGxuTVyvGHratksajn5PkSkQQ/9dNXd9bwRmG/1Co4Mvm9DAg==","signatures":[{"sig":"MEUCIQDG2yRJGyouSDPPVKanYHJyG7kPc0cff2a3FMQxQDa7QQIgUpwDnkhAo25wsCUUycRHLlGfz8UG5umNzb9HlcndSHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKsDHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi5g//WMbus6LicvD2rON1Cub9KGdMTGcXoFESAtf7MNgH2taVrbWu\r\nY62tJyAduihLnQpPOqBmHNIcrnwWLDQGNqEgosAj2vJZPfIxMvcB8aloZK7M\r\nI33g65MlD0Lm8baPwAPGdENZYLrElp6tXx5xz4apBhY2qDVPT0389Cn32Ji/\r\ncBQuwYdMStC5AlPbeHirRKFCe9AuwdmGCzgYXAwYhzqS/XWzjQYKsWIJ7GBv\r\nhyk5WJsPMIeLnREx1OYuqKkPX3bcbnU2+37DsX6/0U4e2tkuveJk0WbYtSxQ\r\nvzFZRXveMUqXIm8JZVd+SNN4dubi+wutnDWFHlVpzf/nKtXm269p/KhdibYj\r\nw+mJBOGH3tUTKmi6w+BUhnTX6j7d5gl84oqnt6yTwhgSQzZRQ9VhImvYeimP\r\nDn8r++gcH5ILR7Vth9Fu2XfR+uN75xI9AYynXbfCcHCxyZTIAKGB7dRzxgjo\r\nFwqz/2fAPSRzoVcMls6DpLsZOFhompMg67dY6ctPzmc+BMQuncQFwrbS5h0c\r\ndsx19IWD/QOT4UPUO4FHSbyVJIF1goiAMY+AhsdzTOA6kzHN1ulUQeKyKzRR\r\n/fEMlTpWIMWS9LpCH4yQ3NuynndlT3kUwXKFnyCPRn0aXHKKSotlUrSCOyQi\r\nkZduheoEH6FceWWzNFZo2zBbQvNRpUCnVcE=\r\n=oCEX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230403120345.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f34cc118012dc9e1f9fc2cf0501d4153/chakra-ui-system-0.0.0-dev-20230403120345.tgz","_integrity":"sha512-PxR0Er5oWOyQSfLHHbpsryf6eqIOg4akWSm1KpGxuTVyvGHratksajn5PkSkQQ/9dNXd9bwRmG/1Co4Mvm9DAg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.3","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.19.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230403120345","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.8.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230403120345"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230403120345_1680523463047_0.4319164359496237","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230417144407":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230417144407","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230417144407","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8bc259f4f563e8404f81cb997730dab824956897","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230417144407.tgz","fileCount":45,"integrity":"sha512-/vBu7P1BO0MGkyh/JmgskBmaUSTsiOM/XrKo+skNM8duNAuE7e6sBmlV4ijtM8HJJGBYxYnSoiBPWR9QVaFpjQ==","signatures":[{"sig":"MEQCIGK+Ow03lDx/EGKKm9pQm1FOrOi1AeY5KeAmHFxUgH/XAiA2Rf/2c6k2/Mhn/2N5F/H8b8UpnL36MxYFRz4dDP4enA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPVtlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOkA//UreDVJCkx07jrpJ03hrO8+mXtLn+g2CSbYoMoL7x/SJnm9+e\r\nkwgO7uIgr3Uelc4+NwxWK0mCRmbyQxPK/cQeyvQxAn+Zfuf3alAC12Oay2Sq\r\nyXxeLwzteRrKZNh5pFvknq8Ws7YP2Y/8Jr2kVCl6NziJgDFdd8vq5VlbDOdj\r\nFB/NKnNa8kAHLwT10Fzc+frKMZi3cmRWPsvaEnejuC0nr2SgWP7/jvBjiDAE\r\nzz4lRcJ3ceCgyItFnyTFoJs7AQdz0P71LcX6TJA5rOiVkRXHCJkWOYPLz/jJ\r\nv77QrSN/R5htALvQPppSp7rD21uZfNSzyBJGI1fN1YilI8EORnSJSLKKEd8y\r\nXv2ovc7NutaQtqL4uMQnIMEN2TGy9tKX1DoiwCQSNXMm7OIy832Tl3MlRdMt\r\nXBBUes77LOoGKER24OhAyXKjLSeDeUtCbAESKpTRXUzlXrumEO5dw1OZzsbO\r\nDkzpNxB//L72kdfight9BSdfYYoi2s0se6KD829E5Lfjbkhrrjvk5H6vpYm3\r\nFKD56SzvQTm1BiG6/j6sfFwuRzUgvbdcUGixQIwj/7IYxbKB5XOUcQGu/IAc\r\ntbnMJMm1i80LgUOSfjj+6LrtnFgPvv33bVRoh5Kd5AfbZ1gl0mo51OgeLpET\r\nyBN6zm56KXPxxvGQ2rcgJA24XOLySxOcl3k=\r\n=Fa+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230417144407.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/37b529311944b0275ee3bae4f16d335a/chakra-ui-system-0.0.0-dev-20230417144407.tgz","_integrity":"sha512-/vBu7P1BO0MGkyh/JmgskBmaUSTsiOM/XrKo+skNM8duNAuE7e6sBmlV4ijtM8HJJGBYxYnSoiBPWR9QVaFpjQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.4","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.20.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230417144407","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.8.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230417144407"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230417144407_1681742693281_0.8017473541685081","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230417150059":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230417150059","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230417150059","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3d86612af1d737ae3ebf0f8d74758ee3bb56e50d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230417150059.tgz","fileCount":45,"integrity":"sha512-SDK/GdDcH2eKhoG+vJu+hpNZF8XVJGvi2/Qw2nA71+xr2EataiaV/1/9W8ilOXq6b5Z/lMCgXKotur4S1ERA7A==","signatures":[{"sig":"MEQCIFyn9+fanx/mWnCJ2jGVB9G5SIct0dUMPhtW5rdpPtT6AiBjZPaYCEhh1bbicEusjhFysmzCWGdO51hxr5gFJhV1dA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPV9YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqc/A/+J2/M5XOsPSijKE3wHkGxNdVyTy8OJNt4wC2VqtRERfE1bkKI\r\npPQO8GrPdX4g9SmmukVpIKwn3giHBFUsoitsVzMTpxkAxQlsYYPoAr5NHvxS\r\n4Hhtb2zvR7aWxBcQfBy3kKiLB9CuJEWWg4Zb8nvCBbCEnbKS0sVI7ADryTG1\r\nw6xNmyTKZjjALNg+vVQo1svlk4GqwNRxaBiSq2gi8ZYr+/PO/8Nq6Bq91gIE\r\nwQuLt4RCGlbzVwiwUQW9YBjBeKty6Bo/iLvt2NghYG91DMsEwOd1siMJu49f\r\nhbbpSs2Y5JqyLK2FRB/q80LCJHyUGs2OalMiw//fna45eZKFGf3kYXvL16Hg\r\nSV4JgebBzDtNwbiirgBvKjDB48F4r/tQwjjMXS+inKjy+QUgXfoNuQ0kXVOn\r\n+NMtH9mkNATqz6ieId7mKKg4KSMY9T6So33HhW0z1If3+Q1gPkI+E6gCFP3w\r\nGiUAECvFlLZT7LiZecLGHUuc9it/DP4zlm2ZLExu9i5AUw2OyKbRtLIA7ZK+\r\nauJOe0RIMWfOxvKoMAunfqqWEJK058BWUhrCUyeJ4SLhg22mb0kOaD8SzRfU\r\niziaO0WJNuOWbpQ6kiXhHp0N2Kr6P7i94CCtaJwJyAM0tbwEqu+Xz0PHb86S\r\nFDCqMFEH9qh3Hlk51GuyEX6dyuEQwbyzqLo=\r\n=iNOJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230417150059.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9a7ae799ef3e7c1031c4e1eca1635374/chakra-ui-system-0.0.0-dev-20230417150059.tgz","_integrity":"sha512-SDK/GdDcH2eKhoG+vJu+hpNZF8XVJGvi2/Qw2nA71+xr2EataiaV/1/9W8ilOXq6b5Z/lMCgXKotur4S1ERA7A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"8.19.4","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"16.20.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230417150059","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.8.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230417150059"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230417150059_1681743704045_0.8130156031286178","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230421204125":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230421204125","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230421204125","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ca6a13e4d2447938c3a54b01153072a3526bc887","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230421204125.tgz","fileCount":45,"integrity":"sha512-4vLcyhzr6cjS+kK8g2QnssKcDh8yyio0mnB/rPgpqR1yVZ6Msa2lJ5PiLl8eW6ws/S8JQQGV4dEnOVAXP2dr6A==","signatures":[{"sig":"MEYCIQDREnWHoFyk8OIJHr7UDXGiubywUaTVOGXtS97JBwbH6AIhAKcrk3Th2khPN9T7DJIHzyp5CXc0hziu5EoUTRp6z7wE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQvUmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFBQ//THb471+AwVA/18BSe1QUfWSOUct+kA5wDR98YDGsviplGOdD\r\ntebYf7iwbzSpQmJvAAobU0sdHGbS1n+yV9Ghp2SY1q2qGWSmk9uH8l0mTw7P\r\nwcxa+UQI0r6wYhjPhCjLusnxh5fyf6Z1e7J7iH+S808tYmVPaV90dsVPWpw6\r\nP62YeoAMShmV68/OrVl3tMu9QgEoKqBcPxfiaKZheLPVwe6mrUAa5G3KXIKz\r\niqbJ+z/TXn5wknyjLwwGdyS8JhmSyX9tMyTmUxvrQV9TGXcu8DrZUH3/oFip\r\nP9ZfwFYwL/dQZd2qwJRGQvjGtx/D/TL6lp0MHPLgw5ZN8U7SUS08qpSbCmo0\r\nIY0vytA9R7Nlv2wEeHH0diqpOTbzctGGT5asp68LqFlVf5dPBh/gqK1dobz5\r\nEhtjqUieAkLJTrz1CvSKdopg+8W7mUhk0/3/CUXzZ028I/VwJCI1HkTxnftZ\r\nL6hhU4BklFaiJC38jRpG58llJqqEDHJcpkCZEKpHdttsXidhQBDd9/aNc5Wz\r\nMIYWfqNadcwB0iWNxVAObuzV7ycBsf4LcEjmMe0tFKlXhpX8IsMmi+5VcMPC\r\nWe4ldss9yCtb+6UH4aVOREGLFQdDXHO/gGXJ9RuPxWoyOLwQGP6cXidXgkOh\r\n5eT3d2H5pF1OgJYQR4QxC4Q7xdeAkn7rZZw=\r\n=o0RZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230421204125.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/50f01a95f42a711c7cefb56e67a217ad/chakra-ui-system-0.0.0-dev-20230421204125.tgz","_integrity":"sha512-4vLcyhzr6cjS+kK8g2QnssKcDh8yyio0mnB/rPgpqR1yVZ6Msa2lJ5PiLl8eW6ws/S8JQQGV4dEnOVAXP2dr6A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230421204125","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.8.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230421204125"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230421204125_1682109734714_0.9961910852948574","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230422142907":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230422142907","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230422142907","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8d3849f064e64997f4faac688a108034ac4185d4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230422142907.tgz","fileCount":45,"integrity":"sha512-h5cxgalLxzBESv5oZqmh2HrgjG7Fw6gxUY4P1/vfDnyfxwSN/da1fvqZzc+QtMRp8igLmvkX6rBH3jDFT/++Rw==","signatures":[{"sig":"MEYCIQDBXPSHG3fBlhWR2Im3I2TH9bWV3gRjGWie7nEd8sYAbAIhAMltZd2u+av6M9W7XArhRlY/GzcxX8Bu34tIGJzLAIqh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQ+9xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwIQ//VDx3NqrPFGCi2npna6/bAi6B+BFfrpACTNWcXDnqbOKQ6W7Y\r\nRyNVgl2QnhM8ikdVlk8e/WJtQvU7M7vKnwSZwEJ2YoSUmsluIxjTUV4XopYx\r\nKWCjR/YLSGYXHa+JGlJ2q4zEaDrcdTlPftXCkYdLbSzwReGDipQu1Z+asYqN\r\nRRmPoJgpg4TkYpjCOF0h2eE7VNu4bADgHUIfyYqOdAiFt2Bx8KWLaGWYDTK8\r\nZtbxGih0NgmLpVQC3sEzth+ovvfUHqL1/fLh9RqQUIMUDGvuGiyo7tQb3XyY\r\nwiLrJIk2c9HgY5vFmTQglxSp+q8jFAOrZEsloM8rYLu/TXTKAXmir2oMnpCy\r\nE0T/JuvyXMGrkVvGoHrDJdjMwQM1a5gTpZRfZWKWQKC/xj3W8XTCgQobNLan\r\n1BjHgU+SdWbNpo3sWiGaiqRbIdTele5VkmXyAuO1Qhg9Xdo4Wc5D6mZLjLQf\r\nHqLh0vR/7DjmxvRDpgI88ZbwnmAkg+VV2uP8KgiCq4pgl7tIv2u8Hed4nwtv\r\n9xAE2AVkrv5sU9bk5RgXfOHSH1oGEBkq+QiBZFZ2KGP5SM9U1v35bMvQ3Rsq\r\n/Bef0PZXUfEcn31WNxUEGe5FYyro3w+5+R3o8Rr4xCN1odMig6duVCvS9sM7\r\nfpOse7zq/uOtsS11UoX13av3xH0tuN+Q5cI=\r\n=Y69+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230422142907.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5c2a6320dd44b1e3fa51ccbe6e3cf5fd/chakra-ui-system-0.0.0-dev-20230422142907.tgz","_integrity":"sha512-h5cxgalLxzBESv5oZqmh2HrgjG7Fw6gxUY4P1/vfDnyfxwSN/da1fvqZzc+QtMRp8igLmvkX6rBH3jDFT/++Rw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230422142907","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"2.8.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230422142907"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230422142907_1682173808969_0.5359030442323249","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230423230056":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230423230056","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230423230056","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"c846028f1b8686e23f7a32ec7ef95cad639d5d43","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230423230056.tgz","fileCount":45,"integrity":"sha512-vXp+1WKYNTACPMkRNPND4Rwns2/hSD4zXJvswDD3OGCWwewa+rek4rtB0Ug2S2ri6Hjl+8Zct+XnYuJVkFlryA==","signatures":[{"sig":"MEUCIQCd9lg6SO0OvV9a0rVarHGnKaQMTLOI/ciz7iHU/lHWeAIgErLPiCvXU+uIRKPbazmvcG1Z/28ShpXgXQo0OyfJUHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRbjcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrd1Q/+OzbEiVDyPgZUppIqe8N0dDzIHVKjxdBNq6q1aLfQdQNm9/Az\r\npaWCmyTYM34jm0rGpgOlGfW6I/Sri1zc4d06gtg+OOOEpSHKB/vzuvKRHEEJ\r\n9XOCwzctkgKYWLJX/MJG0Lgu7iEK2hBmQLrDSUf6WFAy/422DXBAKAMPg5u2\r\nr949KvJH3GZETvzdj+at4o9FguE3uk4SN6xMuZyK/HeE8GoqYF3A7v3mmJV7\r\ndxT95oeKKaGPI4S8ONAGrRWuw4lvag7oAvd8j7Qa8TA/i2cLZqhcimKMaNQE\r\n3ibccykBm+hOH8Vnaa6rPlUUpFC0WGzkTXnMM5Vkx0uG3SEsUvq7MstpVMds\r\n6W3HDG8SrVDhUqKgLyDIV4cvaltuCwoc63poWPVjGg4WuW+KSsaMqE/+dnKc\r\nXq/Ebf1dWEkAYEvejZ282A2hbIX5O/QnogKidYTx1xqJu/8SWdstGtQoi66/\r\nvooKidvOFDDuirHVfTxy4JJVD5TvSADb2C+hmBjgrrjmZZUdtR+ZgtEmooNq\r\nl9rI9xTRjTgBlS5pusJUWCzK9TNDufDbvLMA4EUlsxLcyCe5qay5TEop8ljm\r\nFgh28WzfBTmaXpwuwvo5dYgnDjYnFoX42GlZ/uy6r4L/SjSMKouYaqMzgxwU\r\n7NaLO+z7NssWpFPV3WFjzKAvzVRgo8fhrzY=\r\n=lXPg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230423230056.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/122655b7156a8edd0a38b7c0aaeea157/chakra-ui-system-0.0.0-dev-20230423230056.tgz","_integrity":"sha512-vXp+1WKYNTACPMkRNPND4Rwns2/hSD4zXJvswDD3OGCWwewa+rek4rtB0Ug2S2ri6Hjl+8Zct+XnYuJVkFlryA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230423230056","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230423230056"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230423230056"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230423230056_1682290908746_0.23647318900143643","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424190033":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424190033","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424190033","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"28e69ab812cf99ff4394214cfede5c4801270a09","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424190033.tgz","fileCount":45,"integrity":"sha512-cD2HyQrSTJYmJ3vV8J1Vblwqs6c4Uq7PBGUBzWUrICqWzL51tOPWbkI6uqQqVz0SF2VRZLle4TDvz37FMTeMoQ==","signatures":[{"sig":"MEUCIQCX8x6FvMjRp3Vl7P6QThnBo/3ExowQ2Geq9nC8j+NkdQIgHd1h2OIMbTCxsYEx0hqaj4cyKhA3BMmh8LkZXSJv3q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRtIMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodIRAAiDw+LmvuJ0rZNEtM+KhQjE2AWxdzmImqltOv2u3WjxC0melc\r\njaq47S6MWJwkHzbwFjt2VRBXTaDbaHP4/72Bac1DGp3x1z5lL9jLC/TibQK4\r\ndbiECa2J8XvHT1dttRT8tmgs13inzISykWzHA4NHkcnZFnX3RfNWA+f6h/xp\r\nUFgCmXWUzC5We5yF4OORcJwGBjf03Po9p2vNRKVwev4+id5xlsekYtdm3C6G\r\nhsb8wezEYyj+tbZ4hNT75zKBkJmhezIzEvw5xyz0J6mdKLCBnOXcFRMaRsXW\r\nduxsHAJyM66Wxd0hIHDLWxJVV4XdMekdl6+BfMJ6EyqQqlRtcclfoCgO4ZZT\r\nildFUiHXFRRM8x0PbBn6BtpHW2D54D261ONQ6rZEtFtms9tTshgC/nk4w8yz\r\nOIqtByHG+Au7YS2N1l2Xov8TCm4EnxZ7YXAKZgDM3gnf4wXvkV/oMwoj6XlF\r\nV0iaqjTTKWsyTGVqDsvnNzNOPIv1VpKSiOmCT+aHh47PeVz8DfH2d1Pjov+P\r\nN+v4nYUX3EKpwvi7KuXMbLbLi7r5AMsxvhoYLzeWVc4SYO7AZ934VEhkMZmm\r\ne0iR9Hntm/LUp9X8n1wtDd58VgnlBo9G4glvxZ2j0p7nvOtKTpQL56rmkNA+\r\nDCqk6D3kbHOlw35gVgssBc8oQBUNnutxANc=\r\n=kVP0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424190033.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e827bdf811bc7f2377f7b26d256a4c1d/chakra-ui-system-0.0.0-dev-20230424190033.tgz","_integrity":"sha512-cD2HyQrSTJYmJ3vV8J1Vblwqs6c4Uq7PBGUBzWUrICqWzL51tOPWbkI6uqQqVz0SF2VRZLle4TDvz37FMTeMoQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424190033","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230424190033"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424190033"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424190033_1682362892320_0.632096732284287","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424191827":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424191827","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424191827","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5023842951eae90ca48cf7abced6c40f4d8d4bdb","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424191827.tgz","fileCount":45,"integrity":"sha512-/HqMzbmY1h+NOjevrNj3+OopX7juHyZMN8h9CWsab3Dc3JbZhDRl/+ndlUrsRT1oZH9eZQxFt4g4im1+aKY2Ig==","signatures":[{"sig":"MEQCIFQlGjmgwF8voi/KiSuWxN+upSBs1pl0XdA09qhQHoVfAiBwwKO9K/IdAgYJaLEljPyPnjAIVMtKeE1Nv2ehIhml7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRtZTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpudg/6Aw92lLI6UrF39y2Zzwm8+FCHPKR8Z5yClB6ewoNAiBPGWiYP\r\n6KK6E3qCM5piZr2qL0PjAGQlpvyN4iZc9X2PmTazTTcY49eZp9aGpAuJzMtt\r\n0VekbwIjbilNOTAC3vqNp0V4X9zA/BZ52WduTakep2Y9+9qpIgyRflHBxcKC\r\nJ+UeeVp1DlnA99Y+Feaq7HNjM5f9SEeCZaKietU1GWKZzEQpX1MNm/Ars9/f\r\nFB2Vhn+Jn3kz+Q0Wpv5iZpY2ynv1Z3DMMJgrEvHkUPb5s2hxIfOxwL4uewby\r\nh14Ix6MsS4OCqtKYRJH1JsscqmDdaCP9i75RLZW9HtPr1yPnXV2rb/mMsW9B\r\nrK6S1m1AcgAf9FIcsccAkf92wpnD9oWq0GgSzpCG7vfI2/XDyCC8fdmHHFXX\r\nQbXFDvkBepvrE6PNLj5fvb0WTDzyMjM1/lklbUgrZkGuRRkbQEsAjJ9romwh\r\nMBvJegNuYT0fxmgMMHZR/9g9aq/4dLOduf1KiC4wYfcMrtsPj7JGFu5qVVyY\r\ntHDpOVHgyDKmc9D1rFATKj2cVXKZJET2n4GqUL5boZkkAUUVnBEqRBRM4ZM3\r\n/XiK/aurTMw4Wic3H3wAfrnX+WSXlOL1DjiIveiwT3RjCdgaaIpc2EbnFtKI\r\nKz0bzZ0icNyCEUJWoKbWRKEFwnoSl+/BGFA=\r\n=spbI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424191827.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a6cbc7319f406fa24c707ce886e804ad/chakra-ui-system-0.0.0-dev-20230424191827.tgz","_integrity":"sha512-/HqMzbmY1h+NOjevrNj3+OopX7juHyZMN8h9CWsab3Dc3JbZhDRl/+ndlUrsRT1oZH9eZQxFt4g4im1+aKY2Ig==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424191827","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230424191827"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424191827"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424191827_1682363987487_0.24968048526421316","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424194913":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424194913","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424194913","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7edf76a81eb50e8ea99ea7b9755d8fa4a915d012","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424194913.tgz","fileCount":45,"integrity":"sha512-OwQaTQXFbZMUynu0Kyu9U1V7U2xHseUjQI1o7wOa2gpOw31sRlCC8yswJoy94bIuXiCCkmtnd36UccKGv+pZow==","signatures":[{"sig":"MEQCIDSJJ0+iTA5caNzP/CR/EFrH4MQmitLthjUrL4B5sdDhAiAVqU0VLgCrFOxGj/RwR9JYApHQQjlHEObWhpQH38RH8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRt1+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEpRAAlpgMd/G/AV6McfMKi4auFQMKT3MkKMwqFm13MDWuDOVgAdYf\r\nwNvI2Jlizv+uemx9luZ4+qRmkalQdTk7a2X2WI6n7SRhddXstui3ux+91X9v\r\nEaJT5ix/Iu1VicBNrYLhOgJikeXGxnZOBHJMQzLjNbqoE/YiIuP1g+vu7zfJ\r\nqhc8mI2+NnQHSj2B4qU0x0qW+wdskhUq7bwhYY0NqHKOx2XkLdWlIYXANQpb\r\nEuKXnFtJDh5fEcgoWL1v9pRdk6OgK7XIrM/KP7NU2KhRNUcpx3kfqTh+4M0P\r\nNWINazrDPSg3BFowx7i9kbTg6KcpommFpujM7qUzpZgscLVu8vRNqMfcG+1V\r\nPlXSw3z/0wVqlzitCTRWsfm42KKmlcuUM6mKF36PHCVoPbxJ8gHhVyRrPg3d\r\nbQv5Gt9Osq1rTkj1CP9V75/QblxykIseAYc24ZyC37gWzEap979zinLrek5f\r\nBh1MYNvsazqZyx+NXg0a2tA1daI5CW4mtUt/gWkFU+ZxfmqA42hhvqMpHWEH\r\nEW77ZTg3esiisrEikwJ3MoUrkXOwzW25F+x3j+4zLjvJMzqIddvHKtY4wvqW\r\nzbFQ7wBsuxcOXa9/ArkfLevwnsfgks9VMDUNCmqwpRA1FzvCi9Jr0wwQ+2ZR\r\nzdZ2QHgvj1xT6CUCaEL95HPI0O20M37vOW4=\r\n=YTpv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424194913.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/36c63094dfcfcdc71fb8f369e33d7e85/chakra-ui-system-0.0.0-dev-20230424194913.tgz","_integrity":"sha512-OwQaTQXFbZMUynu0Kyu9U1V7U2xHseUjQI1o7wOa2gpOw31sRlCC8yswJoy94bIuXiCCkmtnd36UccKGv+pZow==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424194913","@chakra-ui/object-utils":"2.0.8","@chakra-ui/styled-system":"0.0.0-dev-20230424194913"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424194913"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424194913_1682365821875_0.27342500084806254","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424201223":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424201223","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424201223","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"47dac6e9c6eec11f7be2e118ab6547de80631275","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424201223.tgz","fileCount":45,"integrity":"sha512-PBUchZR052LvDDXrCv8tsSfsiFUnRmMljMPVpSE6ivtsxNlBp/93BwO+VH30QBdl69tgjjwty4cM0HtERgX4hA==","signatures":[{"sig":"MEUCIAGo9Gr4PSqlO4ZbaB7O4OACRfooGDm5mtP1fRYkyyU6AiEA8OEY/rs13FjuG51kNidTtubKiM4vTnoUPHX9Z3w7t1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuLpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFAQ//fhoZ+qDQ1sLuNV/JcAN062sK8DUWlYUYzMbGEZRwkl+Zu+tS\r\n4iwoyFZqI0RkHI7/bKzINvfId990aFIqbAfLe2Qnji/dH9IW4X6+ffiJwU2g\r\nPUbyFtI6Ppw87RTKtifv+ayXIf2LXQB+vGSPKReh7eAQsXwDPk0s5Q8eRxvC\r\nJ/Uj7BQPTCup8R/fwRF62kDHNXydm/TFTk8Shmx0kqxUmkG3aNQYl7SjEk03\r\n8Ne3NgHGSNGUihUrD2Qsge7WM8JMPkfyzZeq+UwLZATeS6nECabJMEepJTsr\r\n749y9V9PztcWXQQdRo0ICOPld7O/HZdak+tSl6PumWqSE+vxuz9g0I41vfQ3\r\nVTLanzvs0mYYg+9EvrnombcJpCQIrabzq/gLq29pYWZ9qD8xAI4kjT56TStZ\r\nTzeQvhc5PioifLzRjn5ljN9EArwud+bwZ7E5zG1Ri2rct8zhYzEJz1a6Jh99\r\nDpBf3KeY54jbEzhxU5FQGl4pG00eJUFs5dXHpDk56GphcK/wazTOkFKVId3A\r\nhFaooPf+XZ58bCoOydu5WOebtu4BWI3FbQ/Mq9i6FMtivVAVb+ZCGSJm7Wk8\r\nuRH1vFBYlepsC8d7+aUQe/rbzFOTpUQKpj7zuaNMTdlzHSEzSc57MYLM/9DR\r\nhTb5vvjjZe+W4SfMdT8uXZ33Q22DZjOBzVI=\r\n=uqHC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424201223.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0208fe4834ff1d2555b18e3ad44b1ccb/chakra-ui-system-0.0.0-dev-20230424201223.tgz","_integrity":"sha512-PBUchZR052LvDDXrCv8tsSfsiFUnRmMljMPVpSE6ivtsxNlBp/93BwO+VH30QBdl69tgjjwty4cM0HtERgX4hA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424201223","@chakra-ui/object-utils":"0.0.0-dev-20230424201223","@chakra-ui/styled-system":"0.0.0-dev-20230424201223"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424201223"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424201223_1682367209444_0.8699350204357867","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424202839":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424202839","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424202839","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"94bff5fc1972702d468186ed372125b48bb7a5d6","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424202839.tgz","fileCount":45,"integrity":"sha512-PHaS366jJvrjVqKYiet95+igyi0W5hc7bp9NKPJULSis8ictC1cTGnprv2MhV88Vc3tJsU6BshFl6Nz+R0oYXQ==","signatures":[{"sig":"MEUCIQDTa0zKtIKk46Jpk7xmBxO91rzIkJzrBcKPNfg/T7f+kAIgKI9MW2hysg3lDg6flQbGNsTL1exQfd5O7SuwxS6on0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRua0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqo2Q/+LPcKJ67PB6vQOcIQg0QRCg4sVPU099bdk3yLRdlFBHtZ93Qu\r\nCoWSQ6DqKkPgzDVM3/58NUQhLCIDLyiJ7Zc34rkTwfsnrZ2++FpFXoRbl8+I\r\nmNRKfRM7s9r3Xb8vOnwb2Ej7wUWEATVxvPjtwI0onOnZlHVGvLDuh9J0VTTz\r\nmNbdCrGVdm9vvdb7+c+rrsIDAeOrvpl+KCQj39JEa0Hxn4o0lsqtv18l39Ux\r\n1vDe7DNbCy2vmA2xEip/EIl+Bj251UC+Vi5XSvV2GBCagQeB5O6zUuMEDv9d\r\n3Z3Dgrx+gjpQwlKioM4nfPs6YtTPcix4VjzkFl8JDC/TafFhxmcfchMW3yDP\r\nnD8ftWSq/Vb7KDxCopLLgs3aEfwhwhG5v75w7NTh6beX/HA5HsdPwJezEZXm\r\npMdLF0hlwYxzAjHyAHEGBTvx6OYkF9TI82ry5m6URkRQWZPmEMAGCvhtxjtL\r\n7nAaliIweSYSfXTFq5LN0y2n077q5yxYKDLoPg1ejB+7iAtbvQjyVYrs93HS\r\nv05cslWq/QwMHVaznjN2iK2AI5PP9hATomjaeOQTXLqTxh+B0hut1sr3yxB3\r\noUWt3Bg0mkJOM25mMHGhmLDEApdkeybvkA/B0KsnptfNOuBkst3tEKrsrEzk\r\nSLhetfqy4QN4wQXnntUxvlzAJnqpxNkJ+aM=\r\n=q/k8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424202839.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/74233066ab0e63ea0e45538088bdf92a/chakra-ui-system-0.0.0-dev-20230424202839.tgz","_integrity":"sha512-PHaS366jJvrjVqKYiet95+igyi0W5hc7bp9NKPJULSis8ictC1cTGnprv2MhV88Vc3tJsU6BshFl6Nz+R0oYXQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424202839","@chakra-ui/object-utils":"0.0.0-dev-20230424202839","@chakra-ui/styled-system":"0.0.0-dev-20230424202839"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424202839"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424202839_1682368180437_0.7464071533703687","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424205150":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424205150","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424205150","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1855d6b502d9e64bbffd75f68139e757ea4f5e6e","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424205150.tgz","fileCount":45,"integrity":"sha512-TKkzSke9eQIz/7mkdTK+M9o/sRHVghr8x0tBrNEDsHoDhHBUd70CW0DKSGtBHmVwhFSP9Q2x6FGtW3S4Dn0GYA==","signatures":[{"sig":"MEQCICMDZ3nLOhkLycWQ4VAL0lDRdD7/fke7T71ENTHBJS7gAiAiGC6wjue+5fc8X3M4z5qcCnSd//YJAwccW2NFumWv6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuwuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq8w/9HrAzz44Waq7SCIAqhY3KMww8b3CDs5lZj8aje5OwPkuInbPi\r\nk2knVIdbq65ylwtDgd05Ldc/8+oYfiT3XD9QRnwGn0ZTLWIVvDCmY2S+WJdY\r\nuM0/1Si3aLZj4YblHoczwoCRFV4rPq39YrVlRzHtpb5LzLKA5CUy5WDDww1B\r\n1meG00aod2MMLTkR3TwJEnFXh8S0ohHWk8wP70w7UqmFNY/MT3PnvZPPQma5\r\n/52IFqMdHpMuyJTCAamcXzH91IXdoJZwSMyTjZxBWv2uAFqlHUM4oVfR7oPK\r\nJyTo9BlMeXohnGxsGe4VyrT4KO+Rg52SnKsoB1sxA914g6TNplrR75G+VmC3\r\n+RvKyWYNkMJzFleHNObo/4KWydEl/VNEukJfEY+oVu3WK+pld6pkpc7rmdiV\r\n5qhCvX+OdemWynvzfq4HV2Gg1dlqw6qNMidfX07YVtXhKW02YmCZD/qYG0UO\r\nOnnv9u1tqg6pq2Ws3iaQNHlP2ufmVk10tM220Dq1hBwzWyk0A8NxOktljsQd\r\nI4m9nvx3ceuACmHtnx6G0632FezWhO/koei1UUsZKgWdT9bne+lenn6e/b9l\r\njcjb6RzW7LhzrWVcbQmEmXcq3jyUUkWUevL2UH/dNLJCZu/zhbh4vxdx1vxS\r\nqBpp5TRN+lFC7ocHLn1PpvNtz12gCg/wiO8=\r\n=KhN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424205150.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7088d86abbc6fb0924f2ea5414c26f56/chakra-ui-system-0.0.0-dev-20230424205150.tgz","_integrity":"sha512-TKkzSke9eQIz/7mkdTK+M9o/sRHVghr8x0tBrNEDsHoDhHBUd70CW0DKSGtBHmVwhFSP9Q2x6FGtW3S4Dn0GYA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424205150","@chakra-ui/object-utils":"0.0.0-dev-20230424205150","@chakra-ui/styled-system":"0.0.0-dev-20230424205150"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424205150"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424205150_1682369582423_0.48079622978162884","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424210540":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424210540","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424210540","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7e97f8c685ed0540b8cfa23fd219565d7d5c6051","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424210540.tgz","fileCount":45,"integrity":"sha512-d8t4j8dJnJSRXJSD1np/Gk74As7N38SyCkVZ60JE7tj2dbrHbzffr5ABzlOg1101FAU0fzaek16H+0jdKGMbDw==","signatures":[{"sig":"MEUCIQDw028fbxOPvCeutcl+8WsOJWS2RgGZeWF+7ywuLLIv4AIgOnyV4XFAjABs6rOnnLo0bCIbGKN9cTW5a6Zqg4hZJW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRu9jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodKA//cqFJ79SOrWuJ34uuJ8q+6i1Ay5AIhiPOGaTL1FKS7rTMqteD\r\n4aSPcLlI/z+wpgChhH8C1SfkvwGwdsstY0Tj4iLRAPGFUR7YRcCk1XbM42R2\r\n04LWermRt6RxI8x9yupiT63NYgCO5T1L6eXl+yLP+RLpNa7RsMCenpCBuuyH\r\nQj1Qk8m0Bn82vohFIfGj3mvkx/bobQ6it4tMYjNvrNbLqwXHiISjeTCvjJru\r\nnvzZ7niK9cWCOSMw54PIZkhbCPHsotvNj/vNQ4uMuuaJlVsrEjVP9Pt4B0Kq\r\ncbMUDVQfgBDKvvB3oqGnIkDuKeH+j7ZV7RnoA9aJcoNfqN8kms3NtwPfHVxe\r\nGmW+BBKvwuItm5MUr05YXUzhqzJpFYHeMcw9L9Nw3mfaIz1ZrazkC9q2flHL\r\nPuX1YcOrSTTPH9yFoSy4nWsxH3MiUqNraCOJ6O7L11L7VbvyIQoCFXoe8t/C\r\ns7eS9vu07nEikSAhA6PKNjWzYVTPYPEthseic18bGDprSKHVoCIgyHZR4DqI\r\n3qv3nMuJ5NoNr7D8cB7iReKhvZrO5kW/O072kFG2wJOwneWZHxhXwoqIft58\r\nzG7g1HuXShB0uZfUUN+noSDGxJCo3R42jJ4R1C6kF9MYjabL6rAhpbOOVQhQ\r\n89zmeSz9TWnB3NoRN2xmKEYdcVs88HsFJBo=\r\n=Ax+d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424210540.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/4e6271695edc5843cab32589b0694cfb/chakra-ui-system-0.0.0-dev-20230424210540.tgz","_integrity":"sha512-d8t4j8dJnJSRXJSD1np/Gk74As7N38SyCkVZ60JE7tj2dbrHbzffr5ABzlOg1101FAU0fzaek16H+0jdKGMbDw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424210540","@chakra-ui/object-utils":"0.0.0-dev-20230424210540","@chakra-ui/styled-system":"0.0.0-dev-20230424210540"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424210540"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424210540_1682370402855_0.6337748953070801","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424221053":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424221053","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424221053","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f564468eb8a90f56a0c378f51f474c4b8bbc0452","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424221053.tgz","fileCount":45,"integrity":"sha512-ZGcTvWD0v+R5bbVh9Acjh9SPCpulWRdhLXaB0HrOajRGEHiZlh6oGi4oDxeVauVHP7+rIG1QoFsw+xpQKstlQw==","signatures":[{"sig":"MEUCIQCHmm6/E83303rKXi0qaMNG2jzNWQrCP1beHar1k4m5mQIgB5RPi8GhwQpKokYfrCnf5D6YJ2Va4fqsMBj7bUP3lUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRv7CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMrxAApC9/fAMP9SehGYf6tvZpsiq973lvEdCkE4mfZWuyB+1W5wVr\r\n+GhhlRmgi/dKxIwHqXc84mDDmN11iofarC0HGZmrsPnEVL8L9T3bO2cD4Taw\r\n0JNBsHnl37sofmVi1FSNhe+ZFF/XyTkXjDYd9f0u+ew8a4znmcpO+u2QAEdq\r\nsFyFkCghvqAnxPw5bAr+LCVP+eHO4Z+i9lbC1fqxHDJO23RkQD6UMC3RzWoE\r\nFx8Q6lCPcOZH0h8BA7q6GvSPAcqIlIwSIwfD6IeooPwaPcxXdvb01pZ9kVi+\r\noGdu3vyWaOWY5+CsIxKxFfBO0MBQLBfCy3kgttEd+IRLSXL6r5ZNm0ENDAcp\r\n7d7stvfpsBQt2ERh5PmC8NGBWyoiYTfai3K1XBH8PmlUYFBK4E+4rUWIwD98\r\nsBrePwrdxd1SNM+dMJ+EnxPjuIEGfvMy2e4qQRBV6oen3bKqAwcHuT9bfi4W\r\nALJNxijgY6g35bmm392/73nt7FulDYdgr4NDYZBKR+YR+QYxwRyQ1pjDgF4+\r\nq9RUP33IdgNsHKmiQfv32FhzW64Rp5q2WOkSbaK4r5JmgOc7fEhfms7aKq0l\r\nRo0yuPtnDgPQqATO9aznK4YNqGXdQlJo6uO8KiDMH7MbNLGTq0reOun8Zihw\r\nDx3Zb5sr11noRN3QWxSl27JNy8OQzkC7Rsc=\r\n=OL1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424221053.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/51b9be8459352023a7717c013780b93e/chakra-ui-system-0.0.0-dev-20230424221053.tgz","_integrity":"sha512-ZGcTvWD0v+R5bbVh9Acjh9SPCpulWRdhLXaB0HrOajRGEHiZlh6oGi4oDxeVauVHP7+rIG1QoFsw+xpQKstlQw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424221053","@chakra-ui/object-utils":"0.0.0-dev-20230424221053","@chakra-ui/styled-system":"0.0.0-dev-20230424221053"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424221053"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424221053_1682374337963_0.26673358424268745","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424222806":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424222806","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424222806","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"d8ce1f4d8f9d846e800bb0e3b162edaf6f571bbd","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424222806.tgz","fileCount":45,"integrity":"sha512-5gxX6MVmPKlEoPj4yn+jNNrcsRHBJGOtPro9uabHYrpI5IoNll8zsee45CKdjZISZLfAb9Wz/QDKKlm+oP79GQ==","signatures":[{"sig":"MEQCICrIvfcJoxCoNt8dZ6Ftui6HusygUUYHmY+fo4dwADBaAiBC0ESLM7UT/K7Hyo4oE4zog7Ql4h5Scq5VWQbt1vP63A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRwLCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFdg/+KtLYI0tDd8aoPuLW1TAPpHCl7p/F4NWGczTMk4zqP4feH4LJ\r\nifhusKJKpk24iAt9FswUu7hM+/YUAea+utASVaozxV5jBho5JxQpFwkrpVY9\r\ngqIdjJoSqTPKW6p88i1Qq7UmGjavKCS5358QHEQoKMLvu79VxuL3YtuFTdH4\r\n7gmfibe3eBeKORTm6rnPSjwu9qq8fm7AgipDWBsFs0wZA2SJBZHTeBBuuvAR\r\nkPW/K2ybZGnSejJAqAwUpF4dlBK/3nurEGX02lRrwpHD+PSbRjFI5x5AbJVQ\r\nXxqdYfX+2VAkcVrjocbfRHTMR/RYJh3uaGGBz0PZOpC3bdRfKWjhKQvdYygr\r\ndIfx84QLIDjLveMccLYsuMAnlDAbcWi6zZXnU7Zhj5GYAukEEiFV2pmxyrjE\r\nAilxt/iPeRrRKTWKVOzG8zAbOM2ql+wiBlPMrdXZbFOu84EpKVJ6iwUsj2ns\r\nbPystN2CmXSBMx7TftBpb38qlC+IWAlpO2qWuSIa5QrDo9mSUtlp1y8bvK8w\r\nNamII0SZJhL+zwL4NgzeA72kIcWcceKtVT4ekc6NrZH5LdKVULZzO4Gkji4u\r\nTDwxJkyiJG2RXroM0a4Xl2W6sJRIBaunR7VRw8mmFYUXNvSICVZqZxFld0H7\r\nYSb+awsxcu38/Mh5ptCWxJOYuitFG/odqNU=\r\n=0edr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424222806.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5e19dd0734c72df2383e9189fe8e37cc/chakra-ui-system-0.0.0-dev-20230424222806.tgz","_integrity":"sha512-5gxX6MVmPKlEoPj4yn+jNNrcsRHBJGOtPro9uabHYrpI5IoNll8zsee45CKdjZISZLfAb9Wz/QDKKlm+oP79GQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424222806","@chakra-ui/object-utils":"0.0.0-dev-20230424222806","@chakra-ui/styled-system":"0.0.0-dev-20230424222806"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424222806"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424222806_1682375362497_0.03964692242575807","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230424225650":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230424225650","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230424225650","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"5020ebc1ce7e6388a8cb7b1888a0269af8950a55","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230424225650.tgz","fileCount":45,"integrity":"sha512-ALqWDLBmpaQULicJjXV3an4FQoYzpGvgGdyYvfpXWTdXwIV7K5E/awOEc/lBnTrjdEQAaibWbOu1hNmSY3xaFw==","signatures":[{"sig":"MEYCIQC/0LbzKpCI+33DzbOhaEhgK4OdYm87kGRgpwSQ0UrTAgIhAIseDh+jlg9adUDZhu5+r17qypmEipEeoat9NpWD7M3d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRwlyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1Jg/+PjPOyLRPKbcq+gpt9IJxxuvjQYeOtp+xyTQvsi+vtnj7HKGZ\r\nQLWMUnugZF08Cf+8eYhSgbOwIAyVMB+s4b1fwdalBIYQEbFl2wp3cYkfKPgV\r\naSGr8xI9uqt1V864eCbGMHss+7Njyq88Z4qSBNem3hTmP+mTYM2jFN6nNcAJ\r\nBidFrOmgtU1AJWej0gjExZVeMikvQJSZP2yc22+KirrueHS2Tpcc3cpU+6M9\r\ne964viv8hicUqTQkMnrOyD19RrQ2H9a9YSvXooCiczM8sPMdB2b7PCLaL+nD\r\nqB9GWCWHl9gkhj4Oj6IwupMJadSNiqopk3VcwgGFoqHS5IvmP0Ip0ERSwlca\r\nl0kNnh7XliF0WLllGNhONJ7Q9wYfaSlr9U9brIxdTu92If6tNUBbXBa6uCaJ\r\n4iDREaiEW/PV3DDYIgUU4YrTGcXr0Iqtrvpryd37lW8Rh+8h9o6eziSB4D+Y\r\ndaGlXCiZSxsWGDK9ewSeLE4YpO4hQxkxbyTT8W96Dqd2oTXjEvPUU7i1v4xu\r\nuWRi+ZdNcZ7p/av1/RVlAkav+dQoH17yGU0A9cjJA7aLKauX1AlpJzroPhip\r\n+urCJHOz+Ar6/oLNXjQGU94uch+a/mb0ipeMSruNfaQOTnfrtlaY59nz5gWT\r\nvy4KH6MssgWdVhGrvdschti13IaTsribGoI=\r\n=J0f0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230424225650.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ce3e273c197b710e8654ec5acab9a560/chakra-ui-system-0.0.0-dev-20230424225650.tgz","_integrity":"sha512-ALqWDLBmpaQULicJjXV3an4FQoYzpGvgGdyYvfpXWTdXwIV7K5E/awOEc/lBnTrjdEQAaibWbOu1hNmSY3xaFw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230424225650","@chakra-ui/object-utils":"0.0.0-dev-20230424225650","@chakra-ui/styled-system":"0.0.0-dev-20230424225650"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230424225650"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230424225650_1682377074225_0.7957100958236405","host":"s3://npm-registry-packages"}},"2.5.6":{"name":"@chakra-ui/system","version":"2.5.6","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.6","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"244eef56be3d3d546ef3d1b93e5f9b9a591ef3fd","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.6.tgz","fileCount":45,"integrity":"sha512-sKzonHUbjOnRxZvcysN8pqa3y0OkTb9xWPhNFnvye/Km8vZhw4SfHKbVpRXedMPVp5Q3PHOxqAXOs6Q0kpo6KA==","signatures":[{"sig":"MEUCIQCtwAVU6x5hhejJlS8tC+UpmxzX9dg43tutC0BmOM0KdQIgYITs2hLNqn1Fupij7MBkZ5TJkisoqWtPetQq7847eH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkR7XqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmovgw//RQDsDMQfCdqlnOeRhI1l5f5L23xfNTQsXtEfKrS3TjyArauu\r\nOgJup0V+OdjO+OVX+eef1iKsol+EjIO2CeLJx4mNuSgzlK4BdbrrN+frdvvN\r\n1Q9sm0ZZcllcgDzTsJK6pLqE6q3bopokcxRb5T4Yk3o3fANXjJrkIDHFl7PA\r\ns9YhZ7NtcULbjVUotdAFmuLLQHw41tMdkqXglH9lkUHQsGmu74Xp/PlDq5oA\r\nrKayVlaIWxCByTiWjN5oxHFLGO/zneGWPlUEBgxPbW8515Pgj9VZUoUm/0OJ\r\nnZfxHLfgtBnIFf2y6gKzTVEmRfp2M60j0j5kSDWPRm1miWPIvL0Hb0NObVGg\r\nzJtlIh2I/XpTqVV7xLG+hxbCbvD9H6hgbUBz4FUxkfWOdshCcXT9Pa9j1P/I\r\ne3727ZHVaOYfU1GF+XW7rLnBOnaF/RxDDVE6+ccTnGlwiK9SKhWjqSQF6ovs\r\nuTIgaZcLxGEsRXKJ6PsWPuTDPBa7Nslsvipa4Ugq0qC3x1ZA71ynrAvuSP8X\r\nv/e9yEvddy179xc9R+BEbzp9ECJWZd33mXes/YJcubOHB8xDD4fbTPpe5l9F\r\n+YPX4gccnUFI8R+czhOKHRUgwNqjqG8NZPsXHPwTcRHF26sPZb72QkMwOqrA\r\nmSoy6aLltY/1VqdAJE0P7uuy3bIkN4CK0OA=\r\n=0puV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.6.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8527f5aa0e5f71cb8ff9ec77fce39967/chakra-ui-system-2.5.6.tgz","_integrity":"sha512-sKzonHUbjOnRxZvcysN8pqa3y0OkTb9xWPhNFnvye/Km8vZhw4SfHKbVpRXedMPVp5Q3PHOxqAXOs6Q0kpo6KA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.16","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"3.1.0"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.6_1682421226699_0.22925771113049254","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230502144229":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230502144229","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230502144229","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"85f3f3c5930c2af0a6837878c4ca62e9fcbbb263","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230502144229.tgz","fileCount":45,"integrity":"sha512-Suu18QOYrF5gkRKCZPZ60yXvSoknVhHcUoeZM6Sg43fG2czEtTR6cNM8QmgBFD7gCCVXVFwn0sZmXWgNsUqFnQ==","signatures":[{"sig":"MEQCIAu9W07N08Xebh/NNNGqrN29BdzIEIm9WMiTRvid98qEAiBcN6U5xq6CSyhUR6JIovja1hhtLNpgbQ6fMO9jW2wDng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230502144229.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/50b0c1b00a0a19b9ec3a4328747ac7ce/chakra-ui-system-0.0.0-dev-20230502144229.tgz","_integrity":"sha512-Suu18QOYrF5gkRKCZPZ60yXvSoknVhHcUoeZM6Sg43fG2czEtTR6cNM8QmgBFD7gCCVXVFwn0sZmXWgNsUqFnQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230502144229","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230502144229"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230502144229_1683038604379_0.3639862772287965","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230502155235":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230502155235","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230502155235","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"271a8ef8f069bd2877c778d222d5e10e2aae15a4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230502155235.tgz","fileCount":45,"integrity":"sha512-gQnQPEVwpyus6czSXAsKI0PM+bRtAOqT4fj0bQUskU1vTKlJVTm2hfSqV+s6NUoNtFlR3n/nNnA9aC8Y+toMLw==","signatures":[{"sig":"MEUCIQD9M9ix5KJC15ERLd3c2KT/7O7jPDsu7dmXdax6wgbHqQIgIV2XLDaEu2lNtsXommjC/ZB3TsJ0ilRQCCVU0LfW5cI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230502155235.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/faf3acd1d7b01c3010058a772fdf6a5c/chakra-ui-system-0.0.0-dev-20230502155235.tgz","_integrity":"sha512-gQnQPEVwpyus6czSXAsKI0PM+bRtAOqT4fj0bQUskU1vTKlJVTm2hfSqV+s6NUoNtFlR3n/nNnA9aC8Y+toMLw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230502155235","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230502155235"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230502155235_1683042806547_0.05147166282237792","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230502162309":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230502162309","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230502162309","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ceafbd67a3ba59adb16f895e94bcd14e0ff3b20c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230502162309.tgz","fileCount":45,"integrity":"sha512-qTU5Htv5Teyu9k8anfZLxq+TDinsjA7fou8aZ5zEcKKJN6aoElZ/k6E64h/Ub523zuiorBENcokOTJU/Rm9woA==","signatures":[{"sig":"MEUCIDGsJjnXSkoK8Npr4BoRRXet0KhSMHsnFMMmS4N+ZUaUAiEAqPYGs2WrkpofcM9+3H2CbPRSPypFK7DxNLfb6LCYNo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230502162309.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b52de86bd13cf0894ce1a7e895af62d6/chakra-ui-system-0.0.0-dev-20230502162309.tgz","_integrity":"sha512-qTU5Htv5Teyu9k8anfZLxq+TDinsjA7fou8aZ5zEcKKJN6aoElZ/k6E64h/Ub523zuiorBENcokOTJU/Rm9woA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230502162309","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230502162309"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230502162309_1683044647152_0.7711902843184604","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230502164338":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230502164338","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230502164338","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"1b1b7d9389f261145f652bd0d8d61926381d0be2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230502164338.tgz","fileCount":45,"integrity":"sha512-KID79urK1gaWSZ21Zc7SrKnnYQqURQBFR/n7FAF5Luhnyr7jfdZcCcOQdRgEFMyw4+o9Y4xnzei0vWqJ92Xqlw==","signatures":[{"sig":"MEYCIQCedY7Hd5vQfupvF+obEgVNXS3i0ay448J6c5zgFICQMQIhAND0PhZIP71l+vZYqk0ELUgp9qkXK/nFkSM24LRM4XfK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUT37ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqeag/+L8pgh+wl85HtLms45pDHnmiVFVj+7wA6LI8gBsbUE5FraPAd\r\nmY7K1lq5mNfg0xz0SxfhXAdyMFR89W3vizDc4Zna9o1YHcBCpf+bjO1JULhY\r\nqsOGLXb48PPki7t51SjeA6M1cS9/D93uydg5Tu27Xey6PpWFM+GEg7Mr43ap\r\nE45h7AQPc7vGe1ttd/jDu6FGF8GO61OJFBlZj0yuJVfSI4vXQRVav3kxcsD9\r\n8J/1M3qCJzOUPEJXlRwxbAgtTBnd3GofjdDot31sdDxwxA1LBpAA6Wx+bzc2\r\ne7yN8pw2/rB+8BYYmhsQ01Odjl677gFxeWH6XAalsuzxFZuJxVGeLuggv7Ez\r\niH4YaV2eU1ZMd/I8xFz7EroQKF0WCqf6ySYcLUxx9o0pQaIbV3Gx9DZzSyBv\r\nOVhVWiwYNtne4fXSQIkwGn5LkCsI/cQQW+felpt7ujwhRwi2py5B24s9pwE2\r\nYr/KkvQu/fts4zc1RndySd0/Ndc30SENNOkLuF51/AvgMEouYArmV1pkTGlH\r\nPRDLNGK6IFjtc8FjIhRwQVYi9gPqFgkJ1/HYXJ46IwR5JatbErilBQHVoUK+\r\nrwVblQrBsGuDUJ8E7SMC0m3ZFQpfv6/gvP5MDikcohCG1SATIDU/0hO5qCmI\r\nX9bjla7ff8/3BdeYgKXOuo8t9IuYITVTuTU=\r\n=znSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230502164338.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/08129a37c5a1cdaed5c543e8e4dd4ea1/chakra-ui-system-0.0.0-dev-20230502164338.tgz","_integrity":"sha512-KID79urK1gaWSZ21Zc7SrKnnYQqURQBFR/n7FAF5Luhnyr7jfdZcCcOQdRgEFMyw4+o9Y4xnzei0vWqJ92Xqlw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230502164338","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230502164338"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230502164338_1683045883637_0.8541396690596839","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230502211538":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230502211538","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230502211538","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"97198f2c37dd334147a26891f9238b606c7be116","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230502211538.tgz","fileCount":45,"integrity":"sha512-xM4U5V6gf5LzYlzbeOjRY0b6nTMU3iF0dEUKjsDW9qb7W9xVoeF6qsBrG09NuLlYm0rjF335PJzJ1WVdSrVimg==","signatures":[{"sig":"MEUCIQCGEFn5rSoBPdMjWcWaHAFRRO7iMiYktKB1zNqsywA/rAIgdGdPXLaFWxnLU86kNshFJoYhbDvfMl40zjNPgxXzpP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUX2wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2iRAAjj0HuFvVKp63wJ42Dz0qyHtKd0/y+LcN0iNOKAUsens+C0Uw\r\nzflSvvvNj8pa9D8sQg7rR3ZHJ3mK7MJ2d69oRG3IUePCHVSwkNQIds+8aFs9\r\nJQSbT5jpa81yKZGwZ2miUu9c+vSI1K6BjDt2T5IyWP66+Q5hpUGwHDachgFU\r\nkzYmFu1WKrT1UmbEeXGredHeYC7SQuOOPImKptnYdDgL6qf5yo7QJnIBF+DV\r\nFkwGcaTVZEAG2r02XYkPm4OZrDUoXZf08FUW2KFVDLE/65RHaZsB/cQPtZGf\r\nagPlO6nUbE7p8QqOh6AByXLj3QVQZFAneZ72vsYxBRocEvVeXzngyWsI06gs\r\ntEOckGdUQsFH6dO2WU/4i0WeiWX/5815KottmE/Tu6KV0vwGeCJ/N5d383Az\r\ny/IBOIW7JKKTk7PfFxyQ61CMJdDZDDmFeteVt5c2Nxtv3hzzBGvW/kVsSGsX\r\nsQqlzWz+c6iBu4u0H3dKp04iP6AQ5HBMH6ExXnWDkAU3wCuH1OAtMbYyDrRl\r\nMaLQn71uUQwJqfn00RTwd6qCG1gpsdjjqKqnME5/RmvCwKndU/BbcPQn0nKz\r\nVbksRBgdX2J8B7SafFIhI6PIdV/mmHr+IJ1eeIjhVgaS56ZmJbH6rF211aah\r\nvJLCuUihpZKbdJJ5Tww4wgcEcytzpiSdq4E=\r\n=U75m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230502211538.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0365414b51c1d070b69a19df27633fc1/chakra-ui-system-0.0.0-dev-20230502211538.tgz","_integrity":"sha512-xM4U5V6gf5LzYlzbeOjRY0b6nTMU3iF0dEUKjsDW9qb7W9xVoeF6qsBrG09NuLlYm0rjF335PJzJ1WVdSrVimg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230502211538","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"0.0.0-dev-20230502211538"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230502211538_1683062192047_0.1855357732924694","host":"s3://npm-registry-packages"}},"2.5.7":{"name":"@chakra-ui/system","version":"2.5.7","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.7","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f56c480af336d9f48e0ad84e2434d834017c44e2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.7.tgz","fileCount":45,"integrity":"sha512-yB6en7YdJPxKvKY2jJROVwkBE2CLFmHS4ZDx27VdYs0Fa4kGiyDFhJAfnMtLBNDVsTy1NhUHL9aqR63u56QqFg==","signatures":[{"sig":"MEUCIQDtRlNHfFmGKJYeATTNDFSH3dM9ObI0oBVIQzb79nNEuQIgNxRg+7k2mYaK7id5bBOG7cGvn0W79nUPN2XxxWCQ6fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUjGEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkrA/9HaxiKXLEAwtAJrHYZ++SgyCnYTKOHVC4zAS8toEPHR2sW29g\r\nDa9xu1YTb+Dd3MOJvyjrKN1D4rciN4L98Ucxi755XDSWflvrAlWRAuskQAR+\r\nHOcSdpYyeKBoTLX0i57kYOaNXku+WXNZZaKjCHlboKO0+QxPdYg4W4IedqCe\r\nr+iugKKl4E5e1xhvgLaCYo6m+4uCVEgZUALxZi9INADuN2Q1RrPCJOwOYz3j\r\nsifgGaOJfG8VkQkeBQMypCpsoZN6/8I9/VMZRSyWWbK4LF7HTJBoA6ERT5XO\r\npe8m+NyUBJzhWOOrG2Oq1Frr0tYN5YMn9jPR8i3/P+LbSzvkWKSHcTXAx1pI\r\nHY1+25BAWOVNZfDWIpQ3ovQTtwn/ihMAl2uZRWPNpFog6WI/Jli2fkfxOsZV\r\nZjlSgsDpCH7ma7DkoXJXcP6L0McGCZ/QLy/YYFap4vKla/rABlbTmSl5J57d\r\n8mzPeRx+v0vSNEfJhvIXHDvBpVq13Pxp7K2r1nWqKAQmqp666F/hFuK4QDIz\r\nckL6mQu0w3VspcRM8vXGmA9fbqXyDcriSda91+/HXMVBL9g3obZpP00Dw+zN\r\nvKnTCcYY6b2ycGiBX3TvMoT9Wp7xwN6I3XVJ04R7BYrz3+xq+mwNcEzMY6HK\r\nMlE/qfdbr2yo4IG5vD+uQjwsUWt16uFP+jo=\r\n=YdAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.7.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b967662ce68ec9439e65e3cccca47838/chakra-ui-system-2.5.7.tgz","_integrity":"sha512-yB6en7YdJPxKvKY2jJROVwkBE2CLFmHS4ZDx27VdYs0Fa4kGiyDFhJAfnMtLBNDVsTy1NhUHL9aqR63u56QqFg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.17","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.0"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.9.0","@emotion/styled":"^11.8.1","@chakra-ui/theme":"3.1.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.7_1683108228534_0.8890798012144727","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230509101921":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230509101921","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230509101921","maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"},{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"jbakebwa@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"cbc56defc91bab16bbcb65b51b692e3f3a59c801","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230509101921.tgz","fileCount":45,"integrity":"sha512-RfC/TIXmH+tiBFDzhjuiKL8bKGGY56DqzxvxqHtQygbBM6G3kTZxSVl9RXVoHKlXQBnbAM/f3/LJqHC+mpwiPQ==","signatures":[{"sig":"MEUCIDI5B/EmSJxJ63CfAjnjl1EgStYIH01CoXOL7PXUY2StAiEAlv8ZRFRiouUAOVLIsMsKWRx0hwqqERr+s4xuppQ1ON0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64738},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230509101921.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/f9704a84cc734bb4925db62d141df2ce/chakra-ui-system-0.0.0-dev-20230509101921.tgz","_integrity":"sha512-RfC/TIXmH+tiBFDzhjuiKL8bKGGY56DqzxvxqHtQygbBM6G3kTZxSVl9RXVoHKlXQBnbAM/f3/LJqHC+mpwiPQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230509101921","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230509101921"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"3.1.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230509101921_1683627624765_0.18822996300645856","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528123435":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528123435","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528123435","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b8b0d8942ccf4f632470619cd11ae947213c6738","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528123435.tgz","fileCount":45,"integrity":"sha512-CeyLGuc1dmO0LYUK3nLWKn7aWA2GMs01rRLVvFQbjA5upjtSNlUFHw8h2lNtD8CxVuAT8BZHjh7FhBsbFPne4A==","signatures":[{"sig":"MEUCIDkPmUl7mSS+hwZ1Mx0cqj+5K+F56uygLgPqR3kGf/X8AiEA1kRm6Yq0Jr/X16uvQtTkZ9frpZ+gpmp3+nJ498rzF0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64738},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528123435.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/898de38f92206a7c82af6c452eb8af2d/chakra-ui-system-0.0.0-dev-20230528123435.tgz","_integrity":"sha512-CeyLGuc1dmO0LYUK3nLWKn7aWA2GMs01rRLVvFQbjA5upjtSNlUFHw8h2lNtD8CxVuAT8BZHjh7FhBsbFPne4A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528123435","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528123435"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"3.1.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528123435_1685277339260_0.3024276997050046","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528125234":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528125234","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528125234","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7e31d781d8e5484823421ad7f89ee8e46c924171","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528125234.tgz","fileCount":45,"integrity":"sha512-pg82bQCXu9KlWtfaovmi3F1B4z8kORASMrWsK0eApA1xQ+F2tnk2yzWUS4xaS/6MJ8uN4Pod9Xz4lLqsxjxVQQ==","signatures":[{"sig":"MEUCIQCQpCbOO0SvNbsgEgHIbwP1FDWo4YXwS0gCzfFYeGzt9wIgBh6RrY8C+SycHql90FJA5sbxYiUEoD0xFE+Qib5HFGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64738},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528125234.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/dfd1307ce1015282642f2778006216ac/chakra-ui-system-0.0.0-dev-20230528125234.tgz","_integrity":"sha512-pg82bQCXu9KlWtfaovmi3F1B4z8kORASMrWsK0eApA1xQ+F2tnk2yzWUS4xaS/6MJ8uN4Pod9Xz4lLqsxjxVQQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528125234","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528125234"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"3.1.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528125234_1685278414662_0.8008084838457135","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528132208":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528132208","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528132208","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f49e65dc005a079f9f8f7bb3826b614a9a05a3cf","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528132208.tgz","fileCount":45,"integrity":"sha512-eREsx0igNuIL4hKpxpCwy5YGHTe+bnKuEMcXsGmR4znt60mlN+wkpuY015bTw6psQgoqu7qm76SvaMlFTG1BZw==","signatures":[{"sig":"MEUCIFucYgruERdOtDG+JE7sp4J0JQoPJ/AI6s3wcw1yXt/GAiEAqOpxUnPeB9p6oqmrdzZUFwcTknPrxDm9zkdec+iQLsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528132208.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/a7ce9ae03d4134975ec415f0eb61e324/chakra-ui-system-0.0.0-dev-20230528132208.tgz","_integrity":"sha512-eREsx0igNuIL4hKpxpCwy5YGHTe+bnKuEMcXsGmR4znt60mlN+wkpuY015bTw6psQgoqu7qm76SvaMlFTG1BZw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528132208","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528132208"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528132208"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528132208_1685280178057_0.2995847280857906","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528140259":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528140259","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528140259","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9603f93ad96d1fa223bafd05f81728fe0497b491","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528140259.tgz","fileCount":45,"integrity":"sha512-D8qPuLxKw7HTVK2EudSjt4uZiEBCrHB8zE6DHh3JqT1UxyrMwbSBLj2byAE/FsVrZRj1uugSTLFYSAffvXpvnQ==","signatures":[{"sig":"MEUCICI/DVIZJeaoWilUOsYf8DPj455FPlAEt3sR0CaysYRQAiEA8XLhoncSCi61l+ZKJIgGBhJWeuCmoFCYpzI0Me999qE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528140259.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/555d564a9609beb8cd87432a8bb406b1/chakra-ui-system-0.0.0-dev-20230528140259.tgz","_integrity":"sha512-D8qPuLxKw7HTVK2EudSjt4uZiEBCrHB8zE6DHh3JqT1UxyrMwbSBLj2byAE/FsVrZRj1uugSTLFYSAffvXpvnQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528140259","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528140259"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528140259"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528140259_1685282648331_0.41752839535841413","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528143537":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528143537","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528143537","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"de6e41e446ad8732951266f83ee2f220b0e7637d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528143537.tgz","fileCount":45,"integrity":"sha512-tDVDXRFVTjiV5p41dJD/VecWopsg1ZesR8R802k+eGJFMBTl4vdiURtL/bXOSVlW9DtZXPJY5nNcapUufLNoqw==","signatures":[{"sig":"MEYCIQDT+BW12cEPXGecR5ViEx0wsrYJW8/gG6omunlQ283y5gIhAOg6CWFlMqW1RHMN2kk8OTzMCd9cD+KkJAoFSU5OnD1t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528143537.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5ce5de4c9d967105db6ace2483b196d2/chakra-ui-system-0.0.0-dev-20230528143537.tgz","_integrity":"sha512-tDVDXRFVTjiV5p41dJD/VecWopsg1ZesR8R802k+eGJFMBTl4vdiURtL/bXOSVlW9DtZXPJY5nNcapUufLNoqw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528143537","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528143537"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528143537"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528143537_1685284608202_0.6584790711137092","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528160711":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528160711","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528160711","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bf688c6596cbec160ac012490c843bd325dfb1e7","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528160711.tgz","fileCount":45,"integrity":"sha512-GTJCx86HhJDZkW5DFWypcjC7W/LN5YARQexYJEE8Zp9KENEtj2T5z+oZFrhBxfxyINmu3FtFjDKjiaupDsuoTA==","signatures":[{"sig":"MEYCIQDCoD6MVjzBjCHpdqIF83lFESb2PfD36KJH76ggEEwOwwIhAO8a6TQaMgtcPgIhbB9zCbTLYC+nu+g4ZHgKCrckQPs7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528160711.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/81149b8c4b5206fb641ef34386184a45/chakra-ui-system-0.0.0-dev-20230528160711.tgz","_integrity":"sha512-GTJCx86HhJDZkW5DFWypcjC7W/LN5YARQexYJEE8Zp9KENEtj2T5z+oZFrhBxfxyINmu3FtFjDKjiaupDsuoTA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528160711","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528160711"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528160711"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528160711_1685290081973_0.14200584751934486","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528164120":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528164120","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528164120","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"25f231a38a5bfd8d965a80f3ce9e8134085dee21","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528164120.tgz","fileCount":45,"integrity":"sha512-z11ypCgycEB0zJd+s/PoLYSpg3UV5I1cotLXT3Jt3IqsZZIhfqe4oUx5Qi5Dtj3x7DpNHoHgvcGFrZ1GU7yiZA==","signatures":[{"sig":"MEQCIFpaY9CmOhStSkxqxE7oc1F5V2oT9J4Q4pQSBvxEk6qyAiAzbLRdtnDfWqY6YAsI65lvfYggxIqQFs2AupXv2yU60g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528164120.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/35085e51e1ea2b85c321d661570966ef/chakra-ui-system-0.0.0-dev-20230528164120.tgz","_integrity":"sha512-z11ypCgycEB0zJd+s/PoLYSpg3UV5I1cotLXT3Jt3IqsZZIhfqe4oUx5Qi5Dtj3x7DpNHoHgvcGFrZ1GU7yiZA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528164120","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528164120"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528164120"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528164120_1685292138805_0.28198608446169127","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528170051":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528170051","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528170051","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"df8ec33395126928d9d75fa9ef562db86f889754","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528170051.tgz","fileCount":45,"integrity":"sha512-qF6uhpKwwrPNFnwjbKCs6Q/ze2E3zrIIYuPpxC/byULRa/m36Uyj+1j6RI5mT2eSitjJJOTwa2mBuRI3PLqB1w==","signatures":[{"sig":"MEQCIHTx4bKZtYks0sOdaHVPybPPxjnHXavhtaB1+gfel1xoAiBxE2lq3jBbcDJW/0eSVrTQbVItT+ytVqLOraNOANqPeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528170051.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ca571179103efba8326bfed5af4c9e2e/chakra-ui-system-0.0.0-dev-20230528170051.tgz","_integrity":"sha512-qF6uhpKwwrPNFnwjbKCs6Q/ze2E3zrIIYuPpxC/byULRa/m36Uyj+1j6RI5mT2eSitjJJOTwa2mBuRI3PLqB1w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528170051","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528170051"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528170051"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528170051_1685293322612_0.18758316294783017","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528173059":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528173059","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528173059","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"382bc8c28a2535f4d0b9514f7757856f9dfa3343","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528173059.tgz","fileCount":45,"integrity":"sha512-gfjQfza+aYJTYlbvscHPqHyZ1ac1HC5e1V/++greaY/SCz0vbflvqgppr4jTjX6LZc55mJY4YTFucWX46cGV9A==","signatures":[{"sig":"MEUCIQCDnY0lovkYjb8szYBkydKf8GreLf2i8B8vQ9Vvv0Vp2gIgXCaawcTd6NrApQsn8CVz1eNfbW89BVjm5HP+M+CxFcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528173059.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6a22f777f5e1ce447a8e9036690530a4/chakra-ui-system-0.0.0-dev-20230528173059.tgz","_integrity":"sha512-gfjQfza+aYJTYlbvscHPqHyZ1ac1HC5e1V/++greaY/SCz0vbflvqgppr4jTjX6LZc55mJY4YTFucWX46cGV9A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528173059","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528173059"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528173059"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528173059_1685295125896_0.7605546503403087","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528181900":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528181900","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528181900","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f541fbb430a4ba16b4098c866c922eae508d9e9b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528181900.tgz","fileCount":45,"integrity":"sha512-/57v+HCyjqVj3vLoqlMh2ZuFAnYFtXrekxONHA4bnDImpLRmpylHwsvg0qOr1x7s/bXi5ENnSf7hlqpPuWx97w==","signatures":[{"sig":"MEQCIFnUC0m3+KvSf5XHdks7uQ/zTJOEGfzYPJ1hewL/fGDsAiBd1x45bHwqQwap5iUiNzWpBCpaHC4pC+c4eRllz1iXvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528181900.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/331041bb32f85e2e4539ae52bbc6b76c/chakra-ui-system-0.0.0-dev-20230528181900.tgz","_integrity":"sha512-/57v+HCyjqVj3vLoqlMh2ZuFAnYFtXrekxONHA4bnDImpLRmpylHwsvg0qOr1x7s/bXi5ENnSf7hlqpPuWx97w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528181900","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528181900"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528181900"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528181900_1685297997742_0.3170845389313304","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528183722":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528183722","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528183722","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9dc7393eab1388f51079641751ccf974130be4af","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528183722.tgz","fileCount":45,"integrity":"sha512-6fiXUU3eXtbKboriI0idDzcp1xYBP0gdHFkcx2+henU1V1XVh8Q8W/5HJGhuM5o9Ta48wTedA/y/I/PnuEokpg==","signatures":[{"sig":"MEYCIQDT16GztVakGSkC/Q17MdEMgPD1HBBynTKSYaCz8lU4UwIhANXlkarSSMacRS3mgQN6hnDT/HDz42JBHpoUnQFWMOi8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528183722.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/06dbf17835843ed09d417e53d1785590/chakra-ui-system-0.0.0-dev-20230528183722.tgz","_integrity":"sha512-6fiXUU3eXtbKboriI0idDzcp1xYBP0gdHFkcx2+henU1V1XVh8Q8W/5HJGhuM5o9Ta48wTedA/y/I/PnuEokpg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528183722","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528183722"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528183722"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528183722_1685299120932_0.04446647643900259","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528185153":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528185153","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528185153","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eae87c74b8cc4de843a96e5ffc4f9f68484c6b00","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528185153.tgz","fileCount":45,"integrity":"sha512-NVyYH+o1jyw5pf7KYY/EbzAZ3jHtSWjtSBLLdbD3CHy42h2x5SgGL4Dg8gpb0ZkCwfXCeRi4HltY2ZPHHy9xEA==","signatures":[{"sig":"MEYCIQD9AejzNsRbhZhX4BFiaQniwbhmpUUi0MVenNqIXh2EhgIhAJGLXNBsEO2yQn8Pavv3tNpzrTv9q6sm5wA+JGcoQuYk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64757},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528185153.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/ca6174f439fb8ef836d827b7051c9bb1/chakra-ui-system-0.0.0-dev-20230528185153.tgz","_integrity":"sha512-NVyYH+o1jyw5pf7KYY/EbzAZ3jHtSWjtSBLLdbD3CHy42h2x5SgGL4Dg8gpb0ZkCwfXCeRi4HltY2ZPHHy9xEA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528185153","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528185153"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^6.2.9","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528185153"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528185153_1685299972969_0.3588107561603211","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528190715":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528190715","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528190715","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a0d119cf36f5dc1129cfe2ed63ead90281b567ce","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528190715.tgz","fileCount":45,"integrity":"sha512-Q8CVkjqkQCMwjSByOsHso3AZbgXy6fEGJEd3GMKo/TUsgZnhkwmlMHUFNeQTawd913W1PiIA99JeFyBj2TYgOg==","signatures":[{"sig":"MEUCIFLTTpfrOKRcOAEnb33l3jG9srRpZp4NV6zIue0oYCotAiEAo4oI1azMUxOpyryzzk2dLLvg1Yw5qfdxA/s2krT5nvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64760},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528190715.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b2d55213b7a724327a7e1cf5f3927d92/chakra-ui-system-0.0.0-dev-20230528190715.tgz","_integrity":"sha512-Q8CVkjqkQCMwjSByOsHso3AZbgXy6fEGJEd3GMKo/TUsgZnhkwmlMHUFNeQTawd913W1PiIA99JeFyBj2TYgOg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528190715","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528190715"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528190715"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528190715_1685300902349_0.05539450615298658","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528194103":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528194103","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528194103","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b8309433f86bad7b0c6685c157383884d39e8f32","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528194103.tgz","fileCount":45,"integrity":"sha512-BOgth3VtV1vMnRQ2jXckLcrrgIaA5nMYPtpDtOyt9+y0yozImFkavbmFq6Z6joeiOqFejdBnHiFyZPNXej7H+w==","signatures":[{"sig":"MEQCIH+zWiE94L+6qxbRxozn4T1yccIEN5IQhrq18QllhgKvAiAlNBPytHtYxeCk9czIveEDCZ9eTCIkF0EDKtXPY0aoyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64760},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528194103.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b66a37296805b60a0505ef4ce104d21d/chakra-ui-system-0.0.0-dev-20230528194103.tgz","_integrity":"sha512-BOgth3VtV1vMnRQ2jXckLcrrgIaA5nMYPtpDtOyt9+y0yozImFkavbmFq6Z6joeiOqFejdBnHiFyZPNXej7H+w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528194103","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528194103"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528194103"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528194103_1685302940059_0.6697148677898803","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230528200306":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230528200306","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230528200306","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a2b1a969851d2fd4647cf4eaddd63b69c9471b5b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230528200306.tgz","fileCount":45,"integrity":"sha512-9fvhFFWJjs1Ti+UQXEPraEtQyvptzNxCi3s9SiFD2ndIW/bh7T0HhGp+b3CHg2cd4I5+u5vj7/WpqnAUTkicLw==","signatures":[{"sig":"MEUCIQDzuVcxXXtIn5Pa8/wNiXtwWJ9LkBfBb+tEe3u/4wO6kgIgQ0QEgiMjtJ8XoFem81XgYRhLK7CdnKLztsZQanlg+Ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64760},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230528200306.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/39cca9ca17fb003b997ca7f712d48f64/chakra-ui-system-0.0.0-dev-20230528200306.tgz","_integrity":"sha512-9fvhFFWJjs1Ti+UQXEPraEtQyvptzNxCi3s9SiFD2ndIW/bh7T0HhGp+b3CHg2cd4I5+u5vj7/WpqnAUTkicLw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230528200306","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230528200306"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230528200306"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230528200306_1685304247480_0.7155106245111773","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230531082239":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230531082239","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230531082239","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"20a3f289a6ec045c5eabccab772ae8978387f535","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230531082239.tgz","fileCount":45,"integrity":"sha512-g1fq8I4+p9dVF2Fcngcw3fGqch8FGdmPxAtr8nnOFd4ohCuswwDRbJZ0OmuBMd0ax4NIIvsLI58x6uZYI57oqg==","signatures":[{"sig":"MEUCIFLErq4K3dXzAMAg8aXjRFf4kgocux3w9zvAaPS66iSPAiEApCoh9jEiJ8yORfoM6yjCnIBsklcKuuYce8gdadfJFA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64760},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230531082239.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d7bd16e96a83208a261cfb57cf8e9302/chakra-ui-system-0.0.0-dev-20230531082239.tgz","_integrity":"sha512-g1fq8I4+p9dVF2Fcngcw3fGqch8FGdmPxAtr8nnOFd4ohCuswwDRbJZ0OmuBMd0ax4NIIvsLI58x6uZYI57oqg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230531082239","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230531082239"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230531082239"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230531082239_1685521424606_0.4722091396033421","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230531084037":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230531084037","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230531084037","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"385ea0a070b1ce7c60613380bb0178363330543d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230531084037.tgz","fileCount":45,"integrity":"sha512-5Wc14GwvzqUg7YM711m18aW6MRaVb6Aun0e0rWxZ56XV/rEyRx7/83dW/SQ2RID8h5qu3JohtmkVsmyi/V5ToQ==","signatures":[{"sig":"MEUCIQCjC2Z1lOJvvUThvvPUNcr9POffZJn5Xmej87uIQChl9QIgA3NOzAINACU7VTTdkQDYNtefPz966blC+Nxjz1+X8Z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64760},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230531084037.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/73bf01bec6a379a5f8a6f41cae3e4842/chakra-ui-system-0.0.0-dev-20230531084037.tgz","_integrity":"sha512-5Wc14GwvzqUg7YM711m18aW6MRaVb6Aun0e0rWxZ56XV/rEyRx7/83dW/SQ2RID8h5qu3JohtmkVsmyi/V5ToQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230531084037","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230531084037"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230531084037"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230531084037_1685522516958_0.600910809859118","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230531085907":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230531085907","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230531085907","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b1f25bbbb30cbe12a4bc24146d9695891fe65928","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230531085907.tgz","fileCount":45,"integrity":"sha512-CAW1xBn2g7ykBbI9RkWulapHDOii0wicaVnjdvPitU9cKV7xKRaLUl6A8RMZdmYDODfhq2WK31cPFoLnw95K9g==","signatures":[{"sig":"MEUCIFiUvGJZUxFf4vGchTCGBwplWSHB7PN2o5i0D6QlKAdeAiEA7a+mF1JaDykGAsnrB6jjaXtz8qO5GktcnmQICZJ95JQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64760},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230531085907.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c2dd2e143cf9efebb628e06d0467085e/chakra-ui-system-0.0.0-dev-20230531085907.tgz","_integrity":"sha512-CAW1xBn2g7ykBbI9RkWulapHDOii0wicaVnjdvPitU9cKV7xKRaLUl6A8RMZdmYDODfhq2WK31cPFoLnw95K9g==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230531085907","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20230531085907"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230531085907"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230531085907_1685523611067_0.8476044942571781","host":"s3://npm-registry-packages"}},"2.5.8":{"name":"@chakra-ui/system","version":"2.5.8","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.5.8","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"9026090b792320683bf1cc3a8f04af7b10c947ce","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.5.8.tgz","fileCount":45,"integrity":"sha512-Vy8UUaCxikOzOGE54IP8tKouvU38rEYU1HCSquU9+oe7Jd70HaiLa4vmUKvHyMUmxkOzDHIkgZLbVQCubSnN5w==","signatures":[{"sig":"MEQCIB72Da0xlquyb1bTJh0uSU3QGMsxBMZ1cg79ygQXI8vDAiAgi6BX2ffUDZm2g8SIXfDS9P+VsN7lzT/+y6pDzXZ4Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64685},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-2.5.8.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/e9f2f032aba9123167ff0cdc581be0b3/chakra-ui-system-2.5.8.tgz","_integrity":"sha512-Vy8UUaCxikOzOGE54IP8tKouvU38rEYU1HCSquU9+oe7Jd70HaiLa4vmUKvHyMUmxkOzDHIkgZLbVQCubSnN5w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.18","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"3.1.2"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.5.8_1685526288895_0.4204606316721513","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230711204333":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230711204333","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230711204333","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7c632a70b1b0acfb3cfef9b756e967d172db808b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230711204333.tgz","fileCount":45,"integrity":"sha512-N+F+v8xQfxO+CdSDx0Y0h0o4M3BprcRBBbFZlF2xjHXQqo+UFUQyEbXWs94KQsQNiygjPuiP4A3iY24VzwiKzg==","signatures":[{"sig":"MEYCIQDyj2ZIRzs7N8EYpeLM1ZljM00f625PYqg0VJxZr+NYhAIhAONNLwtMGx0NBfvymMAJoUEIFG/W7tkSMJaJIB4JqNoh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66476},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230711204333.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/dfec47ef538eee7aca4b8684a0f84fe2/chakra-ui-system-0.0.0-dev-20230711204333.tgz","_integrity":"sha512-N+F+v8xQfxO+CdSDx0Y0h0o4M3BprcRBBbFZlF2xjHXQqo+UFUQyEbXWs94KQsQNiygjPuiP4A3iY24VzwiKzg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230711204333","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230711204333"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230711204333_1689108316237_0.806539054521521","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230714212045":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230714212045","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230714212045","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"4c1f328519b7d479b515015ac0624312512a1502","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230714212045.tgz","fileCount":45,"integrity":"sha512-AY/gXL+sggawdWUqKtZ/SFzvV5nqGyJlDTc72c8XDj+DMY+QMnpRWL7nkRJTXRjpiYl7fVww+ZbJ4WS/skRalA==","signatures":[{"sig":"MEUCIBx077G5qhBO4hjSZ29IVMxIQ/eV+y3k0Tet9kdTqJUMAiEA4j/T80ImNmKL8xsXUswcIuI00rE7IYp+ai2qDSs3Wss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66476},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230714212045.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5f9944170ef71c6d7640af0858c08a4f/chakra-ui-system-0.0.0-dev-20230714212045.tgz","_integrity":"sha512-AY/gXL+sggawdWUqKtZ/SFzvV5nqGyJlDTc72c8XDj+DMY+QMnpRWL7nkRJTXRjpiYl7fVww+ZbJ4WS/skRalA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230714212045","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230714212045"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230714212045_1689369713533_0.8192950825652796","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230714214323":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230714214323","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230714214323","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6193376ccb7006dbc934eb480a58b672b9a6de86","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230714214323.tgz","fileCount":45,"integrity":"sha512-PzYZjBRnn5UkGp7mvPJeO6W/5B9XD4W6/tpzDChDTbIyIDP6FyVxSBUbkvXDPDUJpivc89iRsny6ZIFuoLtccQ==","signatures":[{"sig":"MEUCIBi/GHmeEemsgf52wDKSjKlny5rqfzBRY6zK9iF38f6mAiEA2sZMJhHzQ5/ZDGV+b/qgzvQ21zaffVZJ5TY9XW4WxMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66476},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230714214323.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/aeadfd447c1aa20bdbb4a28c29776b37/chakra-ui-system-0.0.0-dev-20230714214323.tgz","_integrity":"sha512-PzYZjBRnn5UkGp7mvPJeO6W/5B9XD4W6/tpzDChDTbIyIDP6FyVxSBUbkvXDPDUJpivc89iRsny6ZIFuoLtccQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230714214323","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230714214323"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230714214323_1689371072911_0.1899539922246305","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230716141052":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230716141052","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230716141052","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"72cf04b2e8d402420ba2b8abe3d76c8196aa4d23","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230716141052.tgz","fileCount":45,"integrity":"sha512-JjS3a6PxqyP2Ac2xz8Ug4F+J9PB9Cfgu42/P55VtDcvLqv13ApJef9pdWuMSAVLttF4LSCGgOh7RIq/vfLXx5w==","signatures":[{"sig":"MEUCIQD22RRY/6WEz38OELnx2mwaims9sN8gi5pRxbkAQ6K7LAIgGrH/7FFC7oZMxbEhzgwDbah6zRc3pBRy+xi+cg/YOhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66476},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230716141052.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6cb73f2c26ad6e9dc639368a6b4c2975/chakra-ui-system-0.0.0-dev-20230716141052.tgz","_integrity":"sha512-JjS3a6PxqyP2Ac2xz8Ug4F+J9PB9Cfgu42/P55VtDcvLqv13ApJef9pdWuMSAVLttF4LSCGgOh7RIq/vfLXx5w==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230716141052","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230716141052"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230716141052_1689516710314_0.8506461529363585","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230716142935":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230716142935","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230716142935","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"eac2ebcc1ae64e044971a896b92e869be1504e41","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230716142935.tgz","fileCount":45,"integrity":"sha512-LpqtwcZgVa3hNhlRNEKd9Uivak+EHRFTIAzdajV89nm1Gg6NCD13b4OeDMuOhPzjKGQnsPkvukidlanVuL1mEw==","signatures":[{"sig":"MEQCIHcluUcO2vSwZzWCblJr08uo7aRts1cgnfi7HrjxS0X5AiBddtFvGQjo6UEpF+U5rFlC2U4X2L2bM2rwpOoytGIZLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":66476},"main":"dist/index.js","tsup":{"clean":true,"format":["cjs","esm"],"target":"es2019"},"_from":"file:chakra-ui-system-0.0.0-dev-20230716142935.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/b9ae52ee116b9a258c5656f28fbd5899/chakra-ui-system-0.0.0-dev-20230716142935.tgz","_integrity":"sha512-LpqtwcZgVa3hNhlRNEKd9Uivak+EHRFTIAzdajV89nm1Gg6NCD13b4OeDMuOhPzjKGQnsPkvukidlanVuL1mEw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.1.12","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230716142935","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230716142935"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230716142935_1689517839303_0.1405678378893196","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718122336":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230718122336","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230718122336","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b12e98e9235e9bab31bb83ad1902fe374edc9d4d","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230718122336.tgz","fileCount":76,"integrity":"sha512-3WxB10CVD8ZyXgBoVM76cw+Kp5W/p8M137n8NtBz1Hj235LKcEOrRMIOJlixbajgnAeLHsTIuMYyeZ+T0seVUw==","signatures":[{"sig":"MEYCIQDv8TDfksMYXfEjub1ZkQZsGQVrZlPq4Gv7xxNz09kifwIhAPb9fU7mXmlbn2aU4vUIKiPhudkU+IIWfCXZ0jOgsw1q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145991},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230718122336.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/960316493437d146013ba4e5729d692b/chakra-ui-system-0.0.0-dev-20230718122336.tgz","_integrity":"sha512-3WxB10CVD8ZyXgBoVM76cw+Kp5W/p8M137n8NtBz1Hj235LKcEOrRMIOJlixbajgnAeLHsTIuMYyeZ+T0seVUw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"0.0.0-dev-20230718122336","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230718122336","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230718122336"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230718122336_1689683169775_0.68594190180717","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718124717":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230718124717","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230718124717","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"bfc8ab4ec0368b851c45d591b9cb0646690fa010","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230718124717.tgz","fileCount":76,"integrity":"sha512-RE8FmBcjTfy2eH4D6kxg+Qb+A+OI+5E3Tr2XmKowWFC0N/ZJq4/xjVtHPAnLq7zVnT8Ux/BNqSNKJNF8IRLU8Q==","signatures":[{"sig":"MEUCIQDeP2kcT4aMG+Hz0ir8ZUST1dEktk5oxXRl1GENyUk2GAIgOElf4Pftpvp3nMnBw+Bi110b2PYo9dOeqSUF6honaSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145991},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230718124717.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0f639d4845d97c0395d21939b411e4b7/chakra-ui-system-0.0.0-dev-20230718124717.tgz","_integrity":"sha512-RE8FmBcjTfy2eH4D6kxg+Qb+A+OI+5E3Tr2XmKowWFC0N/ZJq4/xjVtHPAnLq7zVnT8Ux/BNqSNKJNF8IRLU8Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"0.0.0-dev-20230718124717","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230718124717","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230718124717"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230718124717_1689684570562_0.9308548881547367","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718130742":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230718130742","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230718130742","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"465932066d764f51214d3f3e21bf9c9c57522c05","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230718130742.tgz","fileCount":76,"integrity":"sha512-FbZyILQyYLNyQE6A1z4j45R2hV0rYR+nUDdOFWMHsi0qwyYXuQ7OiFozaL42WaVc5KoaOCFacsUF1ObxjY9aRQ==","signatures":[{"sig":"MEQCIC7NUjjQC9AwqerxsHn5MCmxqXlNM4pWPvh14qf7mtr9AiATU4Vew4fFe/WDWnjjcVaIi3fXGT+/djJ9N0sTQZJRqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145991},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230718130742.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/5ff20ecc5e9eca2e9a587f036e761c96/chakra-ui-system-0.0.0-dev-20230718130742.tgz","_integrity":"sha512-FbZyILQyYLNyQE6A1z4j45R2hV0rYR+nUDdOFWMHsi0qwyYXuQ7OiFozaL42WaVc5KoaOCFacsUF1ObxjY9aRQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"0.0.0-dev-20230718130742","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230718130742","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230718130742"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230718130742_1689685789130_0.8112241811979279","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230718132637":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230718132637","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230718132637","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"3d8b851bb3a56facf4d3c1b6b233116d831d19a9","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230718132637.tgz","fileCount":76,"integrity":"sha512-HJbnz3eNhYax3nw9Dpc9gYf1mw1s59HncvoNfzsKoNDmUccUzqqh0ZzG4Hi2NjibUFO7tVCTv2SaD0LxrxCcqA==","signatures":[{"sig":"MEYCIQCMXfJ3EfUOSNHPFr6sGvfGIC/7JMI77FiiU3lLZAMABQIhAJyjI8tVN+rpvDeg+HgHcjoxgwY36D0w+hQK3h54GswS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145991},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230718132637.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7f4b9b2b5b5e47763600c7b6438450b1/chakra-ui-system-0.0.0-dev-20230718132637.tgz","_integrity":"sha512-HJbnz3eNhYax3nw9Dpc9gYf1mw1s59HncvoNfzsKoNDmUccUzqqh0ZzG4Hi2NjibUFO7tVCTv2SaD0LxrxCcqA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"0.0.0-dev-20230718132637","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230718132637","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230718132637"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230718132637_1689686916666_0.5363257299307356","host":"s3://npm-registry-packages"}},"2.6.0":{"name":"@chakra-ui/system","version":"2.6.0","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.6.0","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"29f65bb0887ee0816bbb7b4b098ca5aa4918c409","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.6.0.tgz","fileCount":76,"integrity":"sha512-MgAFRz9V1pW0dplwWsB99hx49LCC+LsrkMala7KXcP0OvWdrkjw+iu+voBksO3626+glzgIwlZW113Eja+7JEQ==","signatures":[{"sig":"MEUCIQC6UIpODsk9aW9HJYloMS4LDFfuGOxukPLEDdCucSDYTQIgRD9flD8Mpi9SMM7p1M6kdI5iBt8FebIT+iyXmVqkpN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145916},"main":"dist/index.js","_from":"file:chakra-ui-system-2.6.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/8c377d6b1e713200d9f351eaf50f360a/chakra-ui-system-2.6.0.tgz","_integrity":"sha512-MgAFRz9V1pW0dplwWsB99hx49LCC+LsrkMala7KXcP0OvWdrkjw+iu+voBksO3626+glzgIwlZW113Eja+7JEQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.5.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.16.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.19","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"3.2.0"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.6.0_1689721281345_0.49816233913068975","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230815223317":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230815223317","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230815223317","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"f8553dbccf9f799f061bf45fa658a4ecec781893","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230815223317.tgz","fileCount":76,"integrity":"sha512-o0sp5F/XUwHcuhkxYMQel7smFIi5jJZuheirQII095JMhkhwptyILDuJj/5HIA6NjSvrT5sSTT/xnEWgsZ5D3A==","signatures":[{"sig":"MEYCIQDBFIMaGSrQzPcv/OQHdVxIlvTtvuespH+qb+pL5SjWawIhAI0FZAAiXvrMo3oinb/ZMOJO3bOJpEEAeSnykqhKNGbi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145972},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230815223317.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/cf8c979aae749d3e7fc2520528ab146e/chakra-ui-system-0.0.0-dev-20230815223317.tgz","_integrity":"sha512-o0sp5F/XUwHcuhkxYMQel7smFIi5jJZuheirQII095JMhkhwptyILDuJj/5HIA6NjSvrT5sSTT/xnEWgsZ5D3A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230815223317","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230815223317"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230815223317_1692138861029_0.9089686616015398","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230815225224":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230815225224","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230815225224","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7ca7c08d04e9a73389b8231b985392158b6e9079","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230815225224.tgz","fileCount":76,"integrity":"sha512-olMxeFWlJGV48Sti6b6MB7TklA9IZkZad9R1UTdal2BklCwLdGed44iT00SC8WU/vL0tE1anVmDTQrXeomYW0A==","signatures":[{"sig":"MEYCIQDwCZjTbdp2giFhGFUTHHvJI3UXYUzpHtjJ0feMLO2CSwIhAK8UgwVGqiRDie5LOLll8a5/Kx6gj/vTUL8m1AXqtJXt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145972},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230815225224.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d72ccd555737f43e3eecca9f014923f1/chakra-ui-system-0.0.0-dev-20230815225224.tgz","_integrity":"sha512-olMxeFWlJGV48Sti6b6MB7TklA9IZkZad9R1UTdal2BklCwLdGed44iT00SC8WU/vL0tE1anVmDTQrXeomYW0A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230815225224","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230815225224"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230815225224_1692139990751_0.9465346065437732","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230820153451":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230820153451","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230820153451","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"375b184c64e551e4285f476b2b2f0741ee537cf2","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230820153451.tgz","fileCount":76,"integrity":"sha512-+pk/Ia/AWSwOOXpP/wa2LnqQSwpNtyVREw52Z03pNL4cxCqYrIVAeCynQ86Gx001RlJtfgwwRPr8knG2edg3mg==","signatures":[{"sig":"MEUCIQCTyLvY9EC6KRgMoeyOSpgGK9ukLH0RNybHq1H5EZkBnQIgBhXst9dLCv9JsYZ8D0khoavHeJs6exiNNwj9qUTFMH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145972},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230820153451.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d288cb6f827fc0299765f15f321c8c41/chakra-ui-system-0.0.0-dev-20230820153451.tgz","_integrity":"sha512-+pk/Ia/AWSwOOXpP/wa2LnqQSwpNtyVREw52Z03pNL4cxCqYrIVAeCynQ86Gx001RlJtfgwwRPr8knG2edg3mg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.0","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.1","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230820153451","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.0.0","clean-package":"2.2.0","framer-motion":"^10.12.16","@emotion/react":"^11.11.0","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230820153451"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230820153451_1692545739155_0.41601399264588457","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230822131635":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230822131635","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230822131635","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"7f3377bf35bcfd5785faccea46cefedb9d991d07","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230822131635.tgz","fileCount":87,"integrity":"sha512-R7uSVHDLf4LBe9dJYOamTsOXa4cKI59n8cRHEnO6DRF4Bzejluj2dTqFF+YnGFHeI6Rl5cj9qH65pgDYn04hog==","signatures":[{"sig":"MEYCIQCyUZrYRm+PKffYWlKcA7eYfLrF57tHhl+JEamnZHDy8gIhALg9oDhMCBNtF4jDtBahTNuSs0bE/TedQbaTbnn7pM8k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155960},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230822131635.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7d7e77faecc5e0833d25f5fb3ac2aacf/chakra-ui-system-0.0.0-dev-20230822131635.tgz","_integrity":"sha512-R7uSVHDLf4LBe9dJYOamTsOXa4cKI59n8cRHEnO6DRF4Bzejluj2dTqFF+YnGFHeI6Rl5cj9qH65pgDYn04hog==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230822131635","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230822131635"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230822131635_1692710296923_0.640949483328028","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230822134434":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230822134434","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230822134434","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"0a344ae839c380739cc0f89ccc66c857019f92c4","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230822134434.tgz","fileCount":87,"integrity":"sha512-wNeaUoqWDBmX3j2g0V7Q2X4YmpbJoCUBltlnC43X9K/hd5X/4N9ExRPWE1eS4GvN7P13PkUNtLJRGfBTJWxTrw==","signatures":[{"sig":"MEUCIHdxDwFTs0OgIYZ46q0BMso465gRDPNYsk8y+X+97wTmAiEAjwp9arSNWROzv8Bk5ooTscusPS7uFSG7UIth/3RHw9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155960},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230822134434.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/25c6371382d3b2d4ca664c8baddff8bf/chakra-ui-system-0.0.0-dev-20230822134434.tgz","_integrity":"sha512-wNeaUoqWDBmX3j2g0V7Q2X4YmpbJoCUBltlnC43X9K/hd5X/4N9ExRPWE1eS4GvN7P13PkUNtLJRGfBTJWxTrw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230822134434","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230822134434"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230822134434_1692711958410_0.7662869593074657","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230830093747":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230830093747","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230830093747","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a70c2a1c9016cba1fb81258a0c9ac44062ecf92c","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230830093747.tgz","fileCount":87,"integrity":"sha512-bYLahsmgWmXjWSrwqJDh1P1wGC8/MSYIU3Eg70QUWMoKclQo19YsyNDbyb1BlIzUSj7vc3RvB0kv2tVhGSDlIQ==","signatures":[{"sig":"MEQCIGSkfUbpSbiSrr4Pjo3H9kMvKhpnVPStTw2cw63Z7GD2AiBBPO8Op2T75gOFz414ig/cUkCsY9824bNO5YjKXNN1Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155934},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230830093747.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/c9904cc3ccff53c6482008ef5c757d3c/chakra-ui-system-0.0.0-dev-20230830093747.tgz","_integrity":"sha512-bYLahsmgWmXjWSrwqJDh1P1wGC8/MSYIU3Eg70QUWMoKclQo19YsyNDbyb1BlIzUSj7vc3RvB0kv2tVhGSDlIQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230830093747","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230830093747"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230830093747_1693388351569_0.830104240704965","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230830120642":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230830120642","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230830120642","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"b9011ac8efaaf64637d3992f7e3dd2e7b024bda8","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230830120642.tgz","fileCount":87,"integrity":"sha512-blXf8AP492+XCALJTZB0EQWE4+L+JpUqqc15IzPsCiIvuc+2ruGtU+c22iNZAAwj54IYuhANXSb4rhlZl2v84A==","signatures":[{"sig":"MEYCIQDNGdBOB9WPZxThndtflmiajhrN8TXH4SD/3rNeycOWZgIhAOfEiQnE8CiboPNP6FP++4iyqWhxiN8bmKnRLqE5aLCZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155934},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230830120642.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/fd30ec26a15f92113a05c474e24e14a5/chakra-ui-system-0.0.0-dev-20230830120642.tgz","_integrity":"sha512-blXf8AP492+XCALJTZB0EQWE4+L+JpUqqc15IzPsCiIvuc+2ruGtU+c22iNZAAwj54IYuhANXSb4rhlZl2v84A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230830120642","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230830120642"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230830120642_1693397281080_0.2447049613457244","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230830133821":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230830133821","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230830133821","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"8bd0aea392a4db5dc4ebe2b8e927a2c22b183e48","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230830133821.tgz","fileCount":87,"integrity":"sha512-BVvP/Teq6+Rcv2pPdbsETQKcfQrtH4Y6/YamDnmnCghUTMf2wTRPd7kbWOO0jsuFUKQ7eft4ZJQIdvNDL+puZw==","signatures":[{"sig":"MEUCIFW3fXtHKcbzhQ6BIG4Won83oUPR6EBv5Cmn/0cOmGAHAiEApwtrwCOcHReQGozUMoQFqwnOjzEE8EQOS/dJirHTDCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155934},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230830133821.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/2f3a8425c5a497067621f0f38efa512a/chakra-ui-system-0.0.0-dev-20230830133821.tgz","_integrity":"sha512-BVvP/Teq6+Rcv2pPdbsETQKcfQrtH4Y6/YamDnmnCghUTMf2wTRPd7kbWOO0jsuFUKQ7eft4ZJQIdvNDL+puZw==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230830133821","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230830133821"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230830133821_1693402777049_0.16685948118134997","host":"s3://npm-registry-packages"}},"0.0.0-dev-20230908144305":{"name":"@chakra-ui/system","version":"0.0.0-dev-20230908144305","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20230908144305","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"abef4628098b7af71ee37b6d7373d028b71474c0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20230908144305.tgz","fileCount":87,"integrity":"sha512-WeF9iQaYHEeLcFkA2LgqFSkbcCvW5puU3kzh6cPZ/Xn6BDYFGOH14C4uIn1U2U6p2J9zVeriE8jGJLSazBJLkQ==","signatures":[{"sig":"MEMCHwCP4nXdYmQP7d9FuwdbwVnPqUpkrgnu0ozvG4Got0ICIBu0/NXLyjvbjJH5RQzHlFnt08kHwxdZffuYXTdFROeX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155934},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20230908144305.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/9934e8a58075af43504f8fc166082e96/chakra-ui-system-0.0.0-dev-20230908144305.tgz","_integrity":"sha512-WeF9iQaYHEeLcFkA2LgqFSkbcCvW5puU3kzh6cPZ/Xn6BDYFGOH14C4uIn1U2U6p2J9zVeriE8jGJLSazBJLkQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20230908144305","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20230908144305"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20230908144305_1694184263897_0.29006625593358404","host":"s3://npm-registry-packages"}},"2.6.1":{"name":"@chakra-ui/system","version":"2.6.1","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.6.1","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"22ee50ddc9e1f56b974a0dd42d86108391a2f372","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.6.1.tgz","fileCount":87,"integrity":"sha512-P5Q/XRWy3f1pXJ7IxDkV+Z6AT7GJeR2JlBnQl109xewVQcBLWWMIp702fFMFw8KZ2ALB/aYKtWm5EmQMddC/tg==","signatures":[{"sig":"MEUCIQC3J+JUsw2K+EZ/LstCOfipw8MPUh38FLQQmBnEkQTx6gIgGANP5kZu+FAizyJ0uyqwaZRjNTVK3SrH2FaR5K+rLM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155878},"main":"dist/index.js","_from":"file:chakra-ui-system-2.6.1.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/1bfaa4d63c2616bd4fe4ae56d46edf02/chakra-ui-system-2.6.1.tgz","_integrity":"sha512-P5Q/XRWy3f1pXJ7IxDkV+Z6AT7GJeR2JlBnQl109xewVQcBLWWMIp702fFMFw8KZ2ALB/aYKtWm5EmQMddC/tg==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/components/system"},"_npmVersion":"9.6.7","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.17.1","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.20","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.1"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"3.3.0"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.6.1_1694214275952_0.556707093672759","host":"s3://npm-registry-packages"}},"0.0.0-dev-20231109130949":{"name":"@chakra-ui/system","version":"0.0.0-dev-20231109130949","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20231109130949","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ed43d8b8dd1ec0484c5b646527fb007ab3ccc3ed","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20231109130949.tgz","fileCount":87,"integrity":"sha512-nazkbuRXOcpbQoJHFBxZ6i9BKTqcix49ilB7jZtqmkvnxZ7FKUYFWF7KhRnxKvQXMOBkI7DJiIzrqiVdCXvn0A==","signatures":[{"sig":"MEQCICZvN3tcWo6Ptucy2D1cuG+WtdB2BIL9u8tU+TyJyF5qAiB1m/Z4FUyBr/RbvdQDtlyyMuwbBA6huVmsAOihi5nDwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155947},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20231109130949.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/7484742d53daf4e5343ac56fce2d91aa/chakra-ui-system-0.0.0-dev-20231109130949.tgz","_integrity":"sha512-nazkbuRXOcpbQoJHFBxZ6i9BKTqcix49ilB7jZtqmkvnxZ7FKUYFWF7KhRnxKvQXMOBkI7DJiIzrqiVdCXvn0A==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/core/system"},"_npmVersion":"9.8.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20231109130949","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20231109130949"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20231109130949"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20231109130949_1699535502591_0.0389571731498739","host":"s3://npm-registry-packages"}},"0.0.0-dev-20231109134954":{"name":"@chakra-ui/system","version":"0.0.0-dev-20231109134954","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20231109134954","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"a19b847896ff60b8c07ae707d4f660c42260fcd0","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20231109134954.tgz","fileCount":87,"integrity":"sha512-sJQ2albuecNz5oQrSVM185t8yEKKHN1vM44gxYpU2/+GbLBzt9w9varLwH0QxyAKNWDjkk/swNFzvrmhAcLztA==","signatures":[{"sig":"MEQCIH5Vpebjcme18I4k6zRswP4Jkmswd21siP3h0mTKbTcfAiAbtAcZjJZHoXhjlBwThnC9Tzn2+s0S8BNS5VaWZQgNog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155947},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20231109134954.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/183ed5709d5e0d7fefb61dad5f4b21df/chakra-ui-system-0.0.0-dev-20231109134954.tgz","_integrity":"sha512-sJQ2albuecNz5oQrSVM185t8yEKKHN1vM44gxYpU2/+GbLBzt9w9varLwH0QxyAKNWDjkk/swNFzvrmhAcLztA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/core/system"},"_npmVersion":"9.8.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20231109134954","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"0.0.0-dev-20231109134954"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20231109134954"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20231109134954_1699538002819_0.5362589202811194","host":"s3://npm-registry-packages"}},"2.6.2":{"name":"@chakra-ui/system","version":"2.6.2","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@2.6.2","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"528ec955bd6a7f74da46470ee8225b1e2c80a78b","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-2.6.2.tgz","fileCount":87,"integrity":"sha512-EGtpoEjLrUu4W1fHD+a62XR+hzC5YfsWm+6lO0Kybcga3yYEij9beegO0jZgug27V+Rf7vns95VPVP6mFd/DEQ==","signatures":[{"sig":"MEYCIQCSqIQTfDekf4J6HBf1pUBoJSi7yKwwF5IBrtD/6gu08gIhANsOkC9C0gwImAltixJaMhESI9bC2SS0cAZ76qU4rFMR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155872},"main":"dist/index.js","_from":"file:chakra-ui-system-2.6.2.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/6ff52569e74f1b838bcef608a15fc9e0/chakra-ui-system-2.6.2.tgz","_integrity":"sha512-EGtpoEjLrUu4W1fHD+a62XR+hzC5YfsWm+6lO0Kybcga3yYEij9beegO0jZgug27V+Rf7vns95VPVP6mFd/DEQ==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/core/system"},"_npmVersion":"9.8.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"2.0.21","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"3.3.1"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_2.6.2_1699544705669_0.9252062193437798","host":"s3://npm-registry-packages"}},"0.0.0-dev-20231113225212":{"name":"@chakra-ui/system","version":"0.0.0-dev-20231113225212","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20231113225212","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"ef256d26aae326d0b284184b310bf729c71b22c1","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20231113225212.tgz","fileCount":87,"integrity":"sha512-l9Dh31C0z1/Y14scQBnYJaQvpkNUdk7+dIkv4ctyXoeLs6RlMzzx96ffPj2pGp8t/Q/55UrkxM9xaYGO6x6AXA==","signatures":[{"sig":"MEYCIQDA1o21onvBTRoNMYAlICQ+MbF5pHVhIIJbLcrPf048tgIhAJKWBae/EzP8IGC0ko8bFQazN1AGaWxv7u2/LpMP7wkW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155928},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20231113225212.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/0594bda9a1351e9974d7a6312ce84818/chakra-ui-system-0.0.0-dev-20231113225212.tgz","_integrity":"sha512-l9Dh31C0z1/Y14scQBnYJaQvpkNUdk7+dIkv4ctyXoeLs6RlMzzx96ffPj2pGp8t/Q/55UrkxM9xaYGO6x6AXA==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/core/system"},"_npmVersion":"9.8.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20231113225212","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20231113225212"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20231113225212_1699915986641_0.3631230806417449","host":"s3://npm-registry-packages"}},"0.0.0-dev-20231123223450":{"name":"@chakra-ui/system","version":"0.0.0-dev-20231123223450","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","_id":"@chakra-ui/system@0.0.0-dev-20231123223450","maintainers":[{"name":"segunadebayo","email":"joseshegs@gmail.com"},{"name":"_codebender828","email":"codebender828@gmail.com"}],"homepage":"https://github.com/chakra-ui/chakra-ui#readme","bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"dist":{"shasum":"6f511f47124b9af9196e1424d86e1333823bbb89","tarball":"https://registry.npmjs.org/@chakra-ui/system/-/system-0.0.0-dev-20231123223450.tgz","fileCount":87,"integrity":"sha512-OAUwtCZrzSPsYxzSV0a1wIdm1voK+q/bbe4AynEbSUsu+GX4qt5ZNMV3VfgS5x7+yQOE61+UA2tv9Gkw2Mn02Q==","signatures":[{"sig":"MEUCICIu7wMo7M+s9NEWdg5Cq2jHBArs1vc9+dJqS26uzw+JAiEAz/fTO8nDw2YZuU0k1RFv2sByG0/ikWksNtRMKSdoUWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":155928},"main":"dist/index.js","_from":"file:chakra-ui-system-0.0.0-dev-20231123223450.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","readme":"# @chakra-ui/system\n\nStyled API for creating atomic, theme-aware component styling.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/system\n\n# or\n\nnpm i @chakra-ui/system\n```\n\n## Problem\n\nIn modern web development, we have lots of solutions and architectures that have\ntried to unify how components are styled. We've seen CSS architectures like BEM,\nSMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.\n\nWhile these solutions work great, we still think there is a sheer amount of work\nrequired to create a fully customizable, theme-aware component.\n\n## Solutions\n\n### Chakra Elements\n\nChakra provides enhanced JSX elements that can be styled directly via props, or\ncan accept the common `sx` prop for custom styles.\n\nWe'll provide a chakra function, just like styled-components. Users can create\nany component using the `chakra.[element]`. The resulting component will be a\nstyled component and have all system props.\n\n```jsx\n<chakra.button bg=\"green.200\" _hover={{ bg: \"green.300\" }}>\n  Click me\n</chakra.button>\n\n<chakra.h1 fontSize=\"lg\"> Heading </chakra.h1>\n\n// create your own box\nconst Box = chakra.div\n\n// you can still use the `as` prop\n<Box as=\"h1\">This is my box</Box>\n\n// for custom components\nconst ChakraPowered = chakra(YourComponent)\n\n// TS: chakra will infer the types of Link and\n// make it available in props\n<chakra.a as={Link} to=\"/home\"> Click me</chakra.a>\n```\n\n### Chakra Component API\n\nA way to define themeable components in chakra. We believe most re-usable,\natomic components have the following modifiers:\n\n- Size: It has different size variations (small, medium, large)\n- Variant: It has different visual style (outline, solid, ghost)\n- Color scheme (Optional): For a given variant, it can have several color\n  scheme. For example, an outline button with a red color scheme.\n- Color mode (Optional): Components also change their visual styles based on the\n  user preferred color mode (light or dark)\n\nOur goal with this component API is to design a common interface to style any\ncomponent given these characteristics. Here's how it works:\n\n```jsx\n// 1. create a component schema in your theme\nconst theme = {\n  colors: {\n    green: {\n      light: \"#dfdfdf\",\n      normal: \"#dfdfdf\",\n      dark: \"#d566Df\",\n      darker: \"#dfd56f\"\n    },\n    blue: {}\n  },\n  components: {\n    Button: {\n      defaultProps: {\n        variant: \"solid\",\n        size: \"md\",\n\tcolorScheme: \"blue\"\n      },\n      variants: {\n\t// props has colorScheme, colorMode (light mode or dark mode)\n        solid: props => ({\n          bg: `${props.colorScheme}.normal`,\n          color: \"white\",\n        }),\n        outline: {\n          border: \"2px\",\n          borderColor: \"green.normal\"\n        }\n      },\n      sizes: {\n        sm: {\n          padding: 20,\n          fontSize: 12\n        },\n        md: {\n          padding: 40,\n          fontSize: 15\n        }\n      }\n    }\n  }\n};\n\n// 2. create or import Button from chakra-ui\nimport { Button } from \"@chakra-ui/react\"\n\n// or your own button\nconst Button = chakra(\"button\", { themeKey: \"Button\" })\n\n// 3. use the button. It'll have the visual props defined in defaultProps\n<Button>Click me</Button>\n\n// 4. override the defaultProps\n<Button variant=\"outline\" colorScheme=\"green\">Click me</Button>\n```\n","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm build:fast -- --watch","build":"tsup src --dts","clean":"rimraf dist .turbo","typecheck":"tsc --noEmit","build:fast":"tsup src"},"_npmUser":{"name":"segunadebayo","email":"joseshegs@gmail.com"},"_resolved":"/tmp/d6185a396c3d56e1f426ea9115776064/chakra-ui-system-0.0.0-dev-20231123223450.tgz","_integrity":"sha512-OAUwtCZrzSPsYxzSV0a1wIdm1voK+q/bbe4AynEbSUsu+GX4qt5ZNMV3VfgS5x7+yQOE61+UA2tv9Gkw2Mn02Q==","repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/core/system"},"_npmVersion":"9.8.1","description":"Chakra UI system primitives","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","dependencies":{"@chakra-ui/utils":"2.0.15","react-fast-compare":"3.2.2","@chakra-ui/color-mode":"2.2.0","@chakra-ui/react-utils":"2.0.12","@chakra-ui/theme-utils":"0.0.0-dev-20231123223450","@chakra-ui/object-utils":"2.1.0","@chakra-ui/styled-system":"2.9.2"},"clean-package":"../../../clean-package.config.json","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^18.2.0","clean-package":"2.2.0","framer-motion":"^10.16.1","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/theme":"0.0.0-dev-20231123223450"},"peerDependencies":{"react":">=18","@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/system_0.0.0-dev-20231123223450_1700778919772_0.9427061681790057","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-06-20T20:43:26.973Z","modified":"2025-08-25T12:25:26.790Z","1.0.0-next.0":"2020-06-20T20:43:27.410Z","1.0.0-next.1":"2020-06-21T09:41:38.989Z","1.0.0-next.2":"2020-06-22T15:36:24.307Z","1.0.0-next.3":"2020-06-28T16:36:07.816Z","1.0.0-next.4":"2020-07-01T17:42:58.663Z","1.0.0-next.5":"2020-07-15T10:37:12.154Z","1.0.0-next.6":"2020-07-15T15:35:35.130Z","1.0.0-next.7":"2020-07-26T12:55:52.688Z","1.0.0-rc.0":"2020-07-26T15:58:06.847Z","1.0.0-rc.1":"2020-08-06T21:15:01.333Z","1.0.0-rc.2":"2020-08-09T11:32:31.917Z","1.0.0-rc.3":"2020-08-30T15:30:36.725Z","1.0.0-rc.4":"2020-09-25T14:09:13.677Z","1.0.0-rc.5":"2020-09-27T20:27:58.525Z","1.0.0-rc.6":"2020-10-25T15:43:19.881Z","1.0.0-rc.7":"2020-10-25T21:39:07.834Z","1.0.0-rc.8":"2020-10-29T20:24:58.245Z","1.0.0":"2020-11-13T10:21:11.654Z","1.0.1":"2020-11-20T19:50:16.323Z","1.0.2":"2020-12-08T17:34:22.196Z","1.1.0":"2020-12-17T21:39:41.572Z","1.1.1":"2020-12-28T20:50:22.480Z","1.1.2":"2021-01-03T13:10:44.738Z","1.1.3":"2021-01-06T11:11:21.451Z","1.1.4":"2021-01-10T19:08:53.625Z","1.1.5":"2021-01-11T17:02:11.298Z","1.1.6":"2021-01-17T19:43:35.745Z","1.1.7":"2021-01-24T15:01:14.145Z","1.2.0":"2021-01-30T21:52:38.733Z","1.2.1":"2021-01-31T00:44:10.227Z","1.3.0":"2021-02-06T11:41:03.407Z","1.3.1":"2021-02-13T17:47:30.214Z","1.4.0":"2021-03-05T20:00:32.293Z","1.5.0":"2021-03-21T06:35:13.203Z","1.5.1":"2021-03-21T15:30:09.059Z","1.6.0":"2021-03-30T12:25:40.440Z","1.6.1":"2021-04-07T15:07:24.265Z","1.6.2":"2021-04-13T22:12:05.116Z","1.6.3":"2021-04-19T18:37:33.300Z","1.6.4":"2021-04-23T18:03:48.191Z","1.6.5":"2021-05-05T11:12:46.288Z","1.6.6":"2021-05-17T21:58:03.684Z","1.6.7":"2021-05-26T09:35:24.826Z","1.7.0":"2021-06-18T17:37:56.922Z","1.7.1":"2021-07-08T15:05:34.248Z","1.7.2-next.0":"2021-08-05T21:11:32.738Z","1.7.2":"2021-08-09T10:27:22.185Z","1.7.3":"2021-08-29T11:52:35.044Z","1.7.4":"2021-10-14T23:33:46.103Z","1.7.6":"2021-11-03T20:33:05.732Z","1.8.0":"2021-11-11T16:56:56.504Z","1.8.1":"2021-11-12T19:51:41.907Z","1.8.2":"2021-11-17T18:52:49.584Z","0.0.0-canary-2021118154929":"2021-12-08T15:50:23.476Z","0.0.0-canary-2021118164051":"2021-12-08T16:41:43.808Z","0.0.0-pr-20211191288":"2021-12-09T12:08:49.704Z","1.8.3":"2021-12-09T13:30:14.908Z","0.0.0-pr-202111921327":"2021-12-09T21:04:05.624Z","0.0.0-pr-20211113195848":"2021-12-13T19:59:20.980Z","0.0.0-pr-2021111320052":"2021-12-13T20:01:23.337Z","0.0.0-pr-2021111320117":"2021-12-13T20:11:40.600Z","0.0.0-pr-20211113201444":"2021-12-13T20:15:21.779Z","0.0.0-pr-20211113202333":"2021-12-13T20:24:05.252Z","0.0.0-dev-20211115102948":"2021-12-15T10:30:27.033Z","0.0.0-dev-20211115103018":"2021-12-15T10:30:58.156Z","0.0.0-pr-20211115103050":"2021-12-15T10:31:36.138Z","0.0.0-dev-20211115103321":"2021-12-15T10:34:04.129Z","0.0.0-dev-2021111913282":"2021-12-19T13:28:46.275Z","0.0.0-dev-2021112024830":"2021-12-20T02:49:08.398Z","0.0.0-dev-2021112031456":"2021-12-20T03:15:38.267Z","0.0.0-dev-2021112031622":"2021-12-20T03:17:05.717Z","0.0.0-pr-20211120212826":"2021-12-20T21:29:07.016Z","0.0.0-pr-20211120212927":"2021-12-20T21:30:05.481Z","0.0.0-pr-20211120213315":"2021-12-20T21:33:52.581Z","0.0.0-pr-20211120214314":"2021-12-20T21:43:55.287Z","0.0.0-dev-20211120215621":"2021-12-20T21:57:06.331Z","0.0.0-pr-20211120215645":"2021-12-20T21:57:36.047Z","0.0.0-pr-20211126151058":"2021-12-26T15:11:39.623Z","0.0.0-pr-20211126153437":"2021-12-26T15:35:24.114Z","0.0.0-pr-20211126153854":"2021-12-26T15:39:41.741Z","0.0.0-dev-20211126154241":"2021-12-26T15:43:28.728Z","0.0.0-pr-20211126155055":"2021-12-26T15:51:33.760Z","0.0.0-pr-2021112616030":"2021-12-26T16:01:16.321Z","0.0.0-pr-2021112821613":"2021-12-28T21:07:00.394Z","0.0.0-pr-20211128215540":"2021-12-28T21:56:22.739Z","0.0.0-pr-2021112822349":"2021-12-28T22:04:35.405Z","0.0.0-pr-2021112822415":"2021-12-28T22:04:57.461Z","0.0.0-pr-202111299618":"2021-12-29T09:07:06.598Z","0.0.0-pr-202111299647":"2021-12-29T09:07:29.457Z","0.0.0-dev-202111299720":"2021-12-29T09:08:09.549Z","0.0.0-dev-20211129982":"2021-12-29T09:08:53.273Z","0.0.0-pr-20211129981":"2021-12-29T09:08:58.857Z","0.0.0-pr-2021112991213":"2021-12-29T09:13:03.152Z","0.0.0-dev-2021112991233":"2021-12-29T09:13:20.921Z","0.0.0-dev-20220114234":"2022-01-01T01:43:20.851Z","0.0.0-dev-20220114728":"2022-01-01T01:48:18.312Z","0.0.0-dev-202201134936":"2022-01-01T13:50:21.407Z","0.0.0-dev-20220281628":"2022-01-02T08:17:17.431Z","0.0.0-dev-20220282224":"2022-01-02T08:23:08.021Z","0.0.0-pr-2022028241":"2022-01-02T08:24:45.413Z","0.0.0-pr-2022028277":"2022-01-02T08:27:47.542Z","0.0.0-dev-2022028387":"2022-01-02T08:38:55.464Z","0.0.0-dev-2022028457":"2022-01-02T08:45:46.930Z","0.0.0-pr-20220284534":"2022-01-02T08:46:17.074Z","0.0.0-dev-2022028579":"2022-01-02T08:57:56.676Z","0.0.0-pr-202203225541":"2022-01-03T22:56:30.699Z","0.0.0-pr-202203231241":"2022-01-03T23:13:26.106Z","0.0.0-pr-20220483049":"2022-01-04T08:31:44.874Z","0.0.0-pr-202204173424":"2022-01-04T17:35:05.505Z","0.0.0-pr-202204174042":"2022-01-04T17:41:29.082Z","0.0.0-pr-202204174930":"2022-01-04T17:50:19.844Z","1.9.0":"2022-01-04T20:36:28.305Z","0.0.0-pr-202204203645":"2022-01-04T20:37:32.145Z","0.0.0-pr-20220421928":"2022-01-04T21:10:10.369Z","0.0.0-pr-202206185910":"2022-01-06T19:00:09.511Z","0.0.0-pr-202206192031":"2022-01-06T19:21:18.274Z","0.0.0-pr-20220620149":"2022-01-06T20:02:34.041Z","0.0.0-dev-20220620653":"2022-01-06T20:07:34.177Z","0.0.0-pr-2022062070":"2022-01-06T20:07:47.059Z","0.0.0-pr-202208163634":"2022-01-08T16:37:23.288Z","0.0.0-pr-20220816386":"2022-01-08T16:38:54.632Z","0.0.0-pr-202208164521":"2022-01-08T16:46:13.444Z","0.0.0-pr-202209205059":"2022-01-09T20:51:38.948Z","0.0.0-pr-20220920538":"2022-01-09T20:53:49.225Z","1.9.1":"2022-01-09T20:57:39.949Z","0.0.0-pr-202209211330":"2022-01-09T21:14:13.479Z","0.0.0-pr-20220921590":"2022-01-09T21:59:36.690Z","0.0.0-pr-202209231642":"2022-01-09T23:17:20.747Z","0.0.0-pr-202209231818":"2022-01-09T23:18:59.577Z","0.0.0-pr-202209231927":"2022-01-09T23:20:10.214Z","0.0.0-pr-2022010134944":"2022-01-10T13:50:19.086Z","0.0.0-dev-202201013510":"2022-01-10T13:51:46.444Z","0.0.0-pr-202201013538":"2022-01-10T13:53:44.291Z","0.0.0-dev-202201117413":"2022-01-11T17:41:37.799Z","0.0.0-pr-2022011175644":"2022-01-11T17:57:23.124Z","0.0.0-pr-2022011182024":"2022-01-11T18:21:06.545Z","0.0.0-dev-2022013185957":"2022-01-13T19:00:37.338Z","0.0.0-pr-202201319022":"2022-01-13T19:01:02.064Z","0.0.0-dev-202201319130":"2022-01-13T19:02:07.700Z","0.0.0-pr-202201319211":"2022-01-13T19:03:03.703Z","0.0.0-pr-2022013191557":"2022-01-13T19:16:32.880Z","0.0.0-pr-2022013191627":"2022-01-13T19:17:05.517Z","0.0.0-pr-2022013191632":"2022-01-13T19:17:17.178Z","0.0.0-pr-2022013191659":"2022-01-13T19:17:39.842Z","0.0.0-pr-2022013192043":"2022-01-13T19:21:32.223Z","0.0.0-dev-2022013193154":"2022-01-13T19:32:33.030Z","0.0.0-dev-2022013193526":"2022-01-13T19:36:11.081Z","0.0.0-pr-2022014102532":"2022-01-14T10:26:13.320Z","0.0.0-dev-202201418849":"2022-01-14T18:09:33.067Z","0.0.0-pr-202201418280":"2022-01-14T18:28:49.673Z","0.0.0-pr-2022014183133":"2022-01-14T18:32:26.259Z","0.0.0-pr-2022017182645":"2022-01-17T18:27:23.481Z","0.0.0-dev-2022017182859":"2022-01-17T18:29:44.437Z","0.0.0-dev-20220209527":"2022-01-20T09:06:10.653Z","0.0.0-pr-2022020961":"2022-01-20T09:06:58.100Z","0.0.0-pr-20220209192":"2022-01-20T09:19:55.075Z","0.0.0-pr-202202092345":"2022-01-20T09:24:33.514Z","0.0.0-pr-202202495259":"2022-01-24T09:53:52.544Z","0.0.0-pr-202202495536":"2022-01-24T09:56:31.023Z","0.0.0-pr-202202495553":"2022-01-24T09:56:40.966Z","0.0.0-dev-202202495727":"2022-01-24T09:58:20.319Z","0.0.0-dev-202202410017":"2022-01-24T10:01:03.851Z","0.0.0-pr-202202410034":"2022-01-24T10:01:27.336Z","0.0.0-pr-2022024212254":"2022-01-24T21:23:42.043Z","0.0.0-pr-202202423375":"2022-01-24T23:37:48.573Z","0.0.0-pr-2022024234531":"2022-01-24T23:46:19.323Z","0.0.0-dev-20220258423":"2022-01-25T08:42:53.946Z","0.0.0-pr-202202584437":"2022-01-25T08:45:28.484Z","0.0.0-pr-20220258462":"2022-01-25T08:46:46.553Z","0.0.0-dev-20220258486":"2022-01-25T08:48:59.049Z","0.0.0-dev-202202585455":"2022-01-25T08:55:38.589Z","0.0.0-pr-20220259146":"2022-01-25T09:14:51.397Z","0.0.0-dev-202202591453":"2022-01-25T09:15:44.394Z","0.0.0-dev-202202591937":"2022-01-25T09:20:26.510Z","0.0.0-dev-202202592640":"2022-01-25T09:27:34.922Z","0.0.0-pr-20220251866":"2022-01-25T18:06:52.397Z","1.10.0":"2022-01-25T18:07:32.962Z","0.0.0-pr-2022026181758":"2022-01-26T18:18:42.800Z","0.0.0-pr-2022026182926":"2022-01-26T18:30:07.058Z","0.0.0-dev-2022026182947":"2022-01-26T18:30:25.576Z","0.0.0-pr-202202618407":"2022-01-26T18:40:41.148Z","1.10.1":"2022-01-26T18:47:32.079Z","0.0.0-pr-20220300344":"2022-01-30T00:04:21.236Z","0.0.0-dev-20221152957":"2022-02-01T05:30:40.068Z","0.0.0-pr-20221153122":"2022-02-01T05:32:01.847Z","1.10.2":"2022-02-01T05:34:57.219Z","0.0.0-pr-20221173228":"2022-02-01T07:33:07.350Z","0.0.0-pr-20221173648":"2022-02-01T07:37:35.556Z","0.0.0-pr-202211224055":"2022-02-01T22:41:32.195Z","0.0.0-pr-202211224227":"2022-02-01T22:43:08.541Z","0.0.0-pr-20221263638":"2022-02-02T06:37:30.717Z","0.0.0-pr-20221263715":"2022-02-02T06:37:57.431Z","0.0.0-pr-20221272130":"2022-02-02T07:22:17.741Z","0.0.0-pr-20221272450":"2022-02-02T07:25:37.949Z","0.0.0-dev-202213175727":"2022-02-03T17:58:10.088Z","0.0.0-pr-20221462931":"2022-02-04T06:30:28.665Z","0.0.0-dev-20221463045":"2022-02-04T06:31:39.049Z","0.0.0-pr-202214171317":"2022-02-04T17:14:12.603Z","0.0.0-pr-202214173019":"2022-02-04T17:31:06.986Z","0.0.0-pr-20221417318":"2022-02-04T17:32:02.018Z","0.0.0-pr-202214173148":"2022-02-04T17:32:38.118Z","0.0.0-pr-202215111823":"2022-02-05T11:19:15.329Z","0.0.0-dev-202215111945":"2022-02-05T11:20:39.095Z","0.0.0-dev-202215112739":"2022-02-05T11:28:23.545Z","0.0.0-pr-202215113521":"2022-02-05T11:36:05.533Z","0.0.0-pr-202215113950":"2022-02-05T11:40:42.030Z","0.0.0-dev-202215114149":"2022-02-05T11:42:43.974Z","0.0.0-pr-202215114422":"2022-02-05T11:45:08.568Z","0.0.0-dev-202215114442":"2022-02-05T11:45:34.729Z","0.0.0-pr-202215114917":"2022-02-05T11:50:13.637Z","0.0.0-pr-20221512346":"2022-02-05T12:04:35.932Z","0.0.0-pr-20221512130":"2022-02-05T12:13:47.388Z","0.0.0-pr-202215121320":"2022-02-05T12:14:06.651Z","0.0.0-dev-202215121353":"2022-02-05T12:14:35.879Z","0.0.0-dev-202215121428":"2022-02-05T12:15:08.550Z","0.0.0-dev-20221512173":"2022-02-05T12:17:46.155Z","0.0.0-dev-202215122415":"2022-02-05T12:25:05.544Z","0.0.0-pr-20221512359":"2022-02-05T12:35:55.698Z","0.0.0-pr-202215125733":"2022-02-05T12:58:22.706Z","0.0.0-pr-202215132532":"2022-02-05T13:26:18.556Z","0.0.0-dev-20221513279":"2022-02-05T13:28:03.933Z","1.10.3":"2022-02-05T13:36:35.492Z","0.0.0-pr-2022114224724":"2022-02-14T22:48:21.347Z","0.0.0-pr-202211594731":"2022-02-15T09:48:16.123Z","0.0.0-dev-2022117131714":"2022-02-17T13:17:50.884Z","0.0.0-pr-202211713187":"2022-02-17T13:18:51.140Z","1.10.4":"2022-02-17T13:22:10.692Z","0.0.0-dev-202211720414":"2022-02-17T20:04:52.384Z","0.0.0-dev-2022117201925":"2022-02-17T20:20:14.032Z","0.0.0-dev-2022117203714":"2022-02-17T20:37:58.933Z","0.0.0-dev-202212083710":"2022-02-20T08:38:10.877Z","0.0.0-pr-202212011232":"2022-02-20T11:03:21.733Z","0.0.0-dev-2022120113958":"2022-02-20T11:40:40.492Z","0.0.0-dev-2022120114012":"2022-02-20T11:40:48.915Z","0.0.0-dev-2022120114225":"2022-02-20T11:43:10.934Z","0.0.0-dev-202212012129":"2022-02-20T12:12:52.177Z","1.11.0":"2022-02-20T12:22:09.334Z","0.0.0-dev-2022120123118":"2022-02-20T12:32:13.589Z","1.11.1":"2022-02-20T12:41:13.317Z","0.0.0-dev-2022128214753":"2022-02-28T21:48:31.320Z","0.0.0-dev-2022128215052":"2022-02-28T21:51:25.403Z","0.0.0-dev-202212821520":"2022-02-28T21:52:33.731Z","0.0.0-dev-202212822477":"2022-02-28T22:47:43.256Z","0.0.0-dev-2022128224832":"2022-02-28T22:49:07.879Z","1.11.2":"2022-02-28T23:07:19.017Z","0.0.0-dev-202221417325":"2022-03-14T17:04:19.059Z","0.0.0-dev-202221417436":"2022-03-14T17:05:14.104Z","0.0.0-dev-2022214171014":"2022-03-14T17:11:36.188Z","0.0.0-dev-2022214195434":"2022-03-14T19:55:11.261Z","0.0.0-dev-2022214195653":"2022-03-14T19:57:25.670Z","0.0.0-dev-202221419595":"2022-03-14T19:59:47.477Z","0.0.0-dev-2022215181125":"2022-03-15T18:12:01.708Z","0.0.0-dev-2022215182043":"2022-03-15T18:21:30.823Z","0.0.0-dev-2022215183938":"2022-03-15T18:40:36.408Z","0.0.0-dev-2022215184036":"2022-03-15T18:41:14.102Z","0.0.0-dev-2022225182931":"2022-03-25T18:30:05.650Z","1.12.0":"2022-03-27T11:35:25.842Z","0.0.0-dev-2022228155140":"2022-03-28T15:52:25.860Z","0.0.0-dev-20223215463":"2022-04-02T15:46:38.236Z","0.0.0-dev-2022349032":"2022-04-04T09:01:16.283Z","0.0.0-dev-2022349233":"2022-04-04T09:03:19.280Z","0.0.0-dev-2022349957":"2022-04-04T09:10:29.309Z","0.0.0-dev-20223491859":"2022-04-04T09:19:46.675Z","0.0.0-dev-20223655213":"2022-04-06T05:52:48.639Z","0.0.0-dev-202236131344":"2022-04-06T13:14:27.133Z","0.0.0-dev-202236132312":"2022-04-06T13:23:47.926Z","0.0.0-dev-20223614103":"2022-04-06T14:10:41.742Z","0.0.0-dev-202236141416":"2022-04-06T14:14:52.454Z","1.12.1":"2022-04-07T15:34:36.723Z","2.0.0-next.0":"2022-04-15T15:22:29.342Z","2.0.0-next.1":"2022-04-22T06:05:35.233Z","2.0.0-next.2":"2022-05-05T08:21:04.428Z","2.0.0-next.3":"2022-05-05T18:21:12.361Z","2.0.0-next.4":"2022-05-09T08:41:17.940Z","2.0.0":"2022-05-12T17:52:21.210Z","0.0.0-next-dev-202241614737":"2022-05-16T14:08:12.491Z","0.0.0-dev-202241614743":"2022-05-16T14:08:17.456Z","0.0.0-dev-2022416204849":"2022-05-16T20:49:20.559Z","0.0.0-dev-202241784047":"2022-05-17T08:41:25.425Z","0.0.0-dev-202241794553":"2022-05-17T09:46:22.714Z","0.0.0-dev-202241710143":"2022-05-17T10:02:24.307Z","0.0.0-dev-202241710959":"2022-05-17T10:10:35.269Z","2.0.1":"2022-05-17T16:26:07.675Z","0.0.0-dev-202241716586":"2022-05-17T16:58:35.729Z","2.0.2":"2022-05-17T17:14:08.848Z","0.0.0-dev-2022419101754":"2022-05-19T10:18:34.107Z","0.0.0-dev-2022419173934":"2022-05-19T17:40:19.210Z","0.0.0-dev-2022419174740":"2022-05-19T17:48:18.710Z","0.0.0-dev-20224205231":"2022-05-20T05:23:46.303Z","0.0.0-dev-2022421153722":"2022-05-21T15:38:03.667Z","0.0.0-dev-202242121518":"2022-05-21T21:05:58.981Z","2.1.0":"2022-05-22T05:41:29.841Z","0.0.0-dev-20224239149":"2022-05-23T09:02:30.510Z","0.0.0-dev-2022423113827":"2022-05-23T11:38:58.568Z","0.0.0-dev-2022423121532":"2022-05-23T12:16:14.382Z","0.0.0-dev-2022423121615":"2022-05-23T12:16:55.928Z","0.0.0-dev-20224248246":"2022-05-24T08:03:26.278Z","0.0.0-dev-20224248516":"2022-05-24T08:05:54.952Z","0.0.0-dev-202242481651":"2022-05-24T08:17:37.616Z","2.1.1":"2022-05-24T12:28:22.178Z","0.0.0-dev-202255105723":"2022-06-05T10:58:10.155Z","0.0.0-dev-20225517307":"2022-06-05T17:30:55.212Z","0.0.0-dev-202255185818":"2022-06-05T18:58:56.554Z","0.0.0-dev-2022551939":"2022-06-05T19:03:44.164Z","0.0.0-dev-202256151938":"2022-06-06T15:20:18.339Z","0.0.0-dev-202256153840":"2022-06-06T15:39:41.497Z","0.0.0-dev-20225619634":"2022-06-06T19:07:13.532Z","0.0.0-dev-202256192154":"2022-06-06T19:22:45.164Z","2.1.2":"2022-06-06T20:41:39.620Z","0.0.0-dev-202257113227":"2022-06-07T11:33:00.536Z","0.0.0-dev-202257113310":"2022-06-07T11:33:41.019Z","2.1.3":"2022-06-07T12:13:35.734Z","0.0.0-dev-2022587541":"2022-06-08T07:06:30.226Z","0.0.0-dev-2022511155212":"2022-06-11T15:52:52.797Z","0.0.0-dev-2022511155356":"2022-06-11T15:54:35.526Z","0.0.0-dev-2022511155428":"2022-06-11T15:55:14.710Z","0.0.0-dev-2022513181240":"2022-06-13T18:13:17.951Z","0.0.0-dev-2022515163532":"2022-06-15T16:36:10.938Z","0.0.0-dev-2022516122241":"2022-06-16T12:23:19.947Z","0.0.0-dev-2022516151633":"2022-06-16T15:17:12.299Z","0.0.0-dev-202251616831":"2022-06-16T16:09:15.991Z","0.0.0-dev-2022518113258":"2022-06-18T11:33:37.872Z","0.0.0-dev-2022520143145":"2022-06-20T14:32:21.426Z","0.0.0-dev-2022520163758":"2022-06-20T16:38:54.690Z","0.0.0-dev-2022520164715":"2022-06-20T16:48:00.466Z","0.0.0-dev-2022520164752":"2022-06-20T16:48:36.067Z","2.2.0":"2022-06-21T07:47:59.718Z","0.0.0-dev-202264144818":"2022-07-04T14:49:14.527Z","0.0.0-dev-2022659325":"2022-07-05T09:04:03.257Z","0.0.0-dev-2022659431":"2022-07-05T09:05:11.289Z","0.0.0-dev-2022669710":"2022-07-06T09:08:01.615Z","0.0.0-dev-202268163535":"2022-07-08T16:36:26.127Z","0.0.0-dev-202268165050":"2022-07-08T16:51:29.043Z","0.0.0-dev-2022610103716":"2022-07-10T10:37:56.844Z","0.0.0-dev-2022610103924":"2022-07-10T10:40:06.938Z","2.2.1":"2022-07-10T10:57:21.154Z","0.0.0-dev-2022612222012":"2022-07-12T22:20:58.161Z","0.0.0-dev-202261316456":"2022-07-13T16:45:45.625Z","0.0.0-dev-202261317818":"2022-07-13T17:09:01.098Z","2.2.2":"2022-07-13T18:44:14.841Z","2.2.3":"2022-07-25T05:10:55.135Z","0.0.0-dev-20220804193103":"2022-08-04T19:33:15.984Z","0.0.0-dev-20220804193815":"2022-08-04T19:39:03.023Z","0.0.0-dev-20220804194739":"2022-08-04T19:49:10.546Z","0.0.0-dev-20220804200605":"2022-08-04T20:07:39.307Z","0.0.0-dev-20220805062318":"2022-08-05T06:24:43.019Z","2.2.4":"2022-08-05T10:13:19.405Z","0.0.0-dev-20220808075419":"2022-08-08T07:54:57.357Z","0.0.0-dev-20220808090501":"2022-08-08T09:05:32.023Z","0.0.0-dev-20220810053106":"2022-08-10T05:31:35.538Z","0.0.0-dev-20220810112922":"2022-08-10T11:30:13.533Z","0.0.0-dev-20220810121727":"2022-08-10T12:18:26.152Z","0.0.0-dev-20220810122556":"2022-08-10T12:26:49.390Z","0.0.0-dev-20220810124358":"2022-08-10T12:45:11.847Z","0.0.0-dev-20220810132240":"2022-08-10T13:23:34.398Z","0.0.0-dev-20220811084042":"2022-08-11T08:41:59.240Z","0.0.0-dev-20220811093515":"2022-08-11T09:36:25.181Z","0.0.0-dev-20220811160709":"2022-08-11T16:08:32.875Z","0.0.0-dev-20220812060931":"2022-08-12T06:10:49.816Z","0.0.0-dev-20220813051625":"2022-08-13T05:17:42.453Z","0.0.0-dev-20220813052715":"2022-08-13T05:28:33.372Z","0.0.0-dev-20220813053727":"2022-08-13T05:38:55.354Z","0.0.0-dev-20220813055957":"2022-08-13T06:01:14.742Z","0.0.0-dev-20220813063717":"2022-08-13T06:38:27.700Z","0.0.0-dev-20220813070741":"2022-08-13T07:08:54.502Z","0.0.0-dev-20220813083358":"2022-08-13T08:35:13.993Z","2.2.5":"2022-08-13T10:50:29.028Z","2.2.6":"2022-08-14T07:11:10.992Z","0.0.0-dev-20220819115812":"2022-08-19T11:59:20.309Z","0.0.0-dev-20220819125800":"2022-08-19T12:59:16.384Z","0.0.0-dev-20220819132034":"2022-08-19T13:21:38.033Z","0.0.0-dev-20220819142048":"2022-08-19T14:21:46.436Z","0.0.0-dev-20220819143632":"2022-08-19T14:37:40.597Z","0.0.0-dev-20220819191103":"2022-08-19T19:12:12.524Z","0.0.0-dev-20220820120308":"2022-08-20T12:04:06.108Z","0.0.0-dev-20220820124231":"2022-08-20T12:44:04.411Z","0.0.0-dev-20220820152257":"2022-08-20T15:24:34.476Z","0.0.0-dev-20220820165925":"2022-08-20T17:00:45.696Z","0.0.0-dev-20220820172220":"2022-08-20T17:23:48.396Z","0.0.0-dev-20220820173639":"2022-08-20T17:37:57.703Z","0.0.0-dev-20220820185458":"2022-08-20T18:56:19.126Z","0.0.0-dev-20220820193723":"2022-08-20T19:38:43.893Z","0.0.0-dev-20220820195548":"2022-08-20T19:57:09.335Z","0.0.0-dev-20220822051456":"2022-08-22T05:16:23.346Z","0.0.0-dev-20220822054045":"2022-08-22T05:42:07.737Z","0.0.0-dev-20220822055339":"2022-08-22T05:55:23.274Z","0.0.0-dev-20220822103611":"2022-08-22T10:37:46.134Z","0.0.0-dev-20220822184448":"2022-08-22T18:46:29.217Z","0.0.0-dev-20220823150801":"2022-08-23T15:09:25.568Z","0.0.0-dev-20220823165602":"2022-08-23T16:57:26.464Z","0.0.0-dev-20220823192757":"2022-08-23T19:29:44.661Z","0.0.0-dev-20220823195046":"2022-08-23T19:52:49.895Z","0.0.0-dev-20220824074122":"2022-08-24T07:42:44.627Z","0.0.0-dev-20220824080240":"2022-08-24T08:04:02.785Z","0.0.0-dev-20220824082222":"2022-08-24T08:24:26.116Z","2.2.7":"2022-08-24T08:47:18.956Z","0.0.0-dev-20220824162915":"2022-08-24T16:29:52.939Z","0.0.0-dev-20220824171723":"2022-08-24T17:17:58.876Z","0.0.0-dev-20220824172609":"2022-08-24T17:26:50.897Z","0.0.0-dev-20220825104203":"2022-08-25T10:42:40.173Z","0.0.0-dev-20220825152811":"2022-08-25T15:28:46.718Z","0.0.0-dev-20220826102505":"2022-08-26T10:25:41.994Z","0.0.0-dev-20220826104406":"2022-08-26T10:44:49.512Z","0.0.0-dev-20220826105339":"2022-08-26T10:54:23.562Z","0.0.0-dev-20220826112743":"2022-08-26T11:28:33.762Z","0.0.0-dev-20220826121619":"2022-08-26T12:16:56.962Z","0.0.0-dev-20220826124049":"2022-08-26T12:41:39.902Z","0.0.0-dev-20220826130746":"2022-08-26T13:08:30.375Z","0.0.0-dev-20220826154141":"2022-08-26T15:42:28.949Z","0.0.0-dev-20220829120312":"2022-08-29T12:04:11.996Z","0.0.0-dev-20220829121234":"2022-08-29T12:13:21.641Z","0.0.0-dev-20220829143113":"2022-08-29T14:31:59.867Z","2.2.8":"2022-08-29T15:15:23.878Z","0.0.0-dev-20220829184325":"2022-08-29T18:44:06.643Z","2.2.9":"2022-08-29T19:00:55.645Z","0.0.0-dev-20220909074555":"2022-09-09T07:46:33.242Z","0.0.0-dev-20220909120637":"2022-09-09T12:07:16.110Z","0.0.0-dev-20220909123132":"2022-09-09T12:32:13.326Z","0.0.0-dev-20220909123934":"2022-09-09T12:40:12.821Z","0.0.0-dev-20220912120959":"2022-09-12T12:11:13.231Z","0.0.0-dev-20220912132201":"2022-09-12T13:23:07.232Z","0.0.0-dev-20220912133211":"2022-09-12T13:33:27.672Z","0.0.0-dev-20220914090509":"2022-09-14T09:06:33.273Z","0.0.0-dev-20220914105014":"2022-09-14T10:51:19.889Z","0.0.0-dev-20220916140800":"2022-09-16T14:08:58.321Z","0.0.0-dev-20220916141616":"2022-09-16T14:17:18.750Z","0.0.0-dev-20220916144141":"2022-09-16T14:42:51.054Z","0.0.0-dev-20220916164745":"2022-09-16T16:48:54.221Z","0.0.0-dev-20220919061024":"2022-09-19T06:11:33.089Z","2.2.10":"2022-09-19T07:37:30.214Z","0.0.0-dev-20220919112019":"2022-09-19T11:21:03.337Z","0.0.0-dev-20220919112936":"2022-09-19T11:30:16.886Z","0.0.0-dev-20220919124959":"2022-09-19T12:50:33.873Z","0.0.0-dev-20220919131546":"2022-09-19T13:16:21.128Z","2.2.11":"2022-09-19T13:31:23.213Z","0.0.0-dev-20220920121057":"2022-09-20T12:12:18.201Z","0.0.0-dev-20220921093814":"2022-09-21T09:40:01.549Z","0.0.0-dev-20220922114557":"2022-09-22T11:47:11.213Z","0.0.0-dev-20220922115811":"2022-09-22T11:59:38.373Z","0.0.0-dev-20220926164115":"2022-09-26T16:43:01.733Z","0.0.0-dev-20220926165450":"2022-09-26T16:56:02.715Z","0.0.0-dev-20220929105632":"2022-09-29T10:57:54.880Z","0.0.0-dev-20220929132459":"2022-09-29T13:26:33.660Z","2.2.12":"2022-10-03T09:12:56.652Z","0.0.0-dev-20221017063840":"2022-10-17T06:39:35.455Z","2.3.0":"2022-10-17T07:22:40.253Z","0.0.0-dev-20221022080845":"2022-10-22T08:09:26.587Z","0.0.0-dev-20221023160600":"2022-10-23T16:06:40.305Z","0.0.0-dev-20221023161857":"2022-10-23T16:19:35.094Z","0.0.0-dev-20221023171601":"2022-10-23T17:16:38.012Z","0.0.0-dev-20221027040551":"2022-10-27T04:06:29.057Z","0.0.0-dev-20221027041741":"2022-10-27T04:18:16.927Z","0.0.0-dev-20221031131135":"2022-10-31T13:12:15.306Z","0.0.0-dev-20221101182032":"2022-11-01T18:21:17.891Z","0.0.0-dev-20221101183810":"2022-11-01T18:39:00.045Z","0.0.0-dev-20221102123311":"2022-11-02T12:34:02.465Z","0.0.0-dev-20221102124227":"2022-11-02T12:42:55.817Z","0.0.0-dev-20221102143239":"2022-11-02T14:33:18.383Z","0.0.0-dev-20221102152926":"2022-11-02T15:30:05.341Z","2.3.1":"2022-11-02T16:35:37.548Z","0.0.0-dev-20221107161407":"2022-11-07T16:15:48.187Z","0.0.0-dev-20221107181117":"2022-11-07T18:12:37.864Z","0.0.0-dev-20221107182607":"2022-11-07T18:27:27.921Z","0.0.0-dev-20221108071844":"2022-11-08T07:20:01.729Z","0.0.0-dev-20221108073543":"2022-11-08T07:37:11.336Z","0.0.0-dev-20221108075029":"2022-11-08T07:52:04.152Z","0.0.0-dev-20221108083411":"2022-11-08T08:35:21.057Z","0.0.0-dev-20221108090938":"2022-11-08T09:11:08.993Z","0.0.0-dev-20221108093520":"2022-11-08T09:37:02.466Z","0.0.0-dev-20221108100218":"2022-11-08T10:04:01.236Z","0.0.0-dev-20221108124603":"2022-11-08T12:47:16.391Z","2.3.2":"2022-11-14T11:53:27.520Z","0.0.0-dev-20221114152429":"2022-11-14T15:25:09.242Z","0.0.0-dev-20221114161632":"2022-11-14T16:17:07.744Z","2.3.3":"2022-11-14T16:56:02.392Z","0.0.0-dev-20221116103758":"2022-11-16T10:39:04.711Z","0.0.0-dev-20221116105413":"2022-11-16T10:55:17.932Z","0.0.0-dev-20221117065458":"2022-11-17T06:56:04.167Z","0.0.0-dev-20221117150258":"2022-11-17T15:04:21.882Z","0.0.0-dev-20221122115819":"2022-11-22T11:59:15.088Z","0.0.0-dev-20221122135803":"2022-11-22T13:59:13.187Z","0.0.0-dev-20221123123308":"2022-11-23T12:34:25.309Z","0.0.0-dev-20221123130515":"2022-11-23T13:06:18.497Z","0.0.0-dev-20221124103928":"2022-11-24T10:40:35.067Z","0.0.0-dev-20221124105520":"2022-11-24T10:56:30.561Z","0.0.0-dev-20221128164126":"2022-11-28T16:42:31.260Z","0.0.0-dev-20221128182021":"2022-11-28T18:21:48.036Z","0.0.0-dev-20221128183433":"2022-11-28T18:35:39.595Z","0.0.0-dev-20221128185230":"2022-11-28T18:53:32.553Z","2.3.4":"2022-11-29T06:12:35.283Z","0.0.0-dev-20221216155214":"2022-12-16T15:52:58.135Z","0.0.0-dev-20221216193340":"2022-12-16T19:34:30.837Z","2.3.5":"2022-12-16T20:11:31.842Z","0.0.0-dev-20221221102614":"2022-12-21T10:26:58.714Z","0.0.0-dev-20221221104434":"2022-12-21T10:45:24.900Z","0.0.0-dev-20221221110721":"2022-12-21T11:08:24.707Z","0.0.0-dev-20221221133224":"2022-12-21T13:33:21.246Z","0.0.0-dev-20221221152939":"2022-12-21T15:30:34.714Z","0.0.0-dev-20221222051548":"2022-12-22T05:16:48.711Z","0.0.0-dev-20221223180742":"2022-12-23T18:09:10.576Z","2.3.6":"2022-12-26T13:14:21.880Z","0.0.0-dev-20221228075207":"2022-12-28T07:52:54.532Z","0.0.0-dev-20221228081854":"2022-12-28T08:19:35.252Z","0.0.0-dev-20221228093251":"2022-12-28T09:33:30.010Z","0.0.0-dev-20221229141945":"2022-12-29T14:20:24.517Z","0.0.0-dev-20221229143302":"2022-12-29T14:33:44.827Z","0.0.0-dev-20221229200356":"2022-12-29T20:04:38.922Z","0.0.0-dev-20221229202029":"2022-12-29T20:21:08.536Z","0.0.0-dev-20221229203627":"2022-12-29T20:37:22.994Z","0.0.0-dev-20221229212737":"2022-12-29T21:28:22.151Z","2.3.7":"2022-12-29T22:07:05.118Z","0.0.0-dev-20230102093714":"2023-01-02T09:38:02.330Z","0.0.0-dev-20230102095417":"2023-01-02T09:54:59.296Z","0.0.0-dev-20230106083209":"2023-01-06T08:33:23.166Z","0.0.0-dev-20230111055325":"2023-01-11T05:54:39.680Z","2.3.8":"2023-01-11T07:31:52.495Z","0.0.0-dev-20230111211417":"2023-01-11T21:15:48.314Z","0.0.0-dev-20230112113621":"2023-01-12T11:38:05.760Z","0.0.0-dev-20230112141201":"2023-01-12T14:14:02.996Z","0.0.0-dev-20230112143332":"2023-01-12T14:35:29.311Z","0.0.0-dev-20230112145104":"2023-01-12T14:52:33.885Z","0.0.0-dev-20230112152756":"2023-01-12T15:29:45.152Z","0.0.0-dev-20230112154520":"2023-01-12T15:46:57.532Z","2.4.0":"2023-01-12T16:06:22.629Z","0.0.0-dev-20230206132511":"2023-02-06T13:26:02.865Z","0.0.0-dev-20230206134100":"2023-02-06T13:41:41.874Z","0.0.0-dev-20230206135638":"2023-02-06T13:57:18.709Z","0.0.0-dev-20230206142400":"2023-02-06T14:24:49.983Z","0.0.0-dev-20230206143950":"2023-02-06T14:40:30.673Z","0.0.0-dev-20230206161237":"2023-02-06T16:13:19.676Z","0.0.0-dev-20230206162801":"2023-02-06T16:28:41.549Z","0.0.0-dev-20230207150933":"2023-02-07T15:10:13.499Z","0.0.0-dev-20230207153012":"2023-02-07T15:31:15.397Z","0.0.0-dev-20230208112929":"2023-02-08T11:30:31.469Z","0.0.0-dev-20230208114919":"2023-02-08T11:50:17.887Z","0.0.0-dev-20230213123249":"2023-02-13T12:33:43.107Z","0.0.0-dev-20230213124817":"2023-02-13T12:49:10.805Z","0.0.0-dev-20230213131136":"2023-02-13T13:12:27.981Z","2.5.0":"2023-02-13T14:16:46.552Z","0.0.0-dev-20230215112011":"2023-02-15T11:20:55.257Z","2.5.1":"2023-02-15T19:30:21.596Z","0.0.0-dev-20230317190235":"2023-03-17T19:03:34.623Z","2.5.2":"2023-03-17T20:40:08.934Z","0.0.0-dev-20230318150808":"2023-03-18T15:08:43.356Z","0.0.0-dev-20230318162751":"2023-03-18T16:28:28.147Z","0.0.0-dev-20230318171948":"2023-03-18T17:20:47.094Z","0.0.0-dev-20230318173550":"2023-03-18T17:36:38.790Z","0.0.0-dev-20230318180604":"2023-03-18T18:06:51.797Z","0.0.0-dev-20230318182221":"2023-03-18T18:23:10.828Z","0.0.0-dev-20230318183840":"2023-03-18T18:39:32.976Z","0.0.0-dev-20230319192154":"2023-03-19T19:22:44.595Z","0.0.0-dev-20230319193708":"2023-03-19T19:37:58.361Z","0.0.0-dev-20230319202046":"2023-03-19T20:21:38.764Z","0.0.0-dev-20230320183136":"2023-03-20T18:32:54.127Z","0.0.0-dev-20230320184810":"2023-03-20T18:49:19.664Z","2.5.3":"2023-03-23T10:17:35.865Z","0.0.0-dev-20230323203724":"2023-03-23T20:38:05.622Z","0.0.0-dev-20230323205240":"2023-03-23T20:53:19.620Z","0.0.0-dev-20230323211647":"2023-03-23T21:17:36.347Z","0.0.0-dev-20230326141955":"2023-03-26T14:20:35.150Z","2.5.4":"2023-03-27T11:03:16.725Z","0.0.0-dev-20230327175739":"2023-03-27T17:58:19.937Z","0.0.0-dev-20230329123951":"2023-03-29T12:40:42.207Z","0.0.0-dev-20230329140150":"2023-03-29T14:02:47.600Z","0.0.0-dev-20230329141708":"2023-03-29T14:18:04.080Z","0.0.0-dev-20230329144927":"2023-03-29T14:50:30.757Z","0.0.0-dev-20230330123203":"2023-03-30T12:33:19.841Z","0.0.0-dev-20230330124619":"2023-03-30T12:47:10.014Z","0.0.0-dev-20230330130626":"2023-03-30T13:07:39.465Z","2.5.5":"2023-03-30T18:43:25.750Z","0.0.0-dev-20230403072857":"2023-04-03T07:29:35.231Z","0.0.0-dev-20230403120345":"2023-04-03T12:04:23.214Z","0.0.0-dev-20230417144407":"2023-04-17T14:44:53.444Z","0.0.0-dev-20230417150059":"2023-04-17T15:01:44.248Z","0.0.0-dev-20230421204125":"2023-04-21T20:42:14.884Z","0.0.0-dev-20230422142907":"2023-04-22T14:30:09.213Z","0.0.0-dev-20230423230056":"2023-04-23T23:01:48.966Z","0.0.0-dev-20230424190033":"2023-04-24T19:01:32.496Z","0.0.0-dev-20230424191827":"2023-04-24T19:19:47.636Z","0.0.0-dev-20230424194913":"2023-04-24T19:50:22.085Z","0.0.0-dev-20230424201223":"2023-04-24T20:13:29.627Z","0.0.0-dev-20230424202839":"2023-04-24T20:29:40.605Z","0.0.0-dev-20230424205150":"2023-04-24T20:53:02.655Z","0.0.0-dev-20230424210540":"2023-04-24T21:06:43.036Z","0.0.0-dev-20230424221053":"2023-04-24T22:12:18.131Z","0.0.0-dev-20230424222806":"2023-04-24T22:29:22.698Z","0.0.0-dev-20230424225650":"2023-04-24T22:57:54.401Z","2.5.6":"2023-04-25T11:13:46.887Z","0.0.0-dev-20230502144229":"2023-05-02T14:43:24.577Z","0.0.0-dev-20230502155235":"2023-05-02T15:53:26.725Z","0.0.0-dev-20230502162309":"2023-05-02T16:24:07.343Z","0.0.0-dev-20230502164338":"2023-05-02T16:44:43.806Z","0.0.0-dev-20230502211538":"2023-05-02T21:16:32.238Z","2.5.7":"2023-05-03T10:03:48.787Z","0.0.0-dev-20230509101921":"2023-05-09T10:20:24.895Z","0.0.0-dev-20230528123435":"2023-05-28T12:35:39.526Z","0.0.0-dev-20230528125234":"2023-05-28T12:53:34.844Z","0.0.0-dev-20230528132208":"2023-05-28T13:22:58.283Z","0.0.0-dev-20230528140259":"2023-05-28T14:04:08.524Z","0.0.0-dev-20230528143537":"2023-05-28T14:36:48.393Z","0.0.0-dev-20230528160711":"2023-05-28T16:08:02.228Z","0.0.0-dev-20230528164120":"2023-05-28T16:42:18.981Z","0.0.0-dev-20230528170051":"2023-05-28T17:02:02.772Z","0.0.0-dev-20230528173059":"2023-05-28T17:32:06.090Z","0.0.0-dev-20230528181900":"2023-05-28T18:19:57.879Z","0.0.0-dev-20230528183722":"2023-05-28T18:38:41.210Z","0.0.0-dev-20230528185153":"2023-05-28T18:52:53.214Z","0.0.0-dev-20230528190715":"2023-05-28T19:08:22.514Z","0.0.0-dev-20230528194103":"2023-05-28T19:42:20.338Z","0.0.0-dev-20230528200306":"2023-05-28T20:04:07.688Z","0.0.0-dev-20230531082239":"2023-05-31T08:23:44.872Z","0.0.0-dev-20230531084037":"2023-05-31T08:41:57.136Z","0.0.0-dev-20230531085907":"2023-05-31T09:00:11.265Z","2.5.8":"2023-05-31T09:44:49.073Z","0.0.0-dev-20230711204333":"2023-07-11T20:45:16.434Z","0.0.0-dev-20230714212045":"2023-07-14T21:21:53.688Z","0.0.0-dev-20230714214323":"2023-07-14T21:44:33.144Z","0.0.0-dev-20230716141052":"2023-07-16T14:11:50.545Z","0.0.0-dev-20230716142935":"2023-07-16T14:30:39.509Z","0.0.0-dev-20230718122336":"2023-07-18T12:26:09.980Z","0.0.0-dev-20230718124717":"2023-07-18T12:49:30.770Z","0.0.0-dev-20230718130742":"2023-07-18T13:09:49.328Z","0.0.0-dev-20230718132637":"2023-07-18T13:28:36.862Z","2.6.0":"2023-07-18T23:01:21.508Z","0.0.0-dev-20230815223317":"2023-08-15T22:34:21.289Z","0.0.0-dev-20230815225224":"2023-08-15T22:53:10.986Z","0.0.0-dev-20230820153451":"2023-08-20T15:35:39.415Z","0.0.0-dev-20230822131635":"2023-08-22T13:18:17.126Z","0.0.0-dev-20230822134434":"2023-08-22T13:45:58.687Z","0.0.0-dev-20230830093747":"2023-08-30T09:39:11.790Z","0.0.0-dev-20230830120642":"2023-08-30T12:08:01.237Z","0.0.0-dev-20230830133821":"2023-08-30T13:39:37.253Z","0.0.0-dev-20230908144305":"2023-09-08T14:44:24.071Z","2.6.1":"2023-09-08T23:04:36.138Z","0.0.0-dev-20231109130949":"2023-11-09T13:11:42.802Z","0.0.0-dev-20231109134954":"2023-11-09T13:53:23.004Z","2.6.2":"2023-11-09T15:45:05.897Z","0.0.0-dev-20231113225212":"2023-11-13T22:53:06.872Z","0.0.0-dev-20231123223450":"2023-11-23T22:35:19.977Z"},"bugs":{"url":"https://github.com/chakra-ui/chakra-ui/issues"},"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"license":"MIT","homepage":"https://github.com/chakra-ui/chakra-ui#readme","keywords":["system","styled-component","emotion","ui-component","ui","chakra","style-props","design-system"],"repository":{"url":"git+https://github.com/chakra-ui/chakra-ui.git","type":"git","directory":"packages/core/system"},"description":"Chakra UI system primitives","maintainers":[{"email":"joseshegs@gmail.com","name":"segunadebayo"},{"email":"npm@grizzly.codes","name":"schroetier"}],"readme":"","readmeFilename":""}